D3 in Action
Append an SVG to the div with id Chartd3.selectAll("#chart") , that's your canvas.
Select all the .circles in your canvas and append circles to them.
Wait, append circles to circles classes that don't exist?!?
The d3 .data() method binds your canvas to the data, then the .enter() method creates new nodes in the DOM for incoming data. Once your data is bound any changes to the data array will be reflected in the DOM
Carving out pieces of the DOM, binding them to data and updating the DOM when that data changes... sound familiar?
See the Pen PmWMrL by Aaron Gottlieb (@jean-luc19) on CodePen.
Next