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
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 than the recipes we have encountered so far since they are designed to implement fully functional reusable charts. I have tried to break it into different segments and with consistent chart structures to ease your reading experience. However, it is still highly recommended to open the companion code examples in your browser and your text editor while going through this chapter to minimize potential confusion and maximize the benefit.
D3 chart convention: Before we dive into creating our first reusable chart in D3, we need to cover some charting conventions commonly accepted in the D3 community otherwise we might risk creating charting libraries that confuse our user instead of helping them.
Let's first take a look at the following diagram:
D3 chart convention
Note
To see this convention explained by the creator of D3 please visit http://bl.ocks.org/mbostock/3019563
As shown in this diagram the point of origin (0, 0) in an SVG image is at its top-leftmost corner as expected, however, the most important aspect of this convention pertains to how chart margins are defined and furthermore where the axes are placed.
- Margins: First of all, let us see the most important aspect of this convention—the margins. As we can see for each chart there are four different margin settings: left, right, top, and bottom margins. A flexible chart implementation should allow its user to set different values for each of these margins and we will see in later recipes how this can be achieved.
- Coordinate translation: Secondly, this convention also suggests that the coordinate reference of the chart body (grey area) should be defined using a SVG translate transformation
translate(margin.left, margin.top). This translation effectively moves the chart body area to the desired point, and one additional benefit of this approach is, by shifting the frame of reference for chart body coordinates, it simplifies the job of creating sub-elements inside the chart body since the margin size becomes irrelevant. For any sub-element inside the chart body, its point of origin (0, 0) is now the top-leftmost corner of the chart body area. - Axes: Lastly, the final aspect of this convention is regarding how and where chart axes are placed. As shown by this diagram chart axes are placed inside chart margins instead of being part of the chart body. This approach has the advantage of treating axes as peripheral elements in a chart, hence not convoluting the chart body implementation and additionally making axes rendering logic chart-independent and easily reusable.
Now let's create our first reusable D3 chart with all the knowledge and techniques we learned so far.