All graphs

Dataviz logo representing a DataArt2 chart.

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

GIF of a scatterplot with hover effect

Scatterplot Hover effect

How to add a hover effect to highlight a group on a scatterplot

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

gif of a scatterplot with voronoi diagram for closest point detection

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

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

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

Picture of a correlogram built with react and d3

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

Bubble plot

Learn how to build a bubble plot with react and d3.js

GIF of a bubble plot smoothly transitioning data

Bubble plot data set transition

How to smoothly animate the transition between dataset

Picture of a hexbin chart made with React and d3.js

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

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

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

Bucket size effect

Interactive example showing the bucket size effect on a violin chart

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 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 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 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

picture of a mirror histogram made with react and d3.js

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

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 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 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 horizontal boxplot built with react and d3

Horizontal boxplot

How to build a horizontal boxplot with react

Picture of a basic ridgeline chart built with react and d3

Basic ridgeline chart

Most basic version of a ridgeline plot

Picture of a horizontal barplot made with React and d3

Basic barplot

Most basic barplot built with React and d3

GIF of a data update on a React barplot

Barplot dataset 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

Picture of a very simple lollipop chart

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

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

Lollipop with hover effect

Learn how to add a hover effect to your lollipop chart

Picture of a lollipop with buttons and animated transition

Animation between dataset

Learn how to build a smooth animated transition between 2 datasets

Picture of the background grid of a radar chart

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

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.

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

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 simple treemap

Basic treemap

Most simple treemap, with 1 level of hierarchy only

Picture of a simple treemap with 2 levels of hierarchy

Treemap with 2 levels

Simple treemap with 2 levels of hierarchy

Picture of a simple treemap

Hover effect

Treemap with hover effect to highlight a group

Picture of the most basic donut chart

Basic Donut chart

Most simple donut chart. No annotation, static figure.

Picture of a simple donut chart with inline labels

Inline labels

Donut chart with inline labels and connection lines

GIF of a donut chart with a hover effect

Hover effect

Donut chart with hover effect to highlight a slice

GIF of a donut chart switching between 2 datasets

Data transition

How to smoothly transition dataset

GIF of a donut chart switching between to a barplot and reverse

Shape morphism

Transition between a barplot and a donut chart

Picture of the most basic pie chart

Basic Pie chart

Most simple pie chart. No annotation, static figure.

Picture of a simple pie chart with inline labels

Inline labels

pie chart with inline labels and connection lines

Picture of a very simple line chart made with react and d3

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

Line chart with dataset transition

How to smoothly animate the transition between 2 dataset on a line chart

line charts with synchronized cursors

Synchronized cursors

Add a cursor synchronized on all your charts

Picture of a basic area chart made with React and D3

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

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

Basic Streamgraph

Most basic streamgraph one can build using d3 and react

GIF of a streamgraph react component that supports hover effect

Streamgraph with hover effect

How to add a hover effect on a streamgraph to highlight a group

GIF of a streamgraph

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

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.

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

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

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

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

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.

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

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

Force directed graph

A force directed network chart showing character co-occurence in les miserables

Correlation

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!