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 different chart...

Common shapes and primitives

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:

• rect

• circle

• ellipse

• line

• polyline

• polygon

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.

Note

To read more about built-in SVG shapes and their attributes, take a look at the specification at http://www.w3.org/TR/SVG/shapes.html.

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...

Curved lines with the SVG path

What if we need to draw with curved lines? Now, we will be able to draw all possible polygons, but we lack the possibility of drawing more complex shapes (such as curves and polynomial functions). Fortunately, the SVG standard provides a very flexible element for this called the path element. With this element, one can draw the most flexible curves and shapes as well as all the previous common shapes.

The path element takes a d attribute to define the exact shape of the path. The shape can be defined with special commands (such as drawing straight line, drawing smooth curve, and so on) and point coordinates.

Let us first look at the preceding example; we want to draw the same star-shaped polygon, but this time with the use of the path element, as shown in the following code:

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

var polygon = svg.append("path")
  .attr("d", 'M350,75  L379,161 469,161 397,215 423,301 350,250 277...

Summary

In this chapter, you learned the basics of SVG curves and shapes and how they are generated in D3.js.

In the first section, we saw common shapes such as rectangles (with round corners), ellipses, polygons, and so on. These shapes are very easy to construct because they take a small number of self explaining arguments. The polygon element is the most flexible common shape because we can connect an arbitrary number of data points with straight lines to a shape. Next, we saw the various commands responsible for drawing curves and lines with the path element. Every line starts with the moveto command and takes an arbitrary number of commands and coordinates. We saw the lineto and curveto commands as well as elliptic arcs.

This chapter also contained a small introduction to the origin of Bézier curves as a parametric version for polynomial functions with the use of binomial expansion. This enables us to modify the shape of the polynomial function with start, end, and control points rather...