Skip to content
Peter Kerpedjiev edited this page Oct 11, 2015 · 1010 revisions

WikiGallery

Welcome to the D3 gallery! More examples are available on bl.ocks.org/mbostock. If you want to share an example and don't have your own hosting, consider using Gist and bl.ocks.org. If you want to share or view live examples try runnable.com or vida.io.

Visual Index

<tr valign="top">
    <td>Sankey Creator<br><a href="http://infocaptor.com/sankey-diagram-software.php" title="Sankey Visualization Builder"><img width="133" src="http://infocaptor.com/img/sankey_infocaptor.gif"></a></td>
    
    <td>Convert any page into bubbles<br><a href="http://www.infocaptor.com/bubble-my-page"><img width="133" src="http://www.infocaptor.com/wikipedia_visualization.png"></a></td>

    <td>D3 Builder<br><a href="https://my.infocaptor.com/free_data_visualization.php"><img width="133" src="http://www.infocaptor.com/dashboard/wp-content/uploads/2014/10/image-358.jpg"></a></td>

</tr>


<tr valign="top">
    <td>Political Influence<br><a href="http://www.brightpointinc.com/interactive/political_influence/index.html?source=d3js" title="political influence d3.js"><img width="133" src="http://www.brightpointinc.com/interactive/images/PoliticalInfluence_202px.png"></a></td>
    <td>Federal Budget<br><a href="http://www.brightpointinc.com/interactive/budget/index.html?source=d3js" title="federal budget d3.js"><img width="133" src="http://www.brightpointinc.com/interactive/images/Budget_202px.png"></a></td>
    <td>US Trade Deficit<br><a href="http://www.brightpointinc.com/interactive/ustrade/index.html?source=d3js" title="US Trade Deficit d3.js"><img width="133" src="http://www.brightpointinc.com/interactive/images/Deficit_202px.png"></a></td>
    <td>Sequences sunburst<br><a href="http://bl.ocks.org/kerryrodden/7090426"><img width="133" src="https://gist.githubusercontent.com/kerryrodden/7090426/raw/66e9ce05ea907b3cb6b753cacc61aba45a78e21f/thumbnail.gif"></a></td>
</tr>
<tr valign="top">
    <td>D3 Mobile Application<br><a href="http://www.brightpointinc.com/d3-mobile-web-application/?source=d3js" title="D3 Mobile Application"><img width="133" src="http://www.brightpointinc.com/interactive/images/D3_Mobile_202x202.png"></a></td>
    <td>Radial Progress Component<br><a href="http://www.brightpointinc.com/clients/brightpointinc.com/library/radialProgress/index.html?source=d3js" title="radial progress component d3.js"><img width="133" src="http://www.brightpointinc.com/clients/brightpointinc.com/library/radialProgress/image.gif"></a></td>
    <td>Autocomplete Component<br><a href="http://www.brightpointinc.com/clients/brightpointinc.com/library/autocomplete/index.html?source=d3js" title="autocomplete component d3.js"><img width="133" src="http://www.brightpointinc.com/clients/brightpointinc.com/library/autocomplete/image.gif"></a></td>
    <td>Koalas to the Max<br><a href="http://www.koalastothemax.com/"><img width="133" src="http://d3js.org/ex/koalas.png"></a></td>
</tr>
<tr valign="top">
    <td>Particles<br><a href="http://bl.ocks.org/mbostock/1062544"><img width="133" src="http://d3js.org/ex/particles.png"></a></td>
    <td>Indented Tree<br><a href="http://bl.ocks.org/mbostock/1093025"><img width="133" src="http://d3js.org/ex/indented-tree.png"></a></td>
    <td>Rounded Rect<br><a href="http://bl.ocks.org/mbostock/1123639"><img width="133" src="http://d3js.org/ex/rounded-rect.png"></a></td>
    <td>Tadpoles<br><a href="http://bl.ocks.org/mbostock/1136236"><img width="133" src="http://d3js.org/ex/sperm.png"></a></td>
