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
mouseleave the element. See the 3 examples below showing how to apply this technique to a single circle, how to customize the tooltip content, and how to apply it to data.
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.
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.
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.
Update axis and element position
An example on a real scatterplot to show how to update axis and elements.
Transition is where the magic 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.
The most basic transition you can do in d3.js.
It just modify the width attribute of a div using d3.js, keeping only the core code.
Pipe several transition
Run several transitions one after another. Involves different attributes like color and width.