D3.js Graph Gallery for Data Visualization
The d3 graph gallery is a collection of 200 simple charts made with d3.js, with reproducible, commented and editable code.
By Yan Holtz
What is d3.js
D3.js is a JavaScript library for manipulating documents based on data. Basically, it helps you build charts for the web based on HTML, SVG, and CSS.D3.js has been created by MikeBostock and its home is here.
D3.js is the standard tool for data visualization on the web. It allows to build absolutely any type of visualization, without any limits. Since it is run in the browser, it allows any type of interactivity: zooming, hovering, smooth transition and more.
A stacked area chart with zooming option. Code here
D3 is hard, we need simple examples
Learning d3.js is hard, there is no doubt about that. The learning curve is steep, and one of the most common way to learn it is to study examples.
D3.js already has awesome dedicated resources to get code examples: a wiki, a gallery and the very awesome block builder. Moreover, thousands of blocks are available online.
The d3 graph gallery aims to contribute to this documentation by providing a set of simple examples. While blocks are awesome to demonstrate the possibilities offered by d3, it is sometimes hard to find a basic example illustrating a single concept: the gallery hopes to fill the gap.
Hierarchical edge bundling built with d3: beautiful but tedious. Source
How the gallery works
About 300 charts are displayed in the gallery. They are classified in 40 sections: the main chart types described in data to viz.
For each chart type, a step-by-step approach is taken. Examples start with the most basic version one could ever think of, and subsequent examples get more and more complicated, always describing only one new specific concept. A section about interactivity is always provided, and links to interesting blocks are suggested at the end of the page.
For each example, the chart appears on the left at a static position, with its editable code located on the right. Editing the code will modify the chart in real time, allowing to quickly understand what role a piece of code has.
Basic density plot with editable code in the d3.js graph gallery
Technical details are provided under each chart. Main tricks are explained, with links to the related documentation. No consideration is given concerning data viz best practices, links toward data to viz are provided for this concern.
Code is extensively commented. Data and dependencies are stored online. It allows to copy and paste the code in a HTML file and make it works locally in seconds. Code snippets are thus ready to be applied to your data.
Conclusion
The d3 graph gallery is a project developed by Yan Holtz in his free time. It aims to make d3 more accessible to learners.The website is fully open source and lives on Github. Any feedback, comments, issues or even pull requests are highly welcome at yan.holtz.data@gmail.com or via twitter: @R_Graph_Gallery.
Bio: Yan Holtz is a passionate data analyst specialized in data visualization. He built data viz related website like the R, the Python and the D3.js graph galleries as well as data-to-viz. He can be reached at: yan.holtz.data@gmail.com.
Resources:
- On-line and web-based: Analytics, Data Mining, Data Science, Machine Learning education
- Software for Analytics, Data Science, Data Mining, and Machine Learning
Related: