Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
D3 Reusable Table Pattern
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3 Reusable Table Pattern</title>
<style>
table {
border-collapse: collapse;
}
th,
td {
padding: 15px;
border: 1px solid rgba(0, 0, 0, .15);
}
th {
text-align: left;
}
</style>
</head>
<body>
<div class="js-table-one"></div>
<div class="js-table-two"></div>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="table.js"></script>
<script src="main.js"></script>
</body>
</html>
d3.json('matches.json', function(err, matches) {
var data = matches.matches;
var first = d3.select('.js-table-one');
var second = d3.select('.js-table-two');
// Table One
var tableOneWrap = first.append('div').classed('table-wrap', true);
var tableOne = d3.chart.table();
tableOne
.data(data)
.columns(['Class', 'Map', 'Partner'])
.returns({
0: function(d) { return d.class; },
1: function(d) { return d.map; },
2: function(d) { return d.partner; }
});
tableOne(tableOneWrap);
// Table Two
var tableTwoWrap = first.append('div').classed('table-wrap', true);
var tableTwo = d3.chart.table();
tableTwo
.data(data)
.columns(['Kills', 'Assists', 'Deaths'])
.returns({
0: function(d) { return d.kills; },
1: function(d) { return d.assists; },
2: function(d) { return d.deaths; }
});
tableTwo(tableTwoWrap);
});
{
"matches": [
{
"id": 1,
"class": "Hunter",
"map": "Asylum",
"partner": "unoudid",
"kills": 7,
"assists": 2,
"deaths": 5,
"score": 3
},
{
"id": 2,
"class": "Hunter",
"map": "Pantheon",
"partner": "Blackt1g3r",
"kills": 6,
"assists": 3,
"deaths": 3,
"score": 5
},
{
"id": 3,
"class": "Warlock",
"map": "Asylum",
"partner": "Malagate",
"kills": 7,
"assists": 6,
"deaths": 2,
"score": 5
},
{
"id": 4,
"class": "Warlock",
"map": "The Burning Shrine",
"partner": "unoudid",
"kills": 7,
"assists": 3,
"deaths": 2,
"score": 5
},
{
"id": 5,
"class": "Titan",
"map": "Pantheon",
"partner": "Mid7night",
"kills": 9,
"assists": 1,
"deaths": 1,
"score": 5
}
]
}
if (!d3.chart) {
d3.chart = {};
}
d3.chart.table = function() {
var div,
data,
columns = [],
returns = {};
function chart(container) {
div = container;
var table = container.append('table');
update();
}
chart.update = update;
function update() {
var table = div.select('table');
var thead = table.append('thead').append('tr');
columns.forEach(function(column) {
thead.append('th')
.text(column);
});
var tbody = table.append('tbody');
var rows = tbody.selectAll('tr.row')
.data(data, function(d) { return d.id; })
var rowsEnter = rows.enter().append('tr').classed('row', true);
for (var i = 0; i < columns.length; i++) {
var td = rowsEnter.append('td').text(returns[i]);
}
}
chart.data = function(value) {
if (!arguments.length) return data;
data = value;
return chart;
}
chart.columns = function(value) {
if (!arguments.length) return columns;
columns = value;
return chart;
}
chart.returns = function(value) {
if (!arguments.length) return returns;
returns = value;
return chart;
}
return chart;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment