diff --git a/BUILD.md b/BUILD.md index 4aae642..a7b2f7b 100644 --- a/BUILD.md +++ b/BUILD.md @@ -14,6 +14,7 @@ 1. Set dynamic domains 1. Dynamically generate svg elements 1. Create axes +1. Display data in a table ## Add link to d3 library @@ -334,3 +335,54 @@ body { margin: 20px 40px; } ``` + +## Display data in a table + +Just for debugging purposes, let's create a table which will show all of our data: + +```html + + + + + + + + + + + +
iddatedistance
+``` + +Now populate the ``: + +```javascript +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(); +``` + +And a little styling: + +```css +svg { + overflow: visible; + margin-bottom: 50px; +} + +table, th, td { + border: 1px solid black; +} +th, td { + padding:10px; + text-align: center; +} +```