All graphs
![Dataviz logo representing a DataArt2 chart.](/section/DataArt2150.png)
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!
![Picture of an empty chart area with X and Y axes](/chart/axis-basic-demo.png)
Scales and axes
How to map your data in a 2d space, and how to draw the axes
![GIF of a scatterplot with hover effect](/chart/scatterplotHoverEffect.gif)
Scatterplot Hover effect
How to add a hover effect to highlight a group on a scatterplot
![Most basic scatterplot made with react and d3](/chart/scatterplot-most-basic.png)
Basic scatter plot
Add circles to get a basic scatter plot
![Scatterplot with tooltip made with react and d3](/chart/scatterplot-tooltip.png)
Add tooltip
Get more details about each datapoint by adding a tooltip on hover
![Scatterplot with hover effect made with react and d3](/chart/scatterplot-hover-effect.png)
Add a hover effect
Highlight a specific group on hover
![Real life example of a scatterplot made with react and d3](/chart/scatterplot-co2.png)
Real life use-case
Reproduction of a data wrapper chart representing countries CO2 data
![gif of a scatterplot with voronoi diagram for closest point detection](/chart/scatterplot-tooltip-with-voronoi-for-closest-point-detection.gif)
Closest point detection with Voronoi
Using a voronoi diagram in the scatterplot background is a smart way to efficiently find the mouse closest point
![a scatterplot made with react and rendered in canvas](/chart/scatterplot-basic-canvas.png)
Scatterplot in Canvas
Learn how to render a scatterplot in canvas to improve performances
![Picture of a simple heatmap made with react and d3.js](/chart/heatmapBasic.png)
Basic heatmap
Most basic heatmap
![Picture of a heatmap with a tooltip that appears on hover](/chart/heatmapTooltip.png)
Heatmap with tooltip
Learn how to add a tooltip to a heatmap with react
![Picture of a continuous color scale built with d3.js](/chart/continuousColorLegend.png)
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](/chart/heatmapVaccination.png)
Vaccination heatmap
Reproduction of a famous vaccination heatmap using d3 and react
![Picture of a correlogram built with react and d3](/chart/correlogramBasic.png)
Basic correlogram
Learn how to build a correlogram with react and d3
![Picture of a simple bubble plot with a legend made with react and d3.js](/chart/bubble-plot-with-legend.png)
Bubble plot
Learn how to build a bubble plot with react and d3.js
![GIF of a bubble plot smoothly transitioning data](/chart/bubble-plot-dataset-transition.gif)
Bubble plot data set transition
How to smoothly animate the transition between dataset
![Picture of a hexbin chart made with React and d3.js](/chart/2d-density-plot.png)
Hexbin chart
A hexbin chart split the figure in hexagons to show a 2d density
![Picture of a connected scatter plot made with React and d3.js](/chart/connected-scatterplot-basic.png)
Simple connected scatterplot
A very simple connected scatter plot showing the evolution of 1 numeric variable
![gif of a violin plot smoothly transitioning to a boxplot using shape morphism](/chart/violinBoxplotTransition.png)
Violin to Boxplot transition
Using shape morphism to smoothly transition from a boxplot to a violin and reverse
![GIF showing a violin plot with varying bucket size](/chart/violin-bucket-size-effect.gif)
Bucket size effect
Interactive example showing the bucket size effect on a violin chart
![Picture of a violin shape built with react and d3](/chart/violinShape.png)
Violin shape
How to build the shape of a violin with SVG
![GIF showing a mirror transition between a boxplot and a violin plot](/chart/boxplot-violin-transition.gif)
Boxplot to Violin plot
Interactive example showing the difference between a boxplot and a violin
![Picture of a basic violin chart built in react](/chart/violinBasic.png)
Basic violin plot
Learn how to build a basic violin chart with d3 and react
![Picture of a violin plot with variable bucket size](/chart/violinBucketSize.png)
Violin with variable bucket size
A violin plot with a slider to change the bucket size in use
![Picture of a basic density plot built with React and d3](/chart/densityBasic.png)
Basic density plot
Most basic density plot built with React and d3
![Picture of a density plot with multiple groups](/chart/densityMultipleGroups.png)
Density plot with multiple groups
How to add several groups on the same density plot
![Picture of a simple histogram made with react and d3.js](/chart/histogram-basic.png)
Histogram
Learn how to build a histogram with react and d3.js
![GIF of a histogram with animated data transition](/chart/histogram-dataset-transition.gif)
Histogram dataset transition
How to animate the transition between datasets
![picture of a mirror histogram made with react and d3.js](/chart/histogram-mirror.png)
Mirror histogram
Create a mirror histogram to compare the distribution of 2 groups in a dataset
![Picture of a histogram with small multiple built with react and d3.js](/chart/histogram-small-multiple.png)
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](/chart/histogram-with-several-groups.png)
Multiple groups
A histogram with <b>multiple</b> groups displayed on the same axis.
![Picture of a boxplot with jitter built using react and d3.js](/chart/boxplot-jitter.png)
Boxplot with jitter
Add individual data points using jitter on top of the boxplot
![Picture of a box component, allowing to build a boxplot later on](/chart/boxplotShape.png)
Boxplot shape
How to build a boxplot shape in SVG
![Picture of a basic boxplot built with react and d3](/chart/boxplotBasic.png)
Basic boxplot
How to build a basic boxplot with react
![Picture of a horizontal boxplot built with react and d3](/chart/boxplot-horizontal.png)
Horizontal boxplot
How to build a horizontal boxplot with react
![Picture of a basic ridgeline chart built with react and d3](/chart/ridgelineBasic.png)
Basic ridgeline chart
Most basic version of a ridgeline plot
![Picture of a horizontal barplot made with React and d3](/chart/barplot-basic.png)
Basic barplot
Most basic barplot built with React and d3
![GIF of a data update on a React barplot](/chart/barplotDatasetAnimation.gif)
Barplot dataset transition
How to smoothly animate the transition between dataset
![Picture of a stacked barchart made with react and d3](/chart/barplot-stacked-horizontal.png)
Horizontal Stacked Barplot
Represent group and subgroup values by stacking the data
![Picture of a vertical stacked barchart made with react and d3](/chart/barplot-stacked-vertical.png)
Vertical Stacked Barplot
Represent group and subgroup values by stacking the data
![Picture of a very simple lollipop chart](/chart/lollipop-plot-basic.png)
Most basic lollipop plot
Learn how to build a very simple lollipop chart with React and D3.js
![Picture of a very simple dumbbell chart](/chart/lollipop-plot-dumbbell.png)
Most basic dumbbell plot
Learn how to build a very simple dumbbell chart with React and D3.js
![Picture of a lollipop chart with hover effect](/chart/lollipop-plot-hover-effect.png)
Lollipop with hover effect
Learn how to add a hover effect to your lollipop chart
![Picture of a lollipop with buttons and animated transition](/chart/lollipop-plot-animation.png)
Animation between dataset
Learn how to build a smooth animated transition between 2 datasets
![Picture of the background grid of a radar chart](/chart/radar-chart-grid.png)
Most basic line chart
Learn how to build the background grid of a radar chart
![Picture of a very simple radar chart with 1 group only made with react and d3](/chart/radar-chart-1-group.png)
Most basic radar chart
The most basic radar chart one can make using d3 and react
![Picture of a radar chart made with react and d3, with several groups displayed on the figure.](/chart/radar-chart-several-group.png)
Multi-group radar chart
Radar chart with several groups displayed
![GIF of a radar chart, a line chart and a lollipop that animate between dataset](/chart/radar-chart-animation.png)
Radar chart, line chart an lollipop with animated transition
Three charts connected to same buttons, with smooth, synchronized animation when a button is clicked
![Picture of a very simple line chart made with react and d3](/chart/line-chart-basic.png)
Most basic line chart
The most basic line chart one can make using d3 and react
![GIF of a line chart that animates between 2 dataset](/chart/line-chart-data-transition.gif)
Line chart with dataset transition
How to smoothly animate the transition between 2 dataset on a line chart
![line charts with synchronized cursors](/chart/line-chart-synced-cursor.gif)
Synchronized cursors
Add a cursor synchronized on all your charts
![Picture of a basic area chart made with React and D3](/chart/area-chart-basic.png)
Basic Area Chart
Most basic version of an area chart made with react and d3.js
![picture of a basic stacked area plot made with react](/chart/stacked-area-plot-basic.png)
Basis stacked area chart
Most basic version of a stacked area chart. Explains how to use the stack() function of d3.js
![Picture of a basic streamgraph made using Reacrt and d3.js](/chart/streamgraph-basic.png)
Basic Streamgraph
Most basic streamgraph one can build using d3 and react
![GIF of a streamgraph react component that supports hover effect](/chart/streamgraph-hover-effect.gif)
Streamgraph with hover effect
How to add a hover effect on a streamgraph to highlight a group
![GIF of a streamgraph](/chart/streamgraph-offset-type-transition.gif)
Offset and Smoothing transition
An interactive streamgraph example showing how to animate transition between the chart stacking features.
![GIF of a streamgraph with multiple interactive features](/chart/streamgraph-application.gif)
Streamgraph application
Streamgraph with a slider to zoom on a time stamp and with interactive inline legends
![Picture of a timeseries chart made with React and D3.js: scatterplot and line chart in use.](/chart/timeseries-moving-average.png)
Timeseries with moving average
A scatterplot used for timeseries, with the moving average shown as a line chart on top.
![Picture of a very basic circle packing chart](/chart/circle-pack-basic.png)
Most basic circular packing chart
The most basic circular packing chart one can make using d3.js and React.
![Picture of a very basic circle packing chart with 2 levels of hierarchy](/chart/circle-pack-2-levels.png)
Circular packing: 2 levels of hierarchy
A simple circular packing chart with 2 levels of hierarchy built with React and d3.
![Picture of a circle packing chart made using the d3-force plugin](/chart/circle-pack-d3-force.png)
Circle Pack with d3-force
Another approach to build a circle packing chart using physical forces to compute node positions.
![Picture of a vertical arc diagram](/chart/vertical-arc-diagram.png)
Vertical arc diagram
The vertical version of the arc diagram is more convenient to display labels
![Picture of a very simple network chart built with React and D3.js.](/chart/network-chart-basic.png)
Most basic network chart
Most basic network chart using the d3-force plugin to apply physical forces.
![Picture of a playground allowing to play with the various d3 forces](/chart/network-chart-force-playground.png)
Play with forces
A playground to discover the effect of the various forces you can apply to your particles
![Picture of a force directed network chart showing character co-occurence in les miserables](/chart/network-les-miserables.png)
Force directed graph
A force directed network chart showing character co-occurence in les miserables
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!