Currently, we have just enough <circle> 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 <circle> elements from index.html. Your <body> tag should now look as follows:
<body>
<svg></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="app.js" charset="utf-8"></script>
</body>
In app.js, go to this part of the code:
d3.selectAll('circle').data(runs) .attr('cy', function(datum, index){ return yScale(datum.distance); });
Modify the code to create the circles:
//since no circles exist, we need to select('svg')
//so that d3 knows where to append the new circles
d3.select('svg&apos...
