Mise en place

function point(centreX, centreY, label) {
  // Creates a point and returns it

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

  return myPoint
}

function lineFromTwoPoints( A, B, strokeWidth, colour ) {
  // Draws a line from two points, and returns the line

  var myLine = drawing.append("svg:line")
  .attr("x1", A.attr("cx"))
  .attr("y1", A.attr("cy"))
  .attr("x2", B.attr("cx"))
  .attr("y2", B.attr("cy"))
  .attr("stroke-width", strokeWidth)
  .style("stroke", colour);

  return myLine;
}

function circle(centrePoint, radius){
  // Simply draws a circle and returns that circle

  var myCircle = drawing.append("circle")
    .style("stroke", "Black")
    .style("fill", "none")
    .attr("r", radius)
    .attr("cx", centrePoint.attr("cx"))
    .attr("cy", centrePoint.attr("cy"))

  return myCircle;
}