forked from romsson's block: HTML Data Table
xxxxxxxxxx
<html lang="en">
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
d3.json("countries_2012.json", function(error, data){
var columns = Object.keys(data[0]);
var table = d3.select("body").append("table"),
thead = table.append("thead")
.attr("class", "thead");
tbody = table.append("tbody");
table.append("caption")
.html("World Countries Ranking");
thead.append("tr").selectAll("th")
.data(columns)
.enter()
.append("th")
.text(function(d) { return d; })
.on("click", function(header, i) {
tbody.selectAll("tr").sort(function(a, b) {
return d3.descending(a[header], b[header]);
});
});
var rows = tbody.selectAll("tr.row")
.data(data)
.enter()
.append("tr").attr("class", "row");
var cells = rows.selectAll("td")
.data(function(row) {
return d3.range(Object.keys(row).length).map(function(column, i) {
return row[Object.keys(row)[i]];
});
})
.enter()
.append("td")
.text(function(d) { return d; })
});
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js