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.
The possibility to create interactive visualizations that meet today’s web standards is one of the key selling points of D3. That’s 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 will reuse previously built charts and make them interactive. We’ll start by filtering the histogram created in chapter 6 to show only the data of practitioners identifying as women or men. 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.