These tutorials address an older version of D3 (3.x) and will no longer be updated. See my book Interactive Data Visualization for the Web, 2nd Ed. to learn all about the current version of D3 (4.x).
These tutorials aim to be
- Brief
- Focused, each addressing a single topic
- Modular, so you can reference only the topics relevant to your goals
- Complete, with sample code illustrating each topic
- Dynamic, updated and expanded as needed [Sorry, no more updates!]
- Free, licensed so you can use the code however you wish
Philosophy
These tutorials evolved out of my own process of learning how to use D3. You already know that D3 is an extraordinary tool for mapping data within web pages, written by Mike Bostock. Many people, including myself, come to D3 with backgrounds in design, mapping, and data visualization, but not programming and computer science.
Yet D3 employs advanced JavaScript techniques, so learning to use D3 often means learning a lot about JavaScript. For many datavis folks, D3 is their introduction to JavaScript. It’s hard enough to learn a new programming language, let alone a new tool built on that language. D3 is amazing and will enable you to do great things with JavaScript that you never would have even attempted. The time you spend learning both the language and the tool will provide an incredible payoff.
My goal is to reduce that learning time, so you can start creating awesome stuff sooner.
You
Hopefully, you
- are familiar with HTML, the DOM, and CSS
- have a little programming experience already
- have even heard of jQuery or written some JavaScript before
- aren’t scared by unknown initialisms like CSV, SVG, or JSON
- want to make useful, interactive visualizations
Structure
Each tutorial includes
- A standalone demo page (if relevant)
- Code to copy and tweak
- Lots of comments everywhere
- The date it was last updated
License
You are welcome to copy, adapt, modify and reuse the example code in these tutorials for whatever purpose you like, commercial or otherwise. For all other tutorial content and design, however, I retain the copyright.
Disclaimer
In service to all of the above, I may gloss over some technical points, grossly oversimplifying important concepts fundamental to computer science in ways that will make true software engineers recoil. That’s fine, because I’m writing for artists and designers here, not engineers.
Next up: Fundamentals →
These tutorials address an older version of D3 (3.x). See my book Interactive Data Visualization for the Web, 2nd Ed. to learn all about the current version of D3 (4.x).
Download the sample code files and sign up to receive updates by email. Follow me on Twitter for other updates.
These tutorials have been generously translated to Catalan (Català) by Joan Prim, Chinese (简体中文) by Wentao Wang, French (Français) by Sylvain Kieffer, Japanese (日本語版) by Hideharu Sakai, Russian (русский) by Sergey Ivanov, and Spanish (Español) by Gabriel Coch.