7 Interactive visualizations

 

This chapter covers

  • Adding event listeners to a D3 selection
  • Creating smooth and reusable transitions
  • Filtering a visualization
  • Using tooltips to reveal additional information
  • Animating the enter, update, and exit selections

One of D3’s key selling points is how easy it is to create interactive visualizations that meet today’s web standards. That’s probably one of the primary reasons why so many data practitioners want to master this library.

In the first part of this book, you’ve worked hard to understand the philosophy behind D3 and its building blocks. Now it’s time for a treat! In this chapter, we’ll reuse previously built charts and make them interactive. We’ll start by filtering the histogram created in chapter 6 by gender. This exercise will teach you how to listen to user events and create smooth transitions. Then we’ll go back to the temperature line chart built in chapter 4 and display a tooltip when the mouse passes over a data point. We’ll take this feature further in the following section with a composite tooltip that reveals the sales breakdown for each music format as the mouse moves over the streamgraph from chapter 5. Finally, we’ll create a scatterplot from scratch to explore how D3 offers granular control over the transitions when data enters or exits a visualization. We’ll also introduce D3’s logarithmic and radial scales.

7.1 Why use interactivity?

7.1.1 A few best practices for interactivity

7.2 Filtering a visualization

7.2.1 Capturing user events

7.2.2 The classed method

7.2.3 Updating the data in a visualization

7.2.4 Creating smooth transitions

7.3 Revealing additional information with tooltips

7.3.1 Building a simple tooltip

7.3.2 Developing a compound tooltip

7.4 Animating the enter, update, and exit selections

7.4.1 Building a scatterplot

7.4.2 Filtering a scatterplot

7.4.3 Creating a reusable transition

Summary