Learn D3.js

Drawing the planet

Now that the scales are set up, you can start drawing the circles. Recall that the plane object is a <g> element that had its (0,0) coordinates translated into the x=MARGIN_PLANET, y=HEIGHT/2 position. If you want to view this guide line, include the following code in your draw() function. It will draw a red line that shows where the centers of the circles will be placed:

function draw() {    // 1) Draw a guide line showing the orbital plane    plane.append("line")            .attr("x1",0)            .attr("x2",WIDTH)            .style("stroke","red");    // ...}

The line is only a guide. You can remove it later.

If a circle has a cy attribute equal to zero, it will be placed on that line and centered vertically. The scale was calculated so that all of the circles ...