Until now, we solely used the circle element to draw data points in the chart. However, SVG provides a rich set of more common shapes, which can also be directly used in D3.js. SVG built-in shapes are:

To use built-in shapes in D3.js, we just append them to the SVG node and modify the attributes, just like before with the circle element.

Let's look at some simple examples. By now, we should have no problems drawing an ellipse. All attributes and their usage can be found in the SVG specification, as shown in the following code:

var svg = d3.select("body").append("svg")
  .attr("width", 400)
  .attr("height", 400);

var ellipse = svg.append("ellipse")
  .attr("cx", 200)
  .attr("cy", 200)
  .attr("rx", 180)
  .attr("ry", 90);

The output of the code in the browser looks like the following...