Chapter 8. Chart Them Up

In this chapter we will cover:

• Creating a line chart

• Creating an area chart

• Creating a scatter plot chart

• Creating a bubble chart

• Creating a bar chart

Introduction

In this chapter, we will turn our attention to one of the oldest and well trusted companions in data visualization—charts. Charts are a well defined and well understood graphical representation of data; the following definition just confirms it:

(In charts) the data is represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart.

Jensen C. & Anderson L. (1991)

When charts are used in data visualization, their well understood graphical semantics and syntax relieve the audience of your visualization from the burden of learning the meaning of the graphical metaphor. Hence they can focus on the data itself and the information generated through visualization. The goal of this chapter is not only to introduce some of the commonly used chart types but also demonstrate how the various topics and techniques we have learned so far can be combined and leveraged in producing sleek interactive charts using D3.

Recipes in this chapter are much longer...

Creating a line chart

Line chart is a common, basic chart type that is widely used in many fields. This chart consists of a series of data points connected by straight line segments. A line chart is also typically bordered by two perpendicular axes: the x axis and y axis. In this recipe, we will see how this basic chart can be implemented using D3 as a reusable JavaScript object that can be configured to display multiple data series on a different scale. Along with that we will also show the technique of implementing a dynamic multi-data-series update with animation.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter8/line-chart.html

It is highly recommended to have the companion code example open while reading this recipe.

How to do it...

Let's take a look at the code that implements this chart type. Due the length of the recipe we will only show the outline of the code here while diving into the details...

Creating an area chart

An area chart or an area graph is very similar to a line chart and largely implemented based on the line chart. The main difference between an area chart and a line chart is that in the area chart, the area between the axis and the line are filled with colors or textures. In this recipe we will explore techniques of implementing a type of area chart known as Layered Area Chart.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter8/area-chart.html

How to do it...

Since an area chart implementation is largely based on the line chart implementation and it shares a lot of common graphical elements such as the axes and the clip path, therefore in this recipe we will only show the code concerning the area chart implementation specifics:

...
function renderBody(svg) {
  if (!_bodyG)
    _bodyG = svg.append("g")
      .attr("class", "body")
      .attr("transform", "translate(" 
       ...

Creating a scatter plot chart

A scatter plot or scatter graph is another common type of diagram used to display data points on Cartesian coordinates with two different variables. Scatter plot is especially useful when exploring the problem of clustering and classification. In this recipe, we will learn how to implement a multi-series scatter plot chart in D3.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter8/scatterplot-chart.html

How to do it...

A scatter plot is another chart which uses Cartesian coordinates. Thus, a large part of its implementation is very similar to the charts we have introduced so far, therefore the code concerning peripheral graphical elements are again omitted to save space in this book. Please review the companion code for the complete implementation.

...
_symbolTypes = d3.scale.ordinal() // <-A
  .range(["circle",
    "cross",
    "diamond",
    "square",
    "triangle-down...

Creating a bubble chart

A bubble chart is a typical visualization capable of displaying three data dimensions. Every data entity with its three data points is visualized as a bubble (or disk) on Cartesian coordinates, with two different variables represented using x axis and y axis, similar to the scatter plot chart. While the third dimension is represented using the radius of the bubble (size of the disk). Bubble chart is particularly useful when used to facilitate understanding of relationships between data entities.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter8/bubble-chart.html

How to do it...

In this recipe we will explore techniques and ways of implementing a typical bubble chart using D3. The following code example shows the important implementation aspects of a bubble chart with accessors and peripheral graphic implementation details omitted.

...
var _width = 600, _height = 300,
  _margins...

Creating a bar chart

A bar chart is a visualization that uses either horizontal (row charts) or vertical (column charts) rectangular bars with length proportional to the values that they represent. In this recipe we will implement a column chart using D3. A column chart is capable of visually representing two variables at the same time with its y axis; in other words, the bar height, and its x axis. The x axis values can be either discrete or continuous (for example, a histogram). In our example we choose to visualize continuous values on the x axis and hence effectively implementing a histogram. However, the same techniques can be applied when working with discrete values.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter8/bar-chart.html

How to do it...

The following code example shows the important implementation aspects of a histogram with accessors and peripheral graphic implementation details omitted...