Gallery

Wiki ▸ Gallery

Welcome to the D3 gallery. Feel free to add links to your work! More examples are available in the D3 repository and you can see them in action here. If you want to share an example and don't have your own hosting, consider using Gist and bl.ocks.

Visual Index

Examples

• Visualizing document similarity over time
• At the National Conventions, the Words They Used
• Drought Extends, Crops Wither
• Drought and Deluge in the Lower 48
• Drought during Month
• Interactive Publication History - Ben Bederson
• Visualizing the World's Opinion (Zoomable Worldmap and Pie Chart)
• Visualizing Networks with Hive Plots
• The Wealth & Health of Nations
• Bézier Curves, Collatz Graph, Word Cloud and many Mathematical Visualisations - Jason Davies
• Koalas to the Max! - Vadim Ogievetsky
• Urban Water Explorer - Jan Willem Tulp
• What Do You Work For? - Jeffrey Baumes
• Misc. Examples - Justin Palmer
• Collusion FireFox Addon - Atul Varma
• UK University Statistics - Keming Labs (Kevin Lynagh)
• Slopegraphs - Hamilton Ulmer
• Marmoset chimerism dotplot - David Rio Deiros
• UN Global Pulse 2010 Visualization - Eduardo Graells & Ruth Garcia
• U.S. Population Pyramid - Jeff Heer
• WindHistory.com: maps and charts - Nelson Minar
• Students' seating habits - Skyrill.com
• World Wide Women's Rights - Wimdows.nl
• Old Visualizations Made New Again - Jim Vallandingham
• Scatterize - Nate Vack
• Various visualisations especially with d3.geo - Lars Kotthoff
• Global Life Expectancy - Nathan Yau (FlowingData)
• Vegetable Nutrition w/ Parallel Coordinates - Kai Chang
• London Olympics Perceptions - Donuts to Chord Diagram Transition - Kyle Foreman, Peter Hamilton, Cristina Grigoruta
• Euro Debt Crisis
• Fuzzy Link-Bot - Entity co-occurrence in music news by Andrew Collins.
• Job Flow
• Visualizing a newborn's feeding and diaper activity - Jimmie Yoo
• Inequality in America - EJ Fox for Visual.ly
• Current Article Popularity Trends on Hacker News - Vadim Ogievetsky
• Hacker News statistics using PhantomJS
• AFL Brownlow Medalists, Formula 1 Lap Chart, When is Easter? and David Foster Wallace's "Infinite Jest" - Chris Pudney (VisLives!)
• Uber Rides by Neighborhood
• Les Misérables Co-occurrence
• US Elections 2012 / Twitter
• Major League Baseball Home Runs, 1995-2010 - Ken Cherven (Visual-Baseball.com)
• Color: a color matching game - Maria Munuera and Mark MacKay
• NCAA 2012 March Madness Power Rankings - Angi Chau
• iTunes Music Library Artist/Genre Graph - Christopher Martin
• [Data Story] (http://data-story.org) - Decio Battaglia, Kevin Mahoney and Xiaoying Riley
• Four Ways to Slice Obama’s 2013 Budget Proposal - Shan Carter
• The Facebook Offering: How It Compares - Jeremy Ashkenas et al.
• A Race to Entitlement
• Visualising New Zealand's Stolen Vehicle Database Part1 and Part2 and source code
• Visualizing San Francisco Home Price Ranges
• Daily data return rates for seismic networks in the EarthScope USArray - Rob Newman, Array Network Facility, UCSD
• What Size Am I? Finding dresses that fit - Anna Powell-Smith
• Baseball 2012 Predictions based on past 6 years - Danny Hadley
• Last Chart! - See the Music
• Multiple visualization from the Société Typographique de Neuchâtel - Vincent Hiribarren
• Prime numbers pattern
• Interactive visual breakpoint detection on SegAnnDB - Toby Dylan Hocking
• Coordinated visualizations for Consumer Packaged Goods
• eCommerce API Wheel for eBay - Saranyan Vigraham
• The business of Bond
• Home energy consumption - Peter Cook
• Heatmap of gene expression with hierarchical clustering , [demo here] (http://blog.nextgenetics.net/demo/entry0044/) - Damian Kao
• [Graph diagram of gene ontology] (http://blog.nextgenetics.net/?e=19), [demo here] (http://blog.nextgenetics.net/demo/entry0019/demo.html) - Damian Kao
• [UMLS (Unified Medical Language System) Visualizer] (https://ncc.cchmc.org/prod/umls_visualizer/index.do)
• University of Washington Departments - Matthew Sorensen
• Baby Names in England & Wales - Anna Powell-Smith
• Realtime webserver stats - demo - (Github, Github) - Andrew Weeks
• TradeArc - Arc Diagram of Offseason NHL Trades, (Github) - Nathan Stehr
• Visualizing Swiss politicians on Twitter using D3.js - Ralph
• Close Votes - visualizing voting similarities for the Dutch 2012 national elections - Jan Willem Tulp
• Multiple Area charts and a brush tool - Tyler Craft
• Enumerating vertex induced connected subgraphs - Robert Kozikowski
• Startup Salary & Equity Compensation
• Pyramid charts: demographic transition in the US
• Floating bubble chart: De Maastricht au traité budgétaire : les oui et les non de 39 personnalités politiques
• Open Knowledge Festival #OkFest Hashtag Graph Visualization
• Exploring d3.js with data from my runs to plot my heart rate
• Is Barack Obama the President? (Balloon charts)
• Audio Spectrum Analyzer - Ari Russo

Concepts & Techniques

Charts and Chart Components

• Axis Component
• Date Ticks
• Venn Diagram using Clipping
• Venn Diagram using Opacity
• Marimekko Chart
• Fixed-width Histogram, Irwin–Hall distribution
• Fixed-width Histogram of Durations, log-normal distribution
• Variable-width Histogram
• Histogram Chart
• Grouped Bar Chart (alternative example)
• Stacked Bar Chart
• Reorderable Stacked Bar Chart
• Small Multiples
• Pie Multiples / Pie Multiples with Nesting
• Pie Chart Updating (Part 1) (Part 2)
• Sparklines
• Interactive Line Graph
• Dual scale line chart
• Scatterplot and Heatmap
• Animated Sankey Diagram (alluvial)
• Parallel Coordinates
• Parallel coordinates with fisheye distortion
• Parallel Sets
• Parallel Sets with reorderable heading
• Horizon Chart
• Gauge
• Line Chart with tooltips
• Chernoff faces and Chernoff faces example: happy planet index
• Swimlane Chart
• Stacked layout with time axis
• Animated bubble charts for school data analysis
• Pictograms
• Scatterplot for K-Means clustering visualization
• Smoke charts and source code
• Multiple Area Charts with D3.JS
• Sankey Diagram with Overlap

Trees and Graphs

• Dependency Chord Diagram
• Chord Layout Transitions
• Hierarchical Edge Bundling
• Hierarchical Bar Chart
• Partition Layout (Zoomable Icicle)
• Tree Layout (Animated)
• Tree Layout (Collapsible)
• Tree Layout (Collapsible, with Labels)
• Treemap Layout in SVG
• Sunburst Layout with Labels
• Sunburst: Coffee Flavour Wheel
• Indented Tree (Collapsible)
• Force Layout with Symbols
• Force Layout with Custom Forces
• Force Layout with Multiple Foci
• Force Layout multi foci with Convex Hulls
• Force Layout with Images and Labels
• Force Layout with drag and drop support to set nodes to fixed position when dropped
• Force Layout (Interactive Construction)
• Force Layout (Collapsible Hierarchy)
• Force Layout from XML
• Force Layout from Matrix Market format
• Force Layout with Directed Edges (Curves and Arrow Markers)
• Bounded Force Layout
• Building a tree diagram
• Reveal animation on a tree with a clip path
• Force-Based Label Placement
• Visualizing a network with Cypher and d3.js
• Connections in time
• Voronoi Diagram with Force Directed Nodes and Delaunay Links
• Building Cubic Hamiltonian Graphs from LCF Notation
• Chicago Lobbyists Force-Directed Graph Visualization
• Circular tree. Will your team win the NCAA Tournament?
• Bracket Layout
• Force Layout with Groups and Labels showing relations of football players participating in Euro 2012
• Pedigree Tree
• Chord layout of football passes

Miscellaneous visualizations

• Superformula Explorer
• Superformula Tweening
• OMG Particles!
• Line Tension
• Segmented Lines and Slope Coloring
• Raindrops
• Linear Gradients
• Force Directed States of America
• Rounded Rectangles
• Spermatozoa
• Spline, Zoom and Pan
• Arc Tweens
• Show Reel
• VVVV viewer
• Merge Sort
• Epicyclic Gearing
• DOM-to-Canvas
• Transform Transitions
• Square Circle Spiral Illusion
• Adventures in D3
• Time Series
• Voronoi-based point picker
• Radar chart
• Drag rectangle
• Elastic collisions(http://bl.ocks.org/1706849)
• Collider - a d3.js game
• alpha-shapes aka concave hulls
• Conway's Game of life as a scrolling background
• [appplot.com - various charts] (http://appplot.com)
• Simple Dashboard Example
• Dataflow programming with D3 and Blockly

Charts using the reusable API

• Parallel Coordinates and repository
• Chernoff faces, Fisheye, Gepdesic grid, Hive plot, Horizon chart, Sankey diagram,
• Parallel Sets
• Word Cloud
• NVD3
• MathJax label
• Simple table

Useful snippets

• Masking with external svg elements
• PJAX
• Table Sorting
• Automatically sizing text
• Templating ala Mustache, with Chernoff faces example
• Bay Area earthquake responses by zip code: loading external file through Yahoo Pipes
• Simple HTML data tables
• Responsive SVG resizing without re-rendering
• Automatic floating labels using d3 force-layout
• [Long Scroll] (http://bl.ocks.org/3689677)
• Custom Line Interpolation
• Export to SVG/PNG/PDF server-side using Perl

Maps

• Click-to-Zoom with Albers Projection
• Google Maps
• Polymaps
• Polymaps with custom tiler
• Map from GeoJSON data with zoom/pan
• Maps and sound
• Choropleth classification systems
• Choropleth with interactive parameters for NYC data visualization, code
• Mercator and Albers to Orthographic Projection
• Non-Contiguous Cartogram
• Flows of refugees between the world countries in 2008
• [Interactive azimuthal projection simulating a 3D earth with stars] (http://marcneuwirth.com/blog/2012/06/24/creating-the-earth-with-d3-js/)
• Calculating quadtree bounding boxes and displaying them in leaflet
• Projection Transitions and Comparing Map Projections

Tools

Interoperability

• IPython-Notebook with d3.js
• Plotting library for python based on d3
• Visualizing NetworkX graphs in the browser using D3
• Pushing d3 commands to the browser from iPython
• Dance.js: D3 with Backbone and Data.js
• Backbone-D3
• Viewing OpenLearn Mindmaps Using d3.js
• Splay Tree animation with dart, d3, and local storage
• Sankey diagrams from Excel
• [Plotsk: A python/coffeescript/d3.js-based library for plotting data in a web browser] (https://github.com/davidcox/plotsk)
• Data visualization with D3.js and python
• d3.js force diagrams straight from Excel
• Instant interactive visualization with d3 + ggplot2
• d3.js force diagrams with markers straight from Excel
• Visualising a real-time DataSift feed with Node and D3.js
• Very limited, in-progress attempt to hook d3.js up to three.js
• SVG to Canvas to PNG using Canvg
• Canvas with d3 and Underscore
• Automatically sizing text
• SVG to Canvas
• d3 rendered with RaphaelJS for IE Compatibility
• d34raphael
• [D3 graphics in a Pergola SVG UI] (http://www.dotuscomus.com/pergola/pergola_1.4.0/ExamplesHTML/D3/multiD3.html)
• Visualising ConAir Data With Cubism.js (Arduino, TempoDB, Sinatra)
• Render Geographic Information in 3D With Three.js and D3.js

Online Editors

• Bar chart code generator and online editor
• Live coding based on Bret Victor's Inventing on Principle talk
• Tributary
• D3.js playground
• A CoffeeScript console for d3.js visualization

Products

• Cube: Time Series Data Collection & Analysis
• Fast Multidimensional Filtering for Coordinated Views
• Polychart: A browser-based platform for exploring data and creating charts
• Plot.io: Data Visualization made Fast, Fun and Easy
• Chart.io: The Easiest Business Dashboard You'll Ever Use
• Trisul Network Analytic
• Explore Analytics: cloud-based data analytics and visualization
• Meshu turns your places into beautiful objects.
• Reports for Simple

Libraries

• Cubism.js: Time Series Visualization
• Rickshaw: JavaScript toolkit for creating interactive real-time graphs
• Dynamic Visualization LEGO
• NVD3: Reusable charts by Novus Partners

Wish List

• arc diagram
• gantt, other timelines and timing diagram
• candlestick or ohlc
• fibonacci scale
• data table (maybe the airline table at the bottom of the crossfilter example?)
• hypergraph