Behaviors

In the last section, we created an explanatory graphic that used interaction to guide the user through the data. Often, however, the goal is just to make a dataset interactive and give the user some way of manipulating it, in other words, an exploratory graphic.

D3's behaviors save a boatload of time in setting up the more complex interactions in a chart. Additionally, they're designed to handle differences in input devices so you only have to implement a behavior once to have it work both with a mouse and on touch devices. The two currently supported behaviors are drag and zoom, both of which will get you pretty far.

Drag

Instead of having the user click buttons in the last example, what if we just let them drag the chart area to see the ...

Get D3.js: Cutting-edge Data Visualization now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.