D3.js Meta Tutorial

seansmall by 

D3.js, the follow up to Mike Bostock’s impressive and useful Protovis library, is a fantastic tool for building web-based, dynamic, data visualizations consumable by the masses. However, as anyone not familiar with javascript, jQuery, SVG, CSS and/or HTML, getting anything up and running can be a challenge. While there are tutorials on the git hub page, these docs might assume a higher level of knowledge than many who are interested in visualizing some data. Below are some great tutorials and articles about working with D3.d3

Mere Mortals
This is simply one of the best and most detailed introductions to D3 that I have seen. Seriously, if you want to have a chance of building your own custom visualizations and not just hacking at someone else’s prebuilt example, read this article!

Luke Franci puts it best: “D3 has a steep learning curve, especially if (like me) you are not used to the pixel-precision of graphics programming. To build a visualization with D3, you need to understand JavaScript objects, functions, and the method-chaining paradigm of jQuery; the basics of SVG and CSS; D3′s API; and the principles for designing effective infographics.”

D3 Tutorial Set
Scott Murray offers up a great set of tutorials that walk you through a lot of the basics.

Data for D3
As Jerome Cukier says, “[p]utting your data in the right form is crucial to have concise code that runs fast and is easy to read” and this article discusses and shows different ways you can format data for use with D3. A highly recommended read!

Setting up your Development Environment
This is another excellent tutorial by Jerome Cukier focused on getting the development environment up and running (a crucial and often frustrating step).

D3 Workshop Slides by Mike Bostock
The following set of slides presents a “large swath of introductory material” that was initially given at the VIZBI 2012 conference on March 5th over 3 hours.

D3: Data-Driven Documents
This paper is the paper for citing D3 and describes a lot of the design decisions made and the rationale behind them.

The following two tabs change content below.

Sean Murphy

Senior Scientist and Data Science Consultant at JHU
Sean Patrick Murphy, with degrees in math, electrical engineering, and biomedical engineering and an MBA from Oxford, has served as a senior scientist at Johns Hopkins University for over a decade, advises several startups, and provides learning analytics consulting for EverFi. Previously, he served as the Chief Data Scientist at a series A funded health care analytics firm, and the Director of Research at a boutique graduate educational company. He has also cofounded a big data startup and Data Community DC, a 2,000 member organization of data professionals. Find him on LinkedIn, Twitter, and .
This entry was posted in Tutorials, Visualization and tagged , , . Bookmark the permalink.

4 Pingbacks/Trackbacks