Points

To create a base for 80% of geometric drawings, we can use points that we name:

A, B, C, etc…

Remember these?

Just like in school, D3.js (and most of the world) use separate X and Y values to specify the location of points on a grid:

*Note that SVG coordinates start with 0,0 in top-left

As we’re looking to draw flat geometric shapes, we’re going to use circles of radius 0 as reference points. Thankfully, we can just create a function to turn coordinates in to a point:

function point(centreX, centreY, label) {

  myPoint = drawing.append("circle")
  .style("stroke", "none") // Do not draw the line
  .style("fill", "none") // Do not fill
  .attr("r", 0)
  .attr("cx", centreX)
  .attr("cy", centreY)
  .attr("label", label) //This is optional.
                        //It follows geometry textbooks

  return myPoint
}

With this we can say:

A = new point( 100, 100, "A");
B = new point( 200, 200, "B");

And we now have our first tangible building block for Geometry in D3.js.