Build charts for the web


Have you ever wanted to create your own chart?

Based on hundreds (not yet) of graph examples, this gallery guides you through the basic concepts of data visualization with React and D3.js. It also provides ready-to-use templates to get started quicker.

Stop using pre-made dataviz components → imagination will become the only boundary to your creativity.

The gallery is organized by chart types following the data-to-viz classification. ↓

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

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

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 DataArt2 chart.

All charts

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

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. Last but not least, subscribe below to know when I publish more content!