1 Prepare an input file with season results or download one from our examples.
2 Put a div with replayTable class on your page and supply a link to the input file using data-source attribute:
<div class="replayTable"
data-source="/path/to/file.csv">
</div>
3 Include D3.js and Replay Table scripts and the stylesheet. Apply some magic to the body:
<head>
...
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/replay-table/dist/replay-table.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/replay-table/dist/replay-table.css">
</head>
<body>
...
<script type="text/javascript">replayTable.magic()</script>
</body>
The library is highly customizable via data- attributes. Check out our docs.
<div class="replayTable" id="replay-english-premier-league-2016-2017"
data-source="/replay/assets/data/football/2016-2017/english-premier-league.json"
data-format="football-data.org"
data-order-by="points,goalsDifference,goalsFor"
data-visualizer="sparklines">
</div><div class="replayTable" id="replay-formula-one-drivers-2016"
data-source="/replay/assets/data/formula-one/2016/formula-one-drivers.csv"
data-preset="f1"
data-extra-columns-number="1"
data-columns="position,item,Team,points,points.change"
data-labels="#,Driver,Team,Points">
</div><div class="replayTable" id="replay-nba-western-2015-2016"
data-source="/replay/assets/data/basketball/2015-2016/nba-western.csv"
data-preset="winLoss"
data-insert-start-round="Start"
data-filter-items="Golden State Warriors,San Antonio Spurs,Oklahoma City Thunder,Los Angeles Clippers,Portland Trail Blazers,Dallas Mavericks,Memphis Grizzlies,Houston Rockets,Utah Jazz,Sacramento Kings,Denver Nuggets,New Orleans Pelicans,Minnesota Timberwolves,Phoenix Suns,Los Angeles Lakers"
data-collapse-to-rounds="false">
</div>