Home

Documentation

• API Reference
• Release Notes

Support

• d3-js Google Group
• d3.js on Stack Overflow

Tutorials

• Thinking with Joins
• Three Little Circles
• A Bar Chart, Part 1
• A Bar Chart, Part 2
• For Protovis Users
• Jan Willem Tulp's blog
• Justin Palmer's Introduction to D3
• Luke Francl's D3 for Mere Mortals
• Jérôme Cukier's blog
• Creating Basic Charts using d3.js
• Try D3 Now
• Scale Graph
• Using Inkscape with d3
• Pie Chart Updating with Text
• On the tenth day of Xmas, get dirty with data using d3.js
• Path and Transform Transitions
• Knowledge Stockpile on D3
• Scott Murray's D3 Tutorials
• How to Make Choropleth Maps in D3
• Mixing Clojure into D3
• Converting dynamic SVG to PNG with node.js, d3 and Imagemagick
• Creating Animated Bubble Charts in D3
• Visualising New Zealand's Stolen Vehicle Database Part1 and Part2

Talks and Videos

• Visualizing Data with Web Standards (Slides)
  W3Conf, November 2011.
• SVG Open Keynote (Slides)
  Microsoft Research, October 2011.
• Use the Force! (Slides)
  Trulia, September 2011.
• D3 workshop (Slides)
  VIZBI, March 2012.
• Intro to d3
  JavaScript User Group Munich, March 2012
• Simple D3.js Bar Chart Webcast by Ian Johnson.
• Using Selections in D3 to Make Data-Driven Visualizations by Ian Johnson.
• Visual.ly Meetup Recap: Introductory D3 Workshop by Aleksandra Todorova, Visual.ly February 16 2011.
• First steps in data visualisation using d3.js by Mike Dewar, New York Open Statistical Programming Meetup January 12 2012
• Data Visualization Using D3.js by Jim McCusker, TWed talk February 2012

Publications

• D3: Data-Driven Documents
  Michael Bostock, Vadim Ogievetsky, Jeffrey Heer
  IEEE Trans. Visualization & Comp. Graphics (Proc. InfoVis), 2011

Examples

Visualizations

• 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
• Lines Spent (Chrome Commits) - Evan Martin
• Transit time from my office - Beau Gunderson
• 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
• AFL Brownlow Medalists, Formula 1 Lap Chart 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

Concepts & Techniques

Charts and Chart Components

• Axis Component
• Date Ticks
• Venn Diagram using Clipping
• Venn Diagram using Opacity
• Marimekko Chart
• Histogram Chart
• Fixed-width Histogram
• Variable-width Histogram
• 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
• Line charts
• Scatterplot and Heatmap
• Animated Sankey Diagram (alluvial)
• Parallel Coordinates
• Backbone-D3
• Horizon Chart
• Gauge
• Line Chart with tooltips
• Chernoff faces
• Swimlane Chart
• Stacked layout with time axis
• Animated bubble charts for school data analysis

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 with Images and Labels

• Force Layout (Interactive Construction)
• Force Layout (Collapsible Hierarchy)
• Force Layout from XML
• 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?

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

Useful snippets

• Masking with external svg elements
• PJAX
• Table Sorting
• Canvas with d3 and Underscore
• Automatically sizing text

Maps

• 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 (http://code.leakingalpha.com/visionyc/)
• Mercator and Albers to Orthographic Projection

Using D3? Post your examples here! More examples on the D3 website and in the Git repository. If you just want to share a quick example, consider using Gist and bl.ocks.

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

Online Editors

• Live coding based on Bret Victor's Inventing on Principle talk
• The same but with Gist integration
• Project Archon
• D3.js playground
• D3.js sandbox

Products

• Cube: Time Series Visualization
• 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

Libraries

• Rickshaw: JavaScript toolkit for creating interactive real-time graphs
• Dynamic Visualization LEGO

Under Development

• Workshop
• Axes
• FAQ
• Chart Templates

Wish List

• adjacency matrix
• arc diagram
• polar area diagram (nightingale)
• gantt, other timelines and timing diagram
• sankey diagram and parallel sets
• candlestick or ohlc
• fibonacci scale
• data table
• hypergraph