All graphs

The react graph gallery displays hundreds of graphs made with React, often with the help of d3.js. This page provides an overview of all charts showcased in this gallery.

Note that all chart types are presented on the welcome page of the gallery. It is probably a more convenient way to browse this website if you know what you are looking for!

Useful links

Picture of an empty chart area with X and Y axes — **Scales and axes**
How to map your data in a 2d space, and how to draw the axes

Most basic scatterplot made with react and d3 — **Basic scatter plot**
Add circles to get a basic scatter plot

Scatterplot with tooltip made with react and d3 — **Add tooltip**
Get more details about each datapoint by adding a tooltip on hover

Scatterplot with hover effect made with react and d3 — **Add a hover effect**
Highlight a specific group on hover

Real life example of a scatterplot made with react and d3 — **Real life use-case**
Reproduction of a data wrapper chart representing countries CO2 data

Picture of a boxplot with jitter built using react and d3.js — **Boxplot with jitter**
Add individual data points using jitter on top of the boxplot

Picture of a simple bubble plot with a legend made with react and d3.js — **Bubble plot**
Learn how to build a bubble plot with react and d3.js

Picture of a simple histogram made with react and d3.js — **Histogram**
Learn how to build a histogram with react and d3.js

GIF of a histogram with animated data transition — **Histogram dataset transition**
How to animate the transition between datasets

gif of a violin plot smoothly transitioning to a boxplot using shape morphism — **Violin to Boxplot transition**
Using shape morphism to smoothly transition from a boxplot to a violin and reverse

Picture of a simple heatmap made with react and d3.js — **Basic heatmap**
Most basic heatmap

Picture of a heatmap with a tooltip that appears on hover — **Heatmap with tooltip**
Learn how to add a tooltip to a heatmap with react

Picture of a continuous color scale built with d3.js — **Continuous color scale**
How to add a color legend to your chart that uses a continuous color scale

Picture of a heatmap showing the effect of vaccination, built with react and d3 — **Vaccination heatmap**
Reproduction of a famous vaccination heatmap using d3 and react

GIF showing a violin plot with varying bucket size — **Bucket size effect**
Interactive example showing the bucket size effect on a violin chart

Picture of a correlogram built with react and d3 — **Basic correlogram**
Learn how to build a correlogram with react and d3

Picture of a violin shape built with react and d3 — **Violin shape**
How to build the shape of a violin with SVG

GIF showing a mirror transition between a boxplot and a violin plot — **Boxplot to Violin plot**
Interactive example showing the difference between a boxplot and a violin

Picture of a horizontal barplot made with React and d3 — **Basic barplot**
Most basic barplot built with React and d3

Picture of a basic violin chart built in react — **Basic violin plot**
Learn how to build a basic violin chart with d3 and react

Picture of a violin plot with variable bucket size — **Violin with variable bucket size**
A violin plot with a slider to change the bucket size in use

Picture of a box component, allowing to build a boxplot later on — **Boxplot shape**
How to build a boxplot shape in SVG

Picture of a basic boxplot built with react and d3 — **Basic boxplot**
How to build a basic boxplot with react

Picture of a histogram with small multiple built with react and d3.js — **Small multiple**
Create one panel per group to show its distribution separately

Picture of a histogram with multiple groups built with react and d3.js — **Multiple groups**
A histogram with <b>multiple</b> groups displayed on the same axis.

Picture of a basic density plot built with React and d3 — **Basic density plot**
Most basic density plot built with React and d3

Picture of a density plot with multiple groups — **Density plot with multiple groups**
How to add several groups on the same density plot

Picture of a basic ridgeline chart built with react and d3 — **Basic ridgeline chart**
Most basic version of a ridgeline plot

GIF of a data update on a React barplot — **Barplot dataset transition**
How to smoothly animate the transition between dataset

GIF of a scatterplot with hover effect — **Scatterplot Hover effect**
How to add a hover effect to highlight a group on a scatterplot

GIF of a bubble plot smoothly transitioning data — **Bubble plot data set transition**
How to smoothly animate the transition between dataset

Picture of a stacked barchart made with react and d3 — **Horizontal Stacked Barplot**
Represent group and subgroup values by stacking the data

Picture of a vertical stacked barchart made with react and d3 — **Vertical Stacked Barplot**
Represent group and subgroup values by stacking the data

Correlation

Scatterplot

Heatmap

Correlogram

Bubble

Connected Scatter

2D Density

Contact

👋 Hey, I'm Yan and I'm currently working on this project!

Feedback is welcome ❤️. You can fill an issue on Github, drop me a message on Twitter, or even send me an email pasting yan.holtz.data with gmail.com. You can also subscribe to the newsletter to know when I publish more content!

About | License