This code generates an HTML table based from a CSV file. This is from the tutorial by Christophe Viau.
In trying his code example, I discovered that the code doesn't work as-is, so I figured others might like to see a working d3.js example that did not rely on a pre-existing container HTML element.
The code remains the same except for some cosmetic tweaks.
The task of writing the CSS is left as an exercise for the reader.
forked from ndarville's block: From CSV to HTML table (Simple)
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<style>
table {
border-collapse: collapse;
border: 2px black solid;
font: 12px sans-serif;
}
td {
border: 1px black solid;
padding: 5px;
}
</style>
</head>
<body>
<!-- <script src="https://d3js.org/d3.v3.min.js"></script> -->
<script src="d3.min.js?v=3.2.8"></script>
<script type="text/javascript"charset="utf-8">
d3.text("data.csv", function(data) {
var parsedCSV = d3.csv.parseRows(data);
var container = d3.select("body")
.append("table")
.selectAll("tr")
.data(parsedCSV).enter()
.append("tr")
.selectAll("td")
.data(function(d) { return d; }).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