Displaying data in a table

Just for debugging purposes, let's create a table that will show all of our data. Make your <body> tag in index.html look as follows:

<body>
    <svg></svg>
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>date</th>
                <th>distance</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="app.js" charset="utf-8"></script>
</body>

D3 can also be used to manipulate the DOM, just like jQuery. Let's populate the<tbody>in that style. Add the following to the bottom of app.js:

var createTable = function(){
    for (var i = 0; i < runs.length; i++) {
        var row = d3.select('tbody').append('tr');
        row.append('td').html(runs[i].id);
        row.append('td').html(runs[i].date);
        row.append('td').html(runs[i].distance);
    }
}

createTable();

Add some styling for the table at the bottom of app.css:

table, th, td {
   border: 1px solid black;
}
th, td {
    padding:10px;
    text-align: center;
}

Adjust the CSS for svg to add a bottom margin. This will create some space between the graph and the table:

svg {
    overflow: visible;
    margin-bottom: 50px;
}

Now the browser should look like this:

Table of Contents for Displaying data in a table

Create new playlist

Sign In

Sign Up

Table of Contents for
Displaying data in a table