Attaching data to visual elements

Now let's attach each of the JavaScript objects in our runs array to a circle in our SVG. Once we do this, each circle can access the data of its associated run object to determine its position. Add the following to the bottom of app.js:

yScale.range([HEIGHT, 0]);
yScale.domain([0, 10]);
//selectAll is like select,
//but it selects all elements that match the query string
d3.selectAll('circle').data(runs);

If there were more objects in our runs array than there are circles, the extra objects are ignored. If there are more circles than objects, then JavaScript objects are attached to circles in the order in which they appear in the DOM until there are no more objects to attach.