The Hitchhiker’s Guide to d3.js
The Hitchhiker’s Guide to d3.js
The landscape for learning d3 is rich, vast and sometimes perilous. You may be intimidated by the long list of functions in d3’s API documentation or paralyzed by choice reviewing the dozens of tutorials on the home page. There are over
If all you need is a quick bar or line chart, maybe this article isn’t for you, there are plenty of charting libraries out there for that. If you’re into books, check out
This guide is meant to prepare you mentally as well as give you some fruitful directions to pursue. There is a lot to learn besides the d3.js API, both technical knowledge around web standards like HTML, SVG, CSS and JavaScript as well as communication concepts and data visualization principles. Chances are you know something about some of those things, so this guide will attempt to give you good starting points for the things you want to learn more about.
Communicate Complex Concepts
Before we dive into data visualization principles and technical skills, lets take a second to be aspirational. There are some amazing examples of what’s possible in this medium, whether its a New York Times article, r2d3, distill.pub, datasketch|es, polygraph, or ncase. Be sure to leave a comment with any inspirations I didn’t list here!
Don’t just look to others though, one of the most important things you can do is set an aspiration for yourself. I found out from interviewing some of the top data visualization practitioners using d3.js that one of the best ways to learn is to set your sights something you really want to build and figure out what you need to build it.
Visual Representations
D3 does not introduce a new visual representation. Unlike Processing, Raphaël, or Protovis, D3’s vocabulary of graphical marks comes directly from web standards: HTML, SVG, and CSS — http://d3js.org
Charts are just rectangles with shapes inside of them. There are a handful of configurations of those shapes we recognize as common charts or graphs. What d3 provides is a way to define your own visual representations by manipulating graphical marks or creating your own shapes. It makes it easy to add interactions to visuals and declare how your visuals behave. You are here to learn how to express things that aren’t possible to express in any other medium.
If you want to learn about some of the principles behind the different kinds of marks and graphical representations people use, you can’t go wrong exploring the Grammar of Graphics.
Don’t worry though, there are a ton of creative things you can do with just circles, rectangles and some careful positioning. Start simple, always try to get something to show up on the screen and build up from there.
On the web
One of the reasons you want to use d3.js is so you can share your work instantly with anyone who uses a web browser (at least half of the people on Earth!). That means you need to have at least a passing understanding of the medium you’ll be working in, which is HTML5. So before you even start calling d3 API functions you’ll need some basics in SVG, HMTL and CSS. You’ll probably also want to learn some Canvas if you want to be serious about rendering a lot of data (don’t worry, its actually kind of easier to learn than SVG). I recommend this is a great intermediate tutorial on using d3 with Canvas after you are comfortable with the basics of both.
For SVG I recommend starting with this short but sweet SVG primer by Scott Murray. Play around with manually creating SVG elements and seeing how they work. Use a tool like BlockBuilder to quickly get started without setting up any kind of development environment. You may want to refer to the MDN reference site for SVG. Once you’ve mastered the basics, check out SVG beyond mere shapes by Nadieh Bremer.
You don’t have to use SVG to make your visualization, it’s relatively common to manipulate HTML elements like <div> tags with d3. You will need to be familiar with CSS positioning to make it work well. You can even mix HTML, SVG and Canvas all at once!
It can be a bit overwhelming to figure out which rendering system you should use, and even how to use any one of them. I’m going to reiterate the importance of knowing basic HTML, CSS, SVG (and a little Canvas) before getting started with d3.js!