Gallery - intelligaia/d3 GitHub Wiki

Wiki ▸ Gallery

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>Koalas to the Max<br><a href="http://www.koalastothemax.com/"><img width="133" src="http://d3js.org/ex/koalas.png"></a></td>

    <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>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>Timeseries<br><a href="http://mlvl.github.io/timeseries/"><img width="133" src="http://mlvl.github.io/timeseries/images/timeseries-sm.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>3D Force Layout<br><a href="https://vida.io/documents/N4jSip7n68yQ48DXp"><img width="133" src="https://s3.amazonaws.com/vida-production/thumbnails/N4jSip7n68yQ48DXp"></a></td>
    <td>Lifespan<br><a href="http://www.cotrino.com/2014/02/lifespan-longevidad-animal/"><img width="133" src="https://raw.githubusercontent.com/cotrino/experimentos/master/lifespan.png"></a></td>
    <td>Choropleth word map<br><a href="http://www.ezglot.com/word-of-the-day.php"><img width="133" src="http://www.ezglot.com/hund-map.png" alt="word of the day"></a></td>
    <td>The Movie Network<br><a href="http://bl.ocks.org/paulovn/9686202"><img width="133" src="http://bl.ocks.org/paulovn/raw/9686202/thumbnail-s.png"></a></td>
</tr>
<tr valign="top">
    <td>Graceful Tree Conjecture<br><a href="http://bl.ocks.org/NPashaP/7683252"><img width="133" src="http://bl.ocks.org/NPashaP/raw/7683252/thumbnail.png"></a></td>
    <td>Top Scorers in 2013/14 Champions League - Breakdown analysis<br><a href="http://sunburst-demo.herokuapp.com/"><img width="133" src="https://scontent-b-fra.xx.fbcdn.net/hphotos-prn2/t1.0-9/1545571_10201953206206939_9214887947131857383_n.jpg"></a></td>
    <td>Sankey: How a Georgia bill becomes law<br><a href="http://greencracker.net/?p=1685"><img width="133" src="http://greencracker.net/wp-content/uploads/2013/12/sankey-experiment-one-updated.png"></a></td>
    <td>A game based on d3<br><a href="http://wenchaojiang.github.io/d3game/"><img width="133" src="http://wenchaojiang.github.io/d3game/ScreenShot.png"></a></td>
</tr>
<tr valign="top">
    <td>Viroscope - virus taxonomy viewer<br><a href="http://viroscope.info/"><img width="133" src="http://jon.es/other/viroscope.png"></a></td>
    <td>Twitter & Reddit topics during week one of MH-370's disappearance<br><a href="http://mlvl.github.io/Hierarchie"><img width="133" src="http://mlvl.github.io/Hierarchie/app/img/layer.png"></a></td>
    <td>-<br><a href="#"><img width="133" src="#"></a></td>
    <td>SizeViewer<br/><a href="https://d3.artzub.com/sv/"><img width="133" src="http://artzub.com/d3/sv/images/sv.gif"></a></td>
</tr>
<tr valign="top">
    <td> OrgoShmorgo<br><a href="http://orgo.stolarsky.com/"><img width="133" src="http://orgo.stolarsky.com/orgo.png"></a></td>
    <td> Fund Visualization<br><a href="http://fundvis-ywng.rhcloud.com/JPMProvident.html"><img width="133" src="https://camo.githubusercontent.com/24eefda4cbf1f88d278ab0b25a2d4989b48558ff/68747470733a2f2f7261772e6769746875622e636f6d2f79776e672f66756e647669732f6d61737465722f7363725f73686f742e706e67"></a></td>
    <td>Zoomable sunburst with updating data<br><a href="http://bl.ocks.org/kerryrodden/477c1bfb081b783f80ad"><img width="133" src="https://gist.githubusercontent.com/kerryrodden/477c1bfb081b783f80ad/raw/thumbnail.gif"></a></td>
    <td>US State Map<br><a href="http://bl.ocks.org/NPashaP/a74faf20b492ad377312"><img width="133" src="http://bl.ocks.org/NPashaP/raw/a74faf20b492ad377312/thumbnail.png"></a></td>