</tr>
<tr valign="top">
    <td>Showreel<br><a href="http://bl.ocks.org/mbostock/1256572"><img width="133" src="http://d3js.org/ex/show-reel.png"></a></td>
    <td>Euro Debt<br><a href="http://bl.ocks.org/mbostock/1308257"><img width="133" src="http://d3js.org/ex/debt.png"></a></td>
    <td>Labeled Force Layout<br><a href="http://bl.ocks.org/mbostock/1377729"><img width="133" src="http://d3js.org/ex/force-labels.png"></a></td>
    <td>Circle-Square Illusion<br><a href="http://bl.ocks.org/mbostock/1386444"><img width="133" src="http://d3js.org/ex/illusion.png"></a></td>
</tr>
<tr valign="top">
    <td>Voronoi Picking<br><a href="http://bl.ocks.org/mbostock/1405439"><img width="133" src="http://d3js.org/ex/voronoi-picker.png"></a></td>
    <td>Zoomable Map<br><a href="http://bl.ocks.org/mbostock/2206590"><img width="133" src="http://d3js.org/ex/map-zoom.png"></a></td>
    <td>Raindrops<br><a href="http://bl.ocks.org/mbostock/849853"><img width="133" src="http://d3js.org/ex/rain.png"></a></td>
    <td>Color<br><a href="http://color.method.ac/"><img width="133" src="http://d3js.org/ex/color.png"></a></td>
</tr>
<tr valign="top">
    <td>Hacker News Popularity<br><a href="http://hn.metamx.com/"><img width="133" src="http://d3js.org/ex/hn.png"></a></td>
    <td>Life Expectancy<br><a href="http://projects.flowingdata.com/life-expectancy/"><img width="133" src="http://d3js.org/ex/world.png"></a></td>
    <td>Slopegraphs<br><a href="http://skedasis.com/d3/slopegraph/"><img width="133" src="http://d3js.org/ex/slope.png"></a></td>
    <td>Parallel Coordinates<br><a href="http://exposedata.com/parallel/"><img width="133" src="http://d3js.org/ex/nutrient.png"></a></td>
</tr>
<tr valign="top">
    <td>NCAA Predictions<br><a href="http://thepowerrank.com/visual/NCAA_Tournament_Predictions"><img width="133" src="http://d3js.org/ex/ncaa.png"></a></td>
    <td>Cubism.js<br><a href="http://square.github.com/cubism/"><img width="133" src="http://d3js.org/ex/cubism.png"></a></td>
    <td>Crossfilter.js<br><a href="http://square.github.com/crossfilter/"><img width="133" src="http://d3js.org/ex/crossfilter.png"></a></td>
    <td>Wind History<br><a href="http://windhistory.com/"><img width="133" src="http://d3js.org/ex/windhistory.png"></a></td>
</tr>
<tr valign="top">
    <td>Cubic Hamiltonian Graphs<br><a href="http://www.christophermanning.org/projects/building-cubic-hamiltonian-graphs-from-lcf-notation/"><img width="133" src="http://d3js.org/ex/lcf.png"></a></td>
    <td>Force-Directed Voronoi<br><a href="http://www.christophermanning.org/projects/voronoi-diagram-with-force-directed-nodes-and-delaunay-links/"><img width="133" src="http://d3js.org/ex/force-voronoi.png"></a></td>
    <td>Trulia Trends<br><a href="http://www.trulia.com/blog/trends/house-hunter-by-day-not-so-much-after-midnight/"><img width="133" src="http://d3js.org/ex/house-heatmap.png"></a></td>
    <td>Trulia Trends<br><a href="http://www.trulia.com/blog/trends/where-are-house-hunters-searching/"><img width="133" src="http://d3js.org/ex/house-map.png"></a></td>
</tr>
<tr valign="top">
    <td>Open Budget<br><a href="http://marcinignac.com/projects/open-budget/"><img width="133" src="http://d3js.org/ex/open-budget.png"></a></td>
    <td>Bederson Publications<br><a href="http://www.cs.umd.edu/~bederson/papers/index.html"><img width="133" src="http://d3js.org/ex/bederson-pubs.png"></a></td>
    <td>Force Layout Editor<br><a href="http://bl.ocks.org/benzguo/4370043"><img width="133" src="http://bl.ocks.org/benzguo/raw/4362310/thumbnail.png"></a></td>
    <td>Open Knowledge Festival<br><a href="http://www.floapps.com/cases/open-knowledge-festival/"><img width="133" src="http://floapps.com/lab/misc/oklogo/ok.png"></a></td>
