Chapter 6. Drawing Curves and Shapes

In the last chapter, you learned how to load, parse, and group real data from the server and we displayed this data in a scatter chart. In this chapter, we will create multiple types of charts to be more flexible in visualizing all the information.

First, we will go through the common shapes in SVG and discuss their usage and attributes. These shapes are easy to use, but solely for simple polygons or ellipses.

In the following section, we will take a look at the more flexible SVG path element and the command to draw lines and curves. After an introduction to Bézier curves, we will be able to draw arbitrary shapes and curves with the SVG commands.

In the third section, we will look at the built-in path generators of D3.js, which facilitate the construction of complex shapes. We will go through a lot of examples to see the different options and parameters in action.

In the last section, we will apply the newly discovered features and implement...