diff --git a/BUILD.md b/BUILD.md index 4649c77..5034510 100644 --- a/BUILD.md +++ b/BUILD.md @@ -12,6 +12,7 @@ 1. Create a time scale 1. Parse and format times 1. Set dynamic domains +1. Dynamically generate svg elements ## Add link to d3 library @@ -276,3 +277,22 @@ xDomain = d3.extent(runs, function(datum, index){ }); xScale.domain(xDomain); ``` + +## 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` + +```html + +``` + +In `app.js` add the code to create the circles: + +```javascript +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 +```