in Data Visualization, JavaScript

Interactions

It is often required to interact with our visualizations e.g hovering, zooming, clicking etc. to change the appearance of the visual elements or drill drown information. These kind of interaction has first class support in D3. In this post we will look at the following topis:

  • Interacting with mouse events
  • Implementing zoom and pan behavior
  • Implementing drag behavior

Interacting with mouse events

Mouse events like click, mousedown, mouseenter, mouseleave, mouseover etc are vey common in UI interaction. D3 provides the on() method to register an event listener to a selection. The event listener will be attached to all the elements in selection for the specified event type.

Example:

The on() method registers an event listener. Whenever the specified event is dispatched the listener function gets called and it is passed with the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).

The d3.mouse(container) method returns the current (x,y) position of the mouse relative to the specified container.

Implementing zoom and pan behavior

Zooming and panning are common and useful techniques which allows users to focus on an area of interest. Since svg can be zoomed or scaled to any level without degrading the quality they are ideal for this kind of interaction. D3 zooming and panning is provide in the d3-zoom module. So lets go ahead and install it.

or

Now that we have d3-zoom installed lets look at an implementation of zoom and pan behavior:

First create a new zoom behavior using d3.zoom():

We have also configured a scale extent which defines how much zoom is allowed (in our case we can zoom upto a maximum of 10 times the original size). We have also registered a zoom event listener. This will be called whenever a zoom event is dispatched.

Next create a svg container which should respond to zoom or pan event:

In Line 6, we called the zoom function using selection.call() method. In Line 7 we have appended a svg:g group element to contain our circles as shown below:

The code above should be familiar by now. We are creating new circles and binding the data points. Then we translate the circles to the data points.

Finally define the event listener function ‘zoomed’:

Whenever a zoom event is dispatched it will transform the svg:g group to the events (x,y) and scale upto k.

With this few lines of code we have a zooming and panning behavior on our group container. You can see this in action in the below jsbin.

Implementing drag behavior

Implementing drag is very much similar to implement zoom and pan. D3 drag behavior is provided by d3-drag module:

or

First create a new drag behavior:

Here we created a new drag behavior and attached an event listener for the drag event. D3 also provides hooks for start of the drag and end of the drag e.g

Now we call the drag function on a selection which needs to respond to drag event:

The last step is to define the event handler function ‘dragged’:

Whats Next ?

Well we have reached to the end of the tutorial series. D3 is a vast library and the visualizations we can create with it are enormous. I have tried to cover the essentials concepts of D3 v4. Equipped with this knowledge I encourage you to explore more by going through the official API Reference and the demos provided at https://bl.ocks.org/mbostock.

I hope you found this series useful. If you have any feedback please put it in the comments section. For more such learning experiences, subscribe.

<< Layouts

Write a Comment

Comment

  1. Thanks for the tutorial Raja, very helpful.
    You’re probably not after more requests but it’d be great to read your coverage on d3-force.

  2. Aloha Raja,
    have you ever stepped over the problem with zoom & pan and mouse events (like mouseover) on svg-objects?
    Whenever zoom functionality is enabled, all events get consumed by this and earlier created object related mouse events (like mouseover) will never fire.
    I filed a question here: https://github.com/d3/d3-zoom/issues/66
    Do you know about this? Have you got any working suggestions to this?
    Thanks in advance