Introduction to Interactivity

Let’s dive into interaction in D3.js by introducing the important concept of event listening.

Event listening

Event listening is an important technique to make data visualization interactive. The event listener will listen to the user. Every time the user interacts with the visualization, we will call some function and make changes to visualization based on interaction.

The user can interact through a mouse or keyboard with the visualization. Some of the common event listeners are:

• mouseover: Cursor is moved onto the element that has the listener attached.
• mouseout: Cursor is moved off the element that has the listener attached.
• wheel: Wheel button of a mouse is rotated in any direction.
• keydown: Any key is pressed

Example

Let’s demonstrate the event listener by an example where we will make an interactive bar chart. The event listener will listen to the event mouseover and every time we hover over the rectangles of the bar chart it will change its color.