</tr>
<tr valign="top">
    <td>Simple Dashboard<br><a href="http://bl.ocks.org/NPashaP/96447623ef4d342ee09b"><img width="133" src="http://bl.ocks.org/NPashaP/raw/96447623ef4d342ee09b/thumbnail.png"></a></td>
    <td>Density and Quantile Graphs<br><a href="http://bl.ocks.org/NPashaP/113f7fea0751fa1513e1"><img width="133" src="http://bl.ocks.org/NPashaP/raw/113f7fea0751fa1513e1/thumbnail.png"></a></td>
    <td>Visualizing MBTA Data<br><a href="http://mbtaviz.github.io"><img width="133" src="http://mbtaviz.github.io/media/preview.png"></a></td>
    <td>Sum of First n Numbers<br><a href="http://bl.ocks.org/NPashaP/06ff0f8cd198730815bf"><img width="133" src="http://bl.ocks.org/NPashaP/raw/06ff0f8cd198730815bf/thumbnail.png"></a></td>
</tr>
<tr valign="top">
    <td>Animated Historical Weather Maps<br><a href="http://kyrandale.com/viz/uk-weather-stations.html"><img width="133" src="http://kyrandale.com/static/images/viz/uk-weather-stations.png"></a></td>
    <td>Visualizing Walking with Smartphone Accelerometers<br><a href="http://kyrandale.com/viz/d3-smartphone-walking.html"><img width="133" src="http://kyrandale.com/static/images/viz/d3-smartphone-walking.png"></a></td>
    <td>Cycloid Optical Illusion<br><a href="http://bl.ocks.org/peterlozano/480f90947c6e08be6b95"><img width="133" src="http://bl.ocks.org/peterlozano/raw/480f90947c6e08be6b95/thumbnail.png"></a></td>
    <td>Alternative Calendar View<br><a href="http://bl.ocks.org/KathyZ/c2d4694c953419e0509b"><img width="133" src="https://raw.githubusercontent.com/KathyZ/d3-calendar/master/thumbnail.png"></a></td>
</tr>
<tr valign="top">
    <td>US Choropleth Plus Bar Chart<br><a href="https://vida.io/documents/4vZ9mRGyepoyQxFcK"><img width="133" src="https://s3.amazonaws.com/vida-production/thumbnails/4vZ9mRGyepoyQxFcK"></a></td>
    <td>Aster Plot<br><a href="http://bl.ocks.org/bbest/2de0e25d4840c68f2db1"><img width="133" src="http://bl.ocks.org/bbest/raw/2de0e25d4840c68f2db1/thumbnail.png"></a></td>
    <td>Smallest Convex Polygon<br><a href="http://bl.ocks.org/NPashaP/2ad2fcceadb8a6907098"><img width="133" src="http://bl.ocks.org/NPashaP/raw/2ad2fcceadb8a6907098/thumbnail.png"  width="400"></a></td>
    <td>Shooter<br><a href="http://d3shooter.herokuapp.com"><img width="133" src="http://d3shooter.herokuapp.com/images/screenshot.png"  width="400"></a></td>
</tr>
<tr valign="top">
    <td>Sunburst for your skill map<br><a href="http://bl.ocks.org/wizicer/f662a0b04425fc0f7489"><img width="133" src="https://gist.githubusercontent.com/wizicer/f662a0b04425fc0f7489/raw/ae5c0c2f03daf72798a0711aaccfb868adf464cc/thumbnail.png"></a></td>
    <td>Network of soccer passes<br><a href="http://bl.ocks.org/fhernand/9a9f93f2a6b0e83a9294"><img width="133" src="http://bl.ocks.org/fhernand/raw/9a9f93f2a6b0e83a9294/thumbnail.png"></a></td>
    <td>Choropleth with svg filter<br><a href="http://bl.ocks.org/fhernand/be1e9c9fdb0473292abf"><img width="133" src="http://bl.ocks.org/fhernand/raw/be1e9c9fdb0473292abf/thumbnail.png"></a></td>
    <td>Psychedelic British Isles<br><a href="http://go-down-the-drain.herokuapp.com/secretTomb/BritishIsles.html"><img width="133" src="https://raw.githubusercontent.com/BeniCheni/Music-Concierge/master/app/images/Added%20Borders,%20Country%20and%20City%20Names.png"></a></td>
</tr>
<tr valign="top">
    <td>-<br><a href="#"><img width="133" src="#"></a></td>
    <td>Interactive Unit Circle (Trigonometry)<br><a href="http://derrick.cohodas.me/unit-circle/"><img width="133" src="http://i.imgur.com/Rh8bSNY.png?1"></a></td>
    <td>Days-Hours Heatmap<br><a href="http://bl.ocks.org/oyyd/859fafc8122977a3afd6"><img width="133" src="http://bl.ocks.org/oyyd/raw/859fafc8122977a3afd6/thumbnail.png"></a></td>
    <td>Trend Chart (Area + Line)<br><a href="http://bl.ocks.org/rkirsling/33a9e350516da54a5d4f"><img width="133" src="http://bl.ocks.org/rkirsling/raw/33a9e350516da54a5d4f/thumbnail.png"></a></td>
</tr>
<tr valign="top">
    <td>Create D3 Visualizations<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>
    <td>-<br><a href="#"><img width="133" src="#"></a></td>

    <td>Node Focusable Tree<br><a href="http://codepen.io/mikefab/full/IDdts/"><img width="133" src="http://s12.postimg.org/abee893h9/node_focusable_radial_tree.jpg"></a></td>
</tr>
<tr valign="top">
    <td>Tarot Card App made with D3 + Meteor framework<br><a href="http://tarot-pedia.meteor.com/"><img width="133" src="https://farm8.staticflickr.com/7541/15320089804_2f5977c9b8_m.jpg"></a></td>
    <td width="207">Ulam Spiral<br><a href="http://bl.ocks.org/rouleur/260c5a9233fff0e8ddaf"><img width="133" src="http://bl.ocks.org/rouleur/raw/260c5a9233fff0e8ddaf/thumbnail.png"></a></td>
    <td width="207">Animated Chord Diagram<br><a href="http://www.visualcinnamon.com/2014/12/using-data-storytelling-with-chord.html"><img width="133" src="https://raw.githubusercontent.com/nbremer/thumbnails/master/Chord%20Diagram%20Video%20Fast%20202px.gif"></a></td>
    <td width="207">SOM Hexagonal Heatmap<br><a href="http://www.visualcinnamon.com/2013/07/self-organizing-maps-creating-hexagonal.html"><img width="133" src="https://raw.githubusercontent.com/nbremer/thumbnails/master/SOM%20Heatmap.png"></a></td>
</tr>
<tr valign="top">
    <td>Dataviz tree<br><a href="http://charts.animateddata.co.uk/datavistree/"><img width="133" src="http://animateddata.co.uk/img/ext/datavistree-thumb.jpg"></a></td>
    <td>UK Temperature 1910-2014<br><a href="http://charts.animateddata.co.uk/uktemp/"><img width="133" src="http://animateddata.co.uk/img/ext/uktemprange-thumb.jpg"></a></td>
    <td>Simple Bubble Chart<br><a href="http://bl.ocks.org/phuonghuynh/54a2f97950feadb45b07"><img width="133" src="http://phuonghuynh.github.io/demo/bubble-chart/demo-bubble-chart.png"></a></td>
    <td>Collapsible 2-Way Tree Layout<br><a href="http://bl.ocks.org/kanesee/5d6c48bffd4ea31201fb"><img width="133" src="https://raw.githubusercontent.com/kanesee/d3-2way-tree/master/screenshot.png"></a></td>
