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!
Scales and axes
How to map your data in a 2d space, and how to draw the axes
Basic scatter plot
Add circles to get a basic scatter plot
Add tooltip
Get more details about each datapoint by adding a tooltip on hover
Add a hover effect
Highlight a specific group on hover
Real life use-case
Reproduction of a data wrapper chart representing countries CO2 data
Boxplot with jitter
Add individual data points using jitter on top of the boxplot
Bubble plot
Learn how to build a bubble plot with react and d3.js
Histogram
Learn how to build a histogram with react and d3.js
Histogram dataset transition
How to animate the transition between datasets
Violin to Boxplot transition
Using shape morphism to smoothly transition from a boxplot to a violin and reverse
Basic heatmap
Most basic heatmap
Heatmap with tooltip
Learn how to add a tooltip to a heatmap with react
Continuous color scale
How to add a color legend to your chart that uses a continuous color scale
Vaccination heatmap
Reproduction of a famous vaccination heatmap using d3 and react
Bucket size effect
Interactive example showing the bucket size effect on a violin chart
Basic correlogram
Learn how to build a correlogram with react and d3
Violin shape
How to build the shape of a violin with SVG
Boxplot to Violin plot
Interactive example showing the difference between a boxplot and a violin
Basic barplot
Most basic barplot built with React and d3
Basic violin plot
Learn how to build a basic violin chart with d3 and react
Violin with variable bucket size
A violin plot with a slider to change the bucket size in use
Boxplot shape
How to build a boxplot shape in SVG
Basic boxplot
How to build a basic boxplot with react
Small multiple
Create one panel per group to show its distribution separately
Multiple groups
A histogram with <b>multiple</b> groups displayed on the same axis.
Basic density plot
Most basic density plot built with React and d3
Density plot with multiple groups
How to add several groups on the same density plot
Basic ridgeline chart
Most basic version of a ridgeline plot
Barplot dataset transition
How to smoothly animate the transition between dataset
Scatterplot Hover effect
How to add a hover effect to highlight a group on a scatterplot
Bubble plot data set transition
How to smoothly animate the transition between dataset
Horizontal Stacked Barplot
Represent group and subgroup values by stacking the data
Vertical Stacked Barplot
Represent group and subgroup values by stacking the data
👋 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!