From 41019c8ad964244440ec443f95d013c666009945 Mon Sep 17 00:00:00 2001 From: Matt Huntington Date: Fri, 17 Aug 2018 17:31:37 -0400 Subject: [PATCH] adjustments to scatter plot --- BUILD.md | 16 +++++++++++----- examples/scatter_plot/app.js | 7 ++++++- examples/scatter_plot/index.html | 6 +----- 3 files changed, 18 insertions(+), 11 deletions(-) diff --git a/BUILD.md b/BUILD.md index 77f21f0..631e8ee 100644 --- a/BUILD.md +++ b/BUILD.md @@ -454,11 +454,9 @@ Notice we moved `parseTime` and `formatTime` up so they could be used within the ![](https://i.imgur.com/gSA05gP.png) -## Dynamically generate svg elements +## Dynamically generate SVG elements -- Currently, we have just enough `` elements to fit our data. What if we don't want to count how many elements are in the array? -- D3 Can create elements as needed -- First, remove all `` elements from `index.html` +Currently, we have just enough `` elements to fit our data. What if we don't want to count how many elements are in the array? D3 can create elements as needed. First, remove all `` elements from `index.html`. Your `` tag should look like this now: ```html @@ -487,10 +485,18 @@ d3.selectAll('circle') }); ``` -It should look exactly the same as before, but now circles are being created for each object in the "runs" array +It should look exactly the same as before, but now circles are being created for each object in the `runs` array: ![](https://i.imgur.com/r59oUuJ.png) +Here's a more in depth explanation of what we just wrote. Take a look at the first line of new code from above: + +```javascript +d3.select('svg').selectAll('circle') +``` + +This might seem unnecessary. Why not just do `d3.selectAll('circle')`? Well, at the moment, there are no `circle` elements. We're going to be appending `circle` elements dynamically, so `d3.select('svg')` tells D3 where to append them. We still need `.selectAll('circle')` though, so that when we call `.data(runs)` on the next line, D3 knows what elements to bind the various objects in the `runs` array to. But there aren't any `circle` elements to bind data to. That's okay: `.enter()` finds the "run" objects that haven't been bound to any `circle` elements yet (in this case all of them). We then use `.append('circle')` to append a circle for each unbound "run" object that `.enter()` found. + ## Create axes D3 can automatically generate axes for you: diff --git a/examples/scatter_plot/app.js b/examples/scatter_plot/app.js index 1fd776c..383ef3f 100644 --- a/examples/scatter_plot/app.js +++ b/examples/scatter_plot/app.js @@ -31,7 +31,12 @@ var yDomain = d3.extent(runs, function(datum, index){ }) yScale.domain(yDomain); -d3.selectAll('circle').data(runs) +d3.select('svg').selectAll('circle') //since no circles exist, we need to select('svg') so that d3 knows where to append the new circles + .data(runs) //attach the data as before + .enter() //find the data objects that have not yet been attached to visual elements + .append('circle'); //for each data object that hasn't been attached, append a to the + +d3.selectAll('circle') .attr('cy', function(datum, index){ return yScale(datum.distance); }); diff --git a/examples/scatter_plot/index.html b/examples/scatter_plot/index.html index 7f163e3..9379eed 100644 --- a/examples/scatter_plot/index.html +++ b/examples/scatter_plot/index.html @@ -6,11 +6,7 @@ - - - - - +