</tr>
<tr valign="top">
    <td>Animated Pie<br><a href="http://vyacheslavryabinin.com/datavis/pie/"><img width="133" src="http://vyacheslavryabinin.com/datavis/pie/pie.png"></a></td>
    <td>Exoplanets in Orbit<br><a href="http://www.visualcinnamon.com/2014/12/creating-interactive-exoplanets-in.html"><img width="133" src="https://raw.githubusercontent.com/nbremer/exoplanets/gh-pages/img/Exoplanets%20-%20Animated.gif"></a></td>
    <td>Worldcup'14 Drag & Drop Brackets<br><a href="http://romain.vuillemot.net/projects/worldcup14/"><img width="133" src="http://romain.vuillemot.net/projects/worldcup14/tutorial.gif"></a></td>
    <td>A Scatterplot as Bar chart<br><a href="http://www.visualcinnamon.com/2015/01/the-top-2000-equalizer-songs.html"><img width="133" src="https://raw.githubusercontent.com/nbremer/thumbnails/master/Top2000Animated.gif"></a></td>
</tr>
<tr valign="top">
    <td>Conway's Game of Life<br><a href="http://bl.ocks.org/NPashaP/f1e73faef87bee899b47"><img width="133" src="http://bl.ocks.org/NPashaP/raw/f1e73faef87bee899b47/thumbnail.png"></a></td>
    <td>Editable tree mixing d3 &amp; Angular<br><a href="http://marmelab.com/ArchitectureTree/"><img width="133" src="http://i.imgur.com/9PG8v0J.png"></a></td>
    <td>SFDC Training Videos<br><a href="https://mohansun-canvas.herokuapp.com/content/training/"><img width="133" src="http://d3js.org/ex/cluster.png"></a></td>
    <td>Editable Sankey with self-loops<br><a href="http://sankey.csaladen.es/"><img width="133" src="http://sankey.csaladen.es/snapshot.jpg"></a></td>
</tr>
<tr valign="top">
    <td>England & Wales house price animation<br><a href="http://helenjacksonanalytic.co.uk/EW_prop_price.html" target="_blank"><img width="133" src="http://www.helenjacksonanalytic.co.uk/EaW.png"></a></td>
    <td>Bi-directional Zoom and Drag D3 dependency tree<br><a href="http://bl.ocks.org/shunpochang/66620bad0e6b201f261c" target="_blank"><img width="133" src="https://raw.githubusercontent.com/shunpochang/d3tree/master/thumbnail.png"></a></td>
    <td>Interactive Force Directed Graph<br><a href="http://emptypipes.org/2015/02/15/selectable-force-directed-graph/" target="_blank"><img width="133" src="http://emptypipes.org/img/d3_selectable_force_directed_graph.png" alt="Selectable / Zoomable / Centerable Force Directed Graph"></a></td>
    <td>F1 Timeline<br><a href="http://charts.animateddata.co.uk/f1/" target="_blank"><img width="133" src="http://animateddata.co.uk/img/ext/f1.jpg"></a></td>
</tr>
<tr valign="top">
    <td>Geocenter of F1 venues<br><a href="https://csaladenes.wordpress.com/2015/02/01/the-geocenter-of-formula-1-venues-between-1950-2014/" target="_blank"><img width="133" src="https://csaladenes.files.wordpress.com/2015/02/f1venues.jpg?w=1000&h=547"></a></td>
    <td>Access Quandl aggregator<br><a href="https://csaladenes.wordpress.com/2015/02/24/quandl-nvd3-interactive-data-plotter/" target="_blank"><img width="133" src="https://csaladenes.files.wordpress.com/2015/06/qunadlnvd3.gif"></a></td>
    <td>Religions in Romania on colorwheels<br><a href="https://csaladenes.wordpress.com/2015/03/01/religions-of-romania-visualized-on-colorwheels/" target="_blank"><img width="133" src="https://csaladenes.files.wordpress.com/2015/03/clipboard02.png?w=133"></a></td>
    <td>Sunburst bilevel partition with tooltips <br><a href="http://bl.ocks.org/vgrocha/1580af34e56ee6224d33" target="_blank"><img width="133" src="https://gist.github.com/vgrocha/1580af34e56ee6224d33/raw/205ed29a33481727cadedd6b2ecc1e4f2273bfbf"></a></td>