</tr>
<tr valign="top">
    <td>Hierarchical Classification Tree<br><a href="http://www.bitjuice.com.au/research/#hierarchicalclassificationexample"><img width="133" src="http://www.bitjuice.com.au/wp-content/uploads/2013/08/hierarchical_visualisation_example.png"></a></td>
    <td>Gene Expression<br><a href="http://sulab.org/2013/02/data-chart-plugin-beta/"><img width="133" src="http://sulab.org/wordpress/wp-content/uploads/2013/02/data_chart_icon_2.jpg"></a></td>
    <td>spacetime<br><a href="http://bl.ocks.org/clayzermk1/9142407"><img width="133" src="https://gist.githubusercontent.com/clayzermk1/9142407/raw/thumbnail.png"></a></td>
    <td>d3 Analog Clock Dashboard<br><a href="http://www.infocaptor.com/dashboard/d3-javascript-visualization-to-build-world-analog-clocks"><img width="133" src="http://www.infocaptor.com/dashboard/wp-content/uploads/2013/02/image-217-small.jpg"></a></td>
</tr>
<tr valign="top">
    <td>Concept network browser<br/><a href="http://www.findtheconversation.com/concept-map"><img width="133" src="http://www.findtheconversation.com/concept-map-d3-wiki.png"></a></td>
    <td>Circular heat chart<br><a href="http://prcweb.co.uk/circularheatchart"><img width="133" src="http://prcweb.co.uk/img/ext/circularheat.jpg"></a></td>
    <td>Convert any page into bubbles<br><a href="http://www.infocaptor.com/bubble-my-page"><img width="133" src="http://www.infocaptor.com/wikipedia_visualization.png"></a></td>
    <td>Directed Graph Editor<br><a href="http://bl.ocks.org/rkirsling/5001347"><img width="133" src="http://bl.ocks.org/rkirsling/raw/5001347/thumbnail.png"></a></td>
</tr>
<tr valign="top">
    <td>Weeknd3<br><a href="http://ggruiz.me/weeknd3/"><img width="133" src="http://puu.sh/2bWtl"></a></td>
    <td>Explosions<br><a href="http://ggruiz.me/explosions/"><img width="133" src="http://puu.sh/2fO3P"></a></td>
    <td>CodeFlowers<br><a href="http://redotheweb.com/CodeFlower/"><img width="133" src="http://redotheweb.com/images/codeflower/codeflower.png"></a></td>
    <td>Animated wind chart<br><a href="http://charts.animateddata.co.uk/ukwind/"><img width="133" src="http://animateddata.co.uk/img/ext/d3-ukwind.jpg"></a></td>
</tr>
<tr valign="top">
    <td>Gaussian curve from random variable<br /><a href="http://plnkr.co/GOH3XH" target="_blank"><img width="133" src="https://raw.githubusercontent.com/samyBadjoudj/gaussian-function/master/gaussian_function_d3.png"></a></td>
</tr>
<tr>
  <td>UK Economy as a Network<br /><a href="http://helenjacksonanalytic.co.uk/UKEconomyNetwork.html" target="_blank"><img width="133" src="http://helenjacksonanalytic.co.uk/EconomyNetwork.jpg"></a></td>
  <td>Contouring Comparison<br><br><a href="http://emptypipes.org/2015/07/22/contour-comparison/"><img width="133" align="center" src="http://emptypipes.org/img/contouring_comparison2.png"></a></td>
  <td>Force Directed Graph with search and subset view<br><a href="https://timebandit.github.io/graphSub/"><img src="http://i.picresize.com/images/2015/08/08/7W3ti.gif" data-canonical-src="http://i.picresize.com/images/2015/08/08/7W3ti.gif" width="133"></a></td>
    <td>A circular flow diagram (Sankey meets Chord diagram)<br /><a href="http://www.visualcinnamon.com/2015/08/stretched-chord.html" target="_blank"><img width="133" src="https://github.com/nbremer/thumbnails/blob/master/Stretched%20Chord%20Flow%20chart.png"></a></td>
