Great visualizations don't just stop at pretty pictures and animations! They give users the power to play with data and figure things out on their own. That's what we'll look into next.
You don't know it yet, but you already know how to let users interact with visualizations.
Much like with other UI libraries, the principle for interaction is simple—attach an event listener to an element and do something when it's triggered. We add and remove listeners to and from selections with the .on()
method, an event type (for instance, click
), and a listener function that is executed when the event is triggered.
We can set a capture flag, which ensures our listener is called first and all other listeners wait for our listener to finish. Events bubbling up from children elements will not trigger our listener.
You can rely on the fact there will only ever be a single listener for a particular event on an element because old listeners for the same event are removed...