If you’re just getting your feet wet with D3.js, here are some great learning resources to get you acclimated:
- D3 for mere mortals: Great introductory lessons for those starting from scratch.
- Try D3 Now: Another great resource for learning about core D3 concepts.
- Data-Driven Documents (paper): An academic article by Mike Bostock with loads of footnotes.
- Learning D3, Scott Becker: A quick and effective tutorial series to get yourself up and running.
- Dashing D3: A very thorough tutorial series covering a LOT more than just D3.
- Interactive Data Visualization for the Web is a fantastic book by Scott Murray. The book is paired with a wonderful collection of exercises and sample code to walk you through many of D3’s core methods.
- Aligned Left is Scott Murray’s blog – chock full of D3 tutorial goodness. The tutorials on his website predate the book, but are excellent for getting started while you wait for your full text to arrive in the mail.
- D3 Noob is exactly what it sounds like – although lately I must say the tutorials are wading into the more intermediate and advanced territory.
Graffeine has your back if you’re working with the graph database Neo4j. It’s useful as a database admin interface and a visual demonstration tool.
Mermaid is a super handy library that leverages D3.js to help you create graphs and flow charts in the browser using a simple markdown-style syntax.
Epoch is a “general purpose real-time charting library for building beautiful, smooth, and high performance visualizations.” Epoch provides the framework for 5 different real-time charts built with D3 and canvas.
Parallel Coordinates is a toolkit for visually exploring multidimensional data built on D3.js
D3GH is a plugin for the 3D modeling application suite Rhino/Grasshopper created as a “two-dimensional platform for rationalizing and interfacing with building information”.
Insights.js is a library based on D3.js for visualizing and navigating graphs. Among others, Insights contains methods for event handling, filtering / focusing nodes, and adding tooltips.
Lepracursor is a jquery plugin based on D3.js that creates virtual cursors that multiply with every click.
iopctrl.js allows you to construct simple user interface controls. In addition to D3, the library makes use of Polymer for handling mouse and touch interactions.
Raw is an incredibly handy tool from Density Design that lets you “create custom vector-based visualizations on top of the amazing D3.js library through a simple interface.”
Tributary is “an experimental environment for rapidly prototyping visualization code. The environment provides several useful libraries, as well as a simple interface for live code editing.”
Code Flower is an experimental application built on D3.js that visualizes a source code repository as an interactive tree. Each circle in a code flower represents a file in your repo and the size of each circle is determined by the number of lines of code in its corresponding file.
Dimple is a D3-based data vizualization library built with the business-oriented analyst in mind. It has a shallow learning curve, exposing as little code as possible to get you slicing and dicing your information faster.
Vega, a tool developed by Trifacta, is designed to make it easier to create and share visualizations simply by editing a JSON file. with Vega you can “…describe data visualizations in a JSON format, and generate interactive views using either HTML5 Canvas or SVG.”
Dance.js by Michael Aufreiter, is “dancing based on data. It’s much like Backbone.js, but with a foundation for building interactive visualizations in the spirit of D3.js. It comes with Data.js, a uniform interface for handling your domain data.”
Dynamic-Graphs: If you’re looking to visualize data in real-time, Dynamic-Charts is a good solution. It is a “high-level library built on D3.js to allow for easy and quick development of dynamically populated charts, especially thought to represent live, real-time data.”
DC.js is another great charting library built on D3.js allowing efficient exploration of large datasets. DC.js is a great option for tackling very large datasets because of its native Crossfilter support; Crossfilter provides multi-dimensional filtering tools that allow users to pan and zoom in and out of a graph.
DataMaps is a collection of interactive maps built using D3.js and Topojson by Mark DiMarco. Download the examples from his Github repo and customize away.
Cubism.js is a D3 plugin used to construct time series charts by pulling data from Graphite, Cube and other sources.
NVD3 is a collection of charts and chart components built using D3. The library can be highly customized and produces simple, beautiful, and in many cases fully responsive data visualizations.
DVL is a free, functionally reactive chart library built on D3. Check out several examples HERE.
Graphene is a free dashboard toolkit built on a combination of D3 and Backbone.js.
Rickshaw is another D3-based charting library that contains a variety of standard chart types. Rickshaw is also free and open source, available under the MIT license.
Polychart is a robust charting library with a minimalist visual output. These charts are only free for non-commercial use, but also include support for paid licenses.