</tr>
<tr>
     <td>Re-usable Sankey<br /><a href="http://bl.ocks.org/wvengen/cab9b01816490edb7083"><img width="133" src="https://gist.githubusercontent.com/wvengen/cab9b01816490edb7083/raw/7a859fd466a12754c731ba5dce41f25aed89547e/gallery_icon.png"></a></td>
     <td>Compare Results with Waterfall Charts
         <a href="http://uo-lca.github.io/dist/#/home/fragment-lcia"><img width="133"       src="https://github.com/binaworks/binaworks.github.io/blob/master/images/GalleryWaterfalls.png"></a>
     </td>
     <td>Small Multiple Circle Packing</br>
         <a href="http://visualcinnamon.com/occupations" target="_blank"><img width="133"       src="https://raw.githubusercontent.com/nbremer/thumbnails/master/Small%20Multiple%20Packing.png"></a></td>
Box Plots
Bubble Chart
Bullet Charts
Calendar View
Non-contiguous Cartogram
Chord Diagram
Dendrogram
Force-Directed Graph
Circle Packing
Population Pyramid
Stacked Bars
Streamgraph
Sunburst
Node-Link Tree
Treemap
Voronoi Diagram
Hierarchical Edge Bundling
Voronoi Diagram
Symbol Map
Parallel Coordinates
Scatterplot Matrix
Zoomable Pack Layout
Hierarchical Bars
Epicyclical Gears
Collision Detection
Collapsible Force Layout
Force-Directed States
Azimuthal Projections
Choropleth
Collapsible Tree Layout
Zoomable Treemap
Zoomable Partition Layout
Zoomable Area Chart
Drag and Drop Collapsible Tree Layout
Rotating Cluster Layout
Sankey Diagram
Fisheye Distortion
Hive Plot
Co-occurrence Matrix
Motion Chart
Chord Diagram
Animated Béziers
Zoomable Sunburst
Collatz Graph
Parallel Sets
Word Cloud
Obama's Budget Proposal
Facebook IPO
What makes us happy?
Simple SOM Animation
A mower demo
Map and context with brushing
Binary tree with transitions
D3 JezzBall
Tetris
Gantt Chart
Day/Hour Heatmap
Sunburst and parse.com
Worldwide remittance flows
Language Network
Wimbledon 2013
Force directed tag/site explorer
-
Airline data from Fusion Tables
Geographical hexbins
xkcd-style Comic Narrative Charts
GitHub Visualizer
WorldBank Contract Awards
Site or blog concept browser
Global power structure
Choropleth on canvas
Google calendar like visualization
Interactive Sales Data Pie Chart
Wikistalker - Wikipedia Visualization
D3 Cesium - Health and Wealth of Nations
Starpaths
Kent + Sussex river levels mapped
CoreNLP Sentence Parse Tree
Publications in journals over time
Another state budget visualization with open api
Interactive Bible contradictions & bar charts [source]
Force Edge Bundling For Graphs
[Source & Docs]
Gauge
Bullet Charts
Arc Axis
Bar chart with tooltips
Tokyo Wind Map
Dependency Wheel
60 years of french first names
Hip Replacement by State
Compare time series with irregular interval
Table with Embedded Line Chart
Dual-scale Bar Chart
Animated Pie and Line Chart
Multivariate Data Exploration with Scatterplots
Live Power Outages In Maine
Relative Size Of The Planets
AWS EC2 Price Comparison Chart
-
-
Reusable VIS Components(responsive)
Epidemic Game UK Temperature Graphs
Data Heatmap with Sorting Functions
Node-Link Tree Showing Branches of Government
3D Force Layout
Lifespan
Choropleth word map
word of the day
The Movie Network
Bowls with Liquid
BiPartite Visualization
BeerViz
Graceful Tree Conjecture
Top Scorers in 2013/14 Champions League - Breakdown analysis
Sankey: How a Georgia bill becomes law
A game based on d3
Viroscope - virus taxonomy viewer
Twitter & Reddit topics during week one of MH-370's disappearance
-
SizeViewer
OrgoShmorgo
Fund Visualization
Zoomable sunburst with updating data
US State Map
Simple Dashboard
Density and Quantile Graphs
Visualizing MBTA Data
Sum of First n Numbers
Animated Historical Weather Maps
Visualizing Walking with Smartphone Accelerometers
Cycloid Optical Illusion
Alternative Calendar View
US Choropleth Plus Bar Chart
Aster Plot
Smallest Convex Polygon
Shooter
Sunburst for your skill map
Network of soccer passes
Choropleth with svg filter
Psychedelic British Isles
Stock Leaders Bubble Chart
Interactive Unit Circle (Trigonometry)
Days-Hours Heatmap
Trend Chart (Area + Line)
Create D3 Visualizations
-
Simple bar chart with lede & nut graf layout
Node Focusable Tree
Tarot Card App made with D3 + Meteor framework
Ulam Spiral
Animated Chord Diagram
SOM Hexagonal Heatmap
Dataviz tree
UK Temperature 1910-2014
Simple Bubble Chart
Collapsible 2-Way Tree Layout
Animated Pie
Exoplanets in Orbit
Worldcup'14 Drag & Drop Brackets
A Scatterplot as Bar chart
Conway's Game of Life
Editable tree mixing d3 & Angular
SFDC Training Videos
Editable Sankey with self-loops
England & Wales house price animation
Bi-directional Zoom and Drag D3 dependency tree
Interactive Force Directed Graph
Selectable / Zoomable / Centerable Force Directed Graph
F1 Timeline
Geocenter of F1 venues
Access Quandl aggregator
Religions in Romania on colorwheels
Sunburst bilevel partition with tooltips
Russian Budget: 1937 to 1950
Liquid Fill Gauge
Interactive Bubble Menu
Global center of higher education: university rankings
Linked Geographic and Tree Maps
Bi-directional Hierarchical Sankey
2 Interactive Colorwheels + Zoomable World Map
Radial Boxplot
Pazzla: Mosaics of Instagram Pictures
Pazzla: Mosaics of Instagram Pictures
Community Pop-Culture References Heatmap
Community Pop-Culture References Heatmap
Top baby names bump chart
Real time electric consumption in Spain
Electric consumption in Spain - latest 24h
Zoomable Unilevel Partition
Apps Script dependency analysis
Editable Tree
Automated Biography of a Nation
Star Wars Character Profiles
Global Refugee Flows - 2 Dynamic Chord Diagrams
Ontology Visualization