</tr>
<tr valign="top">
    <td>Russian Budget: 1937 to 1950<br /><a href="http://budgetapps.artzub.com/minfin/" target="_blank"><img width="133" src="http://habrastorage.org/files/125/a61/c1f/125a61c1fbad4517922b4ef673cf2ef2.gif" alt=""></a></td>
    <td>Liquid Fill Gauge<br /><a href="http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6" target="_blank"><img width="133" src="https://gist.githubusercontent.com/brattonc/5e5ce9beee483220e2f6/raw/thumbnail.gif" alt=""></a></td>
    <td>Interactive Bubble Menu<br /><a href="http://sunsp.net/demo/BubbleMenu" target="_blank"><img width="133" src="http://sunsp.net/demo/BubbleMenu/bubblemenu.gif" alt=""></a></td>
    <td>Global center of higher education: university rankings<br /><a href="https://csaladenes.wordpress.com/2015/03/10/the-global-center-of-mass-of-higher-education-university-rankings-mapped/" target="_blank"><img width="133" src="https://csaladenes.files.wordpress.com/2015/03/clipboard014.png?w=1000&h=553" alt=""></a></td>
</tr>
<tr valign="top">
    <td>Linked Geographic and Tree Maps<br /><a href="http://sunsp.net/demo/GeogTreeMaps" target="_blank"><img width="133" src="http://sunsp.net/demo/GeogTreeMaps/geogtreemaps.gif" alt=""></a></td>
    <td>Bi-directional Hierarchical Sankey<br><a href="http://bl.ocks.org/Neilos/584b9a5d44d5fe00f779"><img width="133" src="https://cdn.rawgit.com/Neilos/584b9a5d44d5fe00f779/raw/926618763c8bac76ed6b561fdd789f931c3089cd/thumbnail.gif"></a></td>
    <td>2 Interactive Colorwheels + Zoomable World Map<br><a href="https://csaladenes.wordpress.com/2015/03/27/colorful-development-cartagena-datafest-2015/"><img width="133" src="https://csaladenes.files.wordpress.com/2015/03/clipboard015.png?w=133"></a></td>
    <td>Radial Boxplot<br><a href="http://bl.ocks.org/davidwclin/ad5d13db260caeffe9b3"><img width="133" src="http://bl.ocks.org/davidwclin/raw/ad5d13db260caeffe9b3/thumbnail.png"></a></td>
</tr>
<tr valign="top">
    <td>Pazzla: Mosaics of Instagram Pictures<br /><a href="http://pazzla.qoollo.com" target="_blank"><img width="133" src="http://petrdevaikin.com/img/pazzla.jpg" alt="Pazzla: Mosaics of Instagram Pictures"></a></td>
    <td>Community Pop-Culture References Heatmap<br /><a href="http://communitypoprefs.com/" target="_blank"><img width="133" src="http://i.imgur.com/t4Df6VD.jpg" alt="Community Pop-Culture References Heatmap"></a></td>
    <td>Top baby names bump chart<br><a href="http://www.visualcinnamon.com/babynamesus"><img width="133" src="https://raw.githubusercontent.com/nbremer/thumbnails/master/Babynames%20Combined.png"></a></td>
    <td>Real time electric consumption in Spain
        <br/>
        <a href="http://energia.ningunaparte.net/en/" target="_blank">
            <img width="133" src="http://i.imgur.com/eWdRKXL.gif" alt="Electric consumption in Spain - latest 24h">
        </a>
    </td>
