September 2018
Beginner to intermediate
180 pages
3h 58m
English
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]. ...
Read now
Unlock full access