The React Graph Gallery

React manipulates the DOM. So does D3.js. It's hard to make them work together. This website is a set of chart examples where d3 is used to compute the viz layout, and React is used for the rendering.

The React Graph Gallery project just started. It is massively work in progress, following some requests of the d3-graph-gallery users. Please consider it as my personal notes.

Distribution

Dataviz logo representing a Violin chart.

+

Violin

Dataviz logo representing a Density chart.

+

Density

Dataviz logo representing a Histogram chart.

+

Histogram

Dataviz logo representing a Box1 chart.

+

Boxplot

Dataviz logo representing a Joyplot chart.

+

Ridgeline

Correlation

Dataviz logo representing a ScatterPlot chart.

+

Scatterplot

Dataviz logo representing a Heatmap chart.

+

Heatmap

Dataviz logo representing a Correlogram chart.

+

Correlogram

Dataviz logo representing a BubblePlot chart.

+

Bubble

Dataviz logo representing a ScatterConnected chart.

+

Connected Scatter

Dataviz logo representing a 2dDensity chart.

+

2D Density

Ranking

Dataviz logo representing a Bar chart.

+

Barplot

Dataviz logo representing a Spider chart.

+

Spider / Radar

Dataviz logo representing a Wordcloud chart.

+

Wordcloud

Dataviz logo representing a Parallel1 chart.

+

Parallel

Dataviz logo representing a Lollipop chart.

+

Lollipop

Dataviz logo representing a CircularBarplot chart.

+

Circular Barplot

Part Of A Whole

Dataviz logo representing a Tree chart.

+

Treemap

Dataviz logo representing a Venn chart.

+

Venn Diagram

Dataviz logo representing a Doughnut chart.

+

Donut

Dataviz logo representing a Pie chart.

+

Pie Chart

Dataviz logo representing a Dendrogram chart.

+

Dendrogram

Dataviz logo representing a CircularPacking chart.

+

Circular Packing

Evolution

Dataviz logo representing a Line chart.

+

Line chart

Dataviz logo representing a Area chart.

+

Area chart

Dataviz logo representing a StackedArea chart.

+

Stacked Area

Dataviz logo representing a Stream chart.

+

Streamgraph

Dataviz logo representing a time chart.

+

Timeseries

Map

Dataviz logo representing a Map chart.

+

Map

Dataviz logo representing a Choropleth chart.

+

Choropleth

Dataviz logo representing a MapHexbin chart.

+

Hexbin

Dataviz logo representing a Cartogram chart.

+

Cartogram

Dataviz logo representing a ConnectedMap chart.

+

Connection

Dataviz logo representing a BubbleMap chart.

+

Bubble

Flow

Dataviz logo representing a Chord chart.

+

Chord Diagram

Dataviz logo representing a Network chart.

+

Network

Dataviz logo representing a Sankey chart.

+

Sankey

Dataviz logo representing a Arc chart.

+

Arc Diagram

Dataviz logo representing a Bundle chart.

+

Edge Bundling

General Knowledge

Dataviz logo representing a Colours chart.

Colors

Dataviz logo representing a Interactive chart.

Interactivity

Dataviz logo representing a anim chart.

Animation

Dataviz logo representing a Cheat chart.

Cheat sheets

Dataviz logo representing a Bad chart.

Caveats

Dataviz logo representing a 3d chart.

3D

Contact

👋 This document is a work by Yan Holtz. Any feedback is highly encouraged. You can fill an issue on Github, drop me a message on Twitter, or send an email pasting yan.holtz.data with gmail.com.

GithubTwitter