Interactivity with d3.js





This section aims to describe how to turn your d3.js chart interactive. It describe how to add tooltips, animations, hover effects, zoom feature and more.

Tooltip

D3.js allows to easily add a tooltip to any element of your chart. The idea is always the same: triggering a function when the user mouseover, mousemove or mouseleave the element. See the 3 examples below showing how to apply this technique to a single circle, how to custom the tooltip content, and how to apply it to data.



Brushing

A post on the basic of brushing with d3.js. It starts by very basic use of the d3.brush() function: just initializing the functionality. Then, it explains how to trigger a function to perform a change on the selected points. Lastly, it describes how to smoothly zoom on the selected area.



Buttons

A post on buttons: what are the different types, how to add them using html, and how to connect them with the chart to trigger transition and animation.



Zooming

A post on the basic of zooming with d3.js. It starts with a very basic use of the d3.zoom() function: just applied on a single circle. Then, it explains how to trigger a function that update axis. Lastly, it shows that brushing can be used for zooming as well.



Transition

Transition is where the magick of D3 takes place. Here you will find a few examples based on a single element to understand the basic mechanism. A few examples based on a real chart are then available to illustrate the process.

Related chart types


Basics
Custom
Interactivity
Shape helpers
Caveats
Data art