Interactive Data Visualization for the Web, 2nd Edition

Chapter 10. Interactivity

Now that you’re a pro at data updates, transitions, and motion, let’s incorporate true interactivity.

Binding Event Listeners

Say what? I know, I know. First, we bound data, which was weird enough. And now I’m talking about binding event listeners?

As explained in Chapter 9, JavaScript uses an event model in which “events” are triggered by things happening, such as new input from the user, provided via a keyboard, mouse, or touch screen. Most of the time, events are being triggered constantly, left and right—it’s just that nobody is listening for them, so they are ignored.

To make our pieces interactive, we define chunks of code that listen for specific events being triggered on specific DOM elements. In Chapter 9, we used the following code:

d3.select("p")
    .on("click", function() {
        //Do something on click
    });

This binds an event listener to the p paragraph element. The listener happens to be listening for the click event, which is the JavaScript event triggered when the user clicks the mouse on that p element. (D3 doesn’t use custom event names, although you can define your own. For the sake of supporting existing standards, D3 recognizes all the standard JavaScript events, such as mouseover and click. The events supported vary somewhat by browser. Peter-Paul Koch’s event compatibility tables are a useful reference.)

This gets at one of the nuances of JavaScript’s event model, which is that events don’t happen in a vacuum. Rather, they are always