13 Advanced visualization with D3

 

This chapter covers

  • Creating vector graphics with SVG
  • Creating out-of-the-ordinary visualizations with D3

I couldn’t end this book without coverage of D3: the preeminent visualization framework for building interactive and animated browser-based visualizations in JavaScript.

D3 (data-driven documents) is a complicated library; that’s why this is called the advanced visualization chapter. D3 has a large API and sophisticated concepts. This is a powerful addition to your toolkit, but unfortunately it comes with a steep learning curve! For most routine charts you’re better off using a simpler API, such as C3, which we covered in chapter 10. When you reach the limitations of C3, however, or you want to create something completely out of the box, that’s when you’ll reach for D3.

I can’t hope to fully teach you D3; that would require a whole book. But I do hope to teach you fundamental concepts and how they relate. For example, we’ll learn one of D3’s core concepts, the data join pattern, and how to use it to translate our data to a visualization. D3 is a large and complex API, so we’ll only scratch the surface.

Are you ready to create a more advanced visualization? In this chapter, we’ll make something out of the ordinary, something that we couldn’t do with C3. This example will give you an inkling of how powerful D3 is, and along the way, we’ll learn core D3 skills.

13.1 Advanced visualization

13.2 Getting the code and data

13.3 Visualizing space junk

13.4 What is D3?

13.5 The D3 data pipeline

13.6 Basic setup

13.7 SVG crash course

13.7.1 SVG circle

13.7.2 Styling

13.7.3 SVG text

13.7.4 SVG group

13.8 Building visualizations with D3

13.8.1 Element state

13.8.2 Selecting elements

13.8.3 Manually adding elements to our visualization

13.8.4 Scaling to fit

13.8.5 Procedural generation the D3 way

13.8.6 Loading a data file

13.8.7 Color-coding the space junk

13.8.8 Adding interactivity

13.8.9 Adding a year-by-year launch animation

Summary