5 Reasons to Learn D3.js
D3 stands for Data-Driven Documents and is widely used to create interactive data visualizations on the web. Its main author, Mike Bostock, is a New York Times graphics editor. In other words, D3 is used by top people in the field.
Learning D3 can take time, especially if you have no prior web development experience. Hence, D3 is probably not for people who want to just quickly expand their visualization skills. (But there are other pathways for learning interactive visualization skills.)
But don’t let that scare you away just yet. You haven’t even gotten to the koalas! So check out the eye candy below, regardless of what learning pathway you choose. Now back to the top 5 reasons for learning D3…
1. Lots of examples.
Here’s a secret (sssh!) about creating great data visualizations: take ideas from other examples you’ve liked! That’s often the most effective way to make you look like and become a master data visualizer.
And that’s the great news about D3: there are thousands - thousands! - of great D3 examples to work from. That scatterplot example? Yup that was D3. The New York Times’ 512 paths to the White House visualization? Yup D3. Visualization of gendered language in RateMyProfessor reviews? You should know the answer by now.
See excellent curated lists of D3 examples here and here. Many of these examples are posted online because developers want others to re-use their code. Just be sure to give credit where credit is due :)
2. Vibrant open-source community.
When I have a question about D3 (“How do I use D3 together with Leaflet???”), I often Google the issue and then quickly find a great StackOverflow or blog post that addresses it. These extensive (free!) resources are available because of the very large and vibrant open-source community behind D3.
D3 has been forked over 9,000 times on Github, meaning that other developers are also constantly extending D3. For instance, third-party “wrapper” libraries such as NVD3 and Vega aim to speed up development time for creating common types of D3 visualizations. These wrapper libraries sometimes have limited customizability, but that may not be a concern depending on the project.
3. Seriously, so many examples.
OK enough text for now. More eye candy! Remember the promise of koalas? Well find them by splitting circles with your mouse cursor below. All the examples below used D3.
The showreel below is also gratuitous eye candy, but also shows a range of charts for showing time series comparisons (original link).
I was suprised to see how lopsided PAC contributions were to some individual senators: click the “Senate” button in the upper left-hand corner to see (original link).
4. Knowing D3 = hirable skills.
And even if a job doesn’t specifically ask for D3 skills, think about how you could leverage that experience anyway in an interview. For instance, D3 can be used to improve a company’s website or communicate complex data to business partners and investors.
5. Opportunity to learn web development skills.
You learn these broader skills because D3 exposes you to the internals of a webpage. In more technical terms, D3 doesn’t use an “intermediate” representation. It instead directly manipulates elements on the Document Object Model (DOM), which is basically just a fancy term for everything that is currently shown on a webpage.
The same confusion doesn’t happen with D3. When you append a “circle” using D3, you really are adding a “circle” to the webpage, not some mischievous “path” masquerading as a “circle.” I’ll talk more about this in the next post about how to learn D3!
Bottom line: you learn a lot about foundational web skills when learning about D3, unlike some other visualization frameworks.