Vertical Sankey

Visualizing a genetic algorithm Create D3 Visualizations
Rectangular Area Chart
Nested Layouts

Basic Charts

Area Chart
Line Chart
Bivariate Area Chart
Multi-Series Line Chart
Stacked Area Chart
Bar Chart
Stacked Bar Chart
Normalized Stacked Bar Chart
Grouped Bar Chart
Scatterplot
Donut Chart
Pie Chart
Donut Multiples
Bar Chart with Negative Values
Animated Donut Chart with Labels
Stacked Bar Charts on time scale
Bar Chart Multiples
d3pie - pie chart generator and lib
3D Donut
Gradient Pie
100% Stacked Bars
Interactive Scatterplot
Interactive Multi-Metric Bars
United States Map with Mapbox Tiles
Waterfall Chart
Diverging Stacked Bar Chart
Timeseries

Techniques, Interaction & Animation

General Update Pattern
Sortable Bar Chart
van Wijk Smooth Zooming
Progress Events
Margin Convention
Focus+Context via Brushing
Difference Chart
Pie Chart Update
Hexagonal Binning
Contour Plot
Build Your Own Graph
Modifying a Force Layout
Spline Interpolation
Dispatching Events
Better force layout selection
v45 web theme using SVG
Interactive force layout
EventDrops: Zoomable time series
Draggable scatterplot with motion trails
Horizontally grouped bar chart

Maps

US States
US States with Dropdown Selector
World
US States - Choropleth Bar
US States Map - Side by Side

Examples

Collections

The New York Times visualizations

Jerome Cukier

http://www.jeromecukier.net/projects/models/models.html

Jason Davies

http://www.jasondavies.com/

Jim Vallandingham

http://vallandingham.me/vis/

Institute for Health Metrics and Evaluation

http://www.healthmetricsandevaluation.org/tools/data-visualizations

Peter Cook

Charts and Chart Components

Bar Chart

Histogram

Line and Area Chart

Pie Chart

Scatterplot and Bubble chart

Parallel Coordinates, Parallel sets and Sankey

Sunburst and Partition layout

Force Layout

Tree

Misc Trees and Graphs

Chord Layout (Circular Network)

Maps

Misc Charts

Miscellaneous visualizations

Charts using the reusable API

Useful snippets

Tools

Interoperability

Online Editors

Products

Store Apps

Libraries

Games

Wish List

  • arc diagram
  • gantt, other timelines and timing diagram
  • fibonacci scale
  • data table (maybe the airline table at the bottom of the crossfilter example?)
  • hypergraph
Clone this wiki locally