From a13fd4523e69cc7dc247f8610c6d779fcb42f2c2 Mon Sep 17 00:00:00 2001 From: Matt Huntington Date: Sat, 18 Aug 2018 09:33:06 -0400 Subject: [PATCH] adjustments to scatter plot --- BUILD.md | 56 ++++++++++++++++++-------------- examples/scatter_plot/app.css | 8 +++++ examples/scatter_plot/app.js | 11 +++++++ examples/scatter_plot/index.html | 11 +++++++ 4 files changed, 62 insertions(+), 24 deletions(-) diff --git a/BUILD.md b/BUILD.md index a1932c2..0b653df 100644 --- a/BUILD.md +++ b/BUILD.md @@ -570,26 +570,28 @@ Now our axes are complete: ## Display data in a table -Just for debugging purposes, let's create a table which will show all of our data: +Just for debugging purposes, let's create a table which will show all of our data. Make your `` tag in `index.html` look like this: ```html - - - - - - - - - - - -
iddatedistance
- - -``` - -D3 can also be used to manipulate the DOM, just like jQuery. Let's populate the `` in that style: + + + + + + + + + + + + +
iddatedistance
+ + + +``` + +D3 can also be used to manipulate the DOM, just like jQuery. Let's populate the `` in that style. Add the following to the bottom of `app.js`: ```javascript var createTable = function(){ @@ -604,14 +606,9 @@ var createTable = function(){ createTable(); ``` -And a little styling: +Add some styling for the table at the bottom of `app.css`: ```css -svg { - overflow: visible; - margin-bottom: 50px; -} - table, th, td { border: 1px solid black; } @@ -621,6 +618,17 @@ th, td { } ``` +Adjust the CSS for `svg` to add a bottom margin. This will create some space between the graph and the table: + +```css +svg { + overflow: visible; + margin-bottom: 50px; +} +``` + +Now the browser should look like this: + ![](https://i.imgur.com/luGiAys.png) ## Create click handler diff --git a/examples/scatter_plot/app.css b/examples/scatter_plot/app.css index b8d5d37..1eaa0a4 100644 --- a/examples/scatter_plot/app.css +++ b/examples/scatter_plot/app.css @@ -4,7 +4,15 @@ circle { } svg { overflow: visible; + margin-bottom: 50px; } body { margin: 20px 40px; } +table, th, td { + border: 1px solid black; +} +th, td { + padding:10px; + text-align: center; +} diff --git a/examples/scatter_plot/app.js b/examples/scatter_plot/app.js index f778dc2..1f1ad0e 100644 --- a/examples/scatter_plot/app.js +++ b/examples/scatter_plot/app.js @@ -65,3 +65,14 @@ var leftAxis = d3.axisLeft(yScale); d3.select('svg') .append('g') .call(leftAxis); //no need to transform, since it's placed correctly initially + +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(); diff --git a/examples/scatter_plot/index.html b/examples/scatter_plot/index.html index 9379eed..1c4d70a 100644 --- a/examples/scatter_plot/index.html +++ b/examples/scatter_plot/index.html @@ -7,6 +7,17 @@ + + + + + + + + + + +
iddatedistance