Chapter 4. Chart components

 

This chapter covers

  • Creating and formatting axis components
  • Creating legends
  • Using line and area generators for charts
  • Creating complex shapes consisting of multiple types of SVG elements

D3 provides an enormous library of examples of charts, and GitHub is also packed with implementations. It’s easy to format your data to match the existing data used in an implementation—and voilà, you have a chart. Likewise, D3 includes layouts that allow you to create complex data visualizations from a properly formatted dataset. But before you get started with default layouts—which allow you to create basic charts like pie charts, as well as more exotic charts—you should first understand the basics of creating the elements that typically make up a chart. This chapter focuses on widely used pieces of charts created with D3, such as a labeled axis or a line. It also touches on the formatting, data modeling, and analytical methods most closely tied to creating charts.

4.1. General charting principles

4.2. Creating an axis

4.3. Complex graphical objects

4.4. Line charts and interpolations

4.5. Complex accessor functions

4.6. Using third-party D3 modules to create legends

4.7. Summary