</tr>
<tr valign="top">
    <td>Zoomable Unilevel Partition<br><a href="http://bl.ocks.org/apoorvnandan/8eb44a1990d4d9250700"><img width="133" src="https://5a44583fb28d25c751971f24d9bfeab2b7c159c6.googledrive.com/host/0B4hMaI5ok_84fi1oYWN6RzJCQ1BfTk5MSnVBQjdsMFhCeVBpZ19YMHpsTVdlM0FNZ2pWTTQ/thumbnail.png"></a></td>
    <td>Apps Script dependency analysis<br><a href="http://ramblings.mcpher.com/Home/excelquirks/drivesdk/vizdependencies"><img width="133" src="https://googledrive.com/host/0B92ExLh4POiZfkZsSDMwaHZUV3hneWdEbVV5aWVqenpWNjYtc29oYUZyYzVKVE50eFBMQm8/vizgas.png"></a></td>


    <td> Editable Tree <br> <a target="_blank" href="http://www.mockapi.io/#/docs"> <img width="133" src="http://www.mockapi.io/images/d3gallery.gif"> </a> </td>
    <td>Automated Biography of a Nation<br> <a href="https://annalyzin.wordpress.com/2015/06/04/automated-biography/"> <img width="133" src="https://annalyzin.files.wordpress.com/2015/06/chartstill.png"> </a> </td>
</tr>
<tr valign="top">
    <td>Star Wars Character Profiles<br><a href="https://annalyzin.wordpress.com/2015/06/01/you-are-who-you-like/"><img width="133" src="https://annalyzin.files.wordpress.com/2015/06/swcstill1.png"></a></td>
    <td>Global Refugee Flows - 2 Dynamic Chord Diagrams<br><a href="http://wp.me/pBH3w-a5"><img width="133" src="https://csaladenes.files.wordpress.com/2015/06/refugees.gif"></a></td>
    <td>Ontology Visualization <br><br><a href="http://vowl.visualdataweb.org/webvowl/"><img width="133" src="http://vowl.visualdataweb.org/webvowl/webvowl_thumbnail.png"></a></td>
    <td>Vertical Sankey<br><br><a href="http://benlogan1981.github.io/VerticalSankey/UBS.html"><img width="133" src="http://benlogan1981.github.io/VerticalSankey/images/UbsExampleVS.png"></a></td>
</tr>
<tr>
    <td>Visualizing a genetic algorithm <a href="http://karstenahnert.com/gp/"><img width="133" src="http://karstenahnert.com/gp/thumbnail3_133.png"></a></td>
    <td>Create D3 Visualizations<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>
    <td>Rectangular Area Chart<br /><a href="http://bl.ocks.org/brattonc/b1abb535227b2f722b51" target="_blank"><img width="133" src="https://gist.githubusercontent.com/brattonc/b1abb535227b2f722b51/raw/thumbnail.gif"></a></td>

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

</tr>
<tr>
 <td>Cluster Purity Visualizer<br>
     <a href="http://bl.ocks.org/nswamy14/e28ec2c438e9e8bd302f">
        <img width="133" src="http://bl.ocks.org/nswamy14/raw/e28ec2c438e9e8bd302f/thumbnail.png">
     </a>
 </td>

<td>Platlets<br>
    <a href="http://bl.ocks.org/lokesh005/1b23c84b68f5be134ff0">
      <img width="133" src="http://bl.ocks.org/lokesh005/raw/1b23c84b68f5be134ff0/Pl.png">
    </a>
</td>

<td>Map with Latitude & Longitude<br>
    <a href="http://bl.ocks.org/lokesh005/7640d9b562bf59b561d6">
      <img width="133" src="http://bl.ocks.org/lokesh005/raw/7640d9b562bf59b561d6/India.jpg">
    </a>
</td>

<td>Higher education data explorer by parliamentary constituency<br>
    <a href="https://www.ucas.com/corporate/data-and-analysis/ucas-undergraduate-releases/he-entry-rates">
      <img width="133" src="https://cloud.githubusercontent.com/assets/16351706/11899207/5ab41c12-a595-11e5-919c-25627c7a70c2.png">
    </a>
</td>

</tr>
<tr>
<td>Clustergrammer: interactive clustergram/heatmap maker<br>
    <a href="http://amp.pharm.mssm.edu/clustergrammer/">
      <img width="133" src="http://amp.pharm.mssm.edu/clustergrammer/static/img/harmonizome.png">
    </a>
</td>
<td>Spirograph<br>
    <a href="https://github.com/nylen/d3-spirograph/">
      <img width="133" src="https://cloud.githubusercontent.com/assets/227022/12709554/e91c2e36-c872-11e5-8d76-f039cb642717.png">
    </a>
 </td>
 <td>Interactive Bar/line/scatter<br>
    <a href="http://www.tylernwolf.com/?utm_source=d3_org&utm_medium=demo_link&utm_campaign=d3_website#/portfolio/corrdisp">
      <img width="133" src="https://raw.githubusercontent.com/thetylerwolf/tylernwolf.com/master/image/corrdisp_viz.png">
    </a>
 </td>
<td>Timeline Chart<br>
    <a href="https://github.com/commodityvectors/d3-timeline">
      <img width="133" src="https://raw.githubusercontent.com/commodityvectors/d3-timeline/master/usage.gif">
    </a>
 </td>
 </tr>
 <tr>
 <td>Tree of Life<br>
    <a href="http://taxontree.bpodgursky.com">
       <img width="133" src="https://bpodgursky.files.wordpress.com/2016/02/col-screenshot.png">
    </a>
  </td>
 <td>Change points in social networks<br>
    <a href="https://piratepeel.github.io/proximitynetwork.html">
       <img width="133" src="https://piratepeel.github.io/img/MITChangepoints.png">
    </a>
  </td>
  <td>NFL and NBA Team Skills<br>
    <a href="https://piratepeel.github.io/sportskills.html">
       <img width="133" src="https://piratepeel.github.io/img/sportscreen.png">
    </a>
  </td>
  <td>KnowledgeMap<br>
    <a href="http://www.cotrino.com/2016/03/knowledgemap/">
       <img width="133" src="https://raw.githubusercontent.com/cotrino/experimentos/master/knowledgemap.png">
    </a>
  </td>
</tr>
<tr>
  <td>Galaxy Chart<br>
    <a href="https://risacher.org/galaxy-chart/">
      <img width="133" src="https://risacher.org/galaxy-chart/galaxy-chart.PNG">
    </a>
  </td>

   <td>Configurable circular timer<br><a href="http://ramblings.mcpher.com/Home/excelquirks/bigapps/bigquiz/dashtimer"><img width="133" src="https://storage.googleapis.com/goinggas.com/assets/images/d3/configtimer.png"></a></td>
   <td>Clock built with Configurable circular timer<br><a href="http://ramblings.mcpher.com/Home/excelquirks/bigapps/bigquiz/clocktimer"><img width="133" src="https://storage.googleapis.com/goinggas.com/assets/images/d3/configTimerclock.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
D3 Mobile Application
 Federal Budget
 US Trade Deficit
 Sequences sunburst
Halo
 Radial Progress
 NFL Predictions
 Corona Radar
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
 Circos.js 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
Nested Layouts
Radar Chart Redesign Volcano Plot with Voronoi Overlay Fitbit Bullet Charts What Kills Us traversable pie menu
Relationship Graph
 Time Data Availability
 University Program Transfers - Interactive
 Sankey + Leaflet: Map of Migration in the 2014 Maldives Census
BiPartite Viz
 Gauge Viz
 Chord Viz
 Bosnia and Herzegovina 2013 Census Visualization
3D Torus with Force Layout
 3D Honeycomb Bar Chart
 3D Bar Chart
 Chord Viz
Russian State Duma
Visualization of Russian State Duma structure 		Circular visualization of integer sequences from OEIS
Circular visualization of integer sequences from OEIS 		Curve Comparison Tool
Useful tool for looking at the different curves offered by D3 v4.

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
Line Chart - Zoom, Stack, Stream
 Column Chart - Zoom, Stack, Group
 Scatter Plot - Transitions, Skins
 Bar Chart - Zoom, Stack, Group
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
 World Map with heat color Example
 Twitter stream geographical visualization
Dendrogram + Grouped Bar

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
Band Zoom
 Item explorer
 Image Map
 Voronoi diagram second level

Maps

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

Statistics

Uniform distribution
 Normal distribution
 Linear regression

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

Pareto Chart

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 chart, other timelines, and timing diagram
  • fibonacci scale
  • data table (maybe the airline table at the bottom of the crossfilter example?)
  • hypergraph
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️