Shapes

Now that text is out of the way, let's look at something much more interesting--shape primitives, which we use to create everything from the bars in a bar chart to complex renders of geographic spaces. Let's start by talking about things where you need only one point:

svg.append('circle')   .attr('cx', 350)   .attr('cy', 250)  .attr('r', 100)  .attr('fill', 'green')  .attr('fill-opacity', 0.5)  .attr('stroke', 'steelblue')  .attr('stroke-width', 2);

A circle is defined by a central point (cx, cy) and a radius r. In this instance, we get a green circle with a steel blue border:

Mathematically speaking, a circle is just a special form of ellipse. ...

Get D3.js 4.x Data Visualization - Third Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.