Group two-dimensional points into rectangular bins. Possible thanks to
Add tooltip to heatmap
Add a tooltip that displays the exact value of a cell and whatever other text.
Ready to go heatmap
A customized heatmap, include hover effect, custom axis, title, fancy color palette, tooltip and more
Color a specific part
Use a simple
if - else statement to color a part of the
Also show how to add a vertical bar annotation.
A double histogram can be handy to compare the distribution of 2
Good to see how the
filter() function works.
Button to control bin size
Add a button that controls bin size. Good example to learn how to create an update function that also update an axis.
Tooltip linked with data
This example shows how to create a tooltip that is different for each datapoint
HTML button types
HTML natively offers different types of button: here is a description of them with the associated code.
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.
This example applies a different
delay to each element. It
gives a progressive transition where elements start moving one by one.
Learn how to represent several groups on the line plot. This requires to group the data using the d3.nest function.
Transition between input data
Add a button that allows to go from one dataset to another with a smooth
transition. Useful to understand how to build a
Turn it horizontal
Lollipop plot often looks better horizontal: it makes label easier to be read. Find how to do it!
The most basic network graph you can do in d3.js. Keeping only the core
Input format: Json
The most basic Parallel Coordinates chart you can do in d3.js. Keeping only the core code.
Pick time of day for sports
A good looking ridgeline plot by Andrew Mollica showing the umber of participants for a few sports throughout the day.
Ridge line or Joy plot
An implementation by Mike Bostock.
Use d3.v5. It is an observable notebooks -> even better.
The most basic sankey diagram you can do in d3.js. Keeping only the core
Input data format: Json
Energy production flow
UK energy production and consumption in 2050: energy supplies are on the left, and demands are on the right
Update X axis limits
A button control the X axis upper limit and trigger a smooth transition to the new limit
Initial radar chart function
Alvaro Graves was the first building a function for radar
Click to visit the github repo and find a few examples.
Radar Chart Redesign
Nadieh Bremer revisited the previous chart with a more straightforward code and a different look.
Basic from long input
The most basic stacked area chart you can do in d3.js. Keeping only the
Input format:long (tidy)
Basic from wide input
Another basic stacked area chart made in d3.js.
Note that here the input format is wide (untidy): each group is provided in a specific column.
The most basic streamgraph you can do in d3.js. Keeping only the core
Input format: wide (untidy)
The most basic treemap you can do in d3.js. Only one level of a hierarchy
Input: csv format
Here a smoothing function is used to transformed the mirror histogram in a violin plot.
Variation: show steps
Here the curveStep function is used to interpolate values: it reveals the underlying histogram structure.
Violin with jitter
Half of the violin is removed to show the single observations. Jittering is used to avoid dots overlap.
Violin + boxplot
Implementation by Andrew Sielen, with button to understand how to custom each part of the char.
The most basic wordcloud you can do in d3.js. It calls the
d3-cloud plugin without any argument.
Input data: vector written in code
Apply basic customization to the wordcloud: color, angles, font, size and
Input data: vector written in code