D3 Examples - From CSV to HTML table (Simple)

From CSV to HTML table (Simple)

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.

xxxxxxxxxx
 
<!DOCTYPE html>
<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>
​
    