Skip to main content

Creating Interactives with D3.js

John Williams (NewCity Media, Inc.)
Average rating: ****.
(4.20, 15 ratings)
Slides:   1-ZIP 

With Flash all but abandoned, we need new tools to take over the work Flash used to do. For highly designed, data-intensive, editorial interactive pieces, one of the best options is D3.

D3—the three ’D’s stand for “Data Driven Documents”—provides a set of low-level tools for binding data to DOM objects and manipulating attributes and style rules based on the shape of the data. This is distinctly different from most charting libraries, which let you build bar charts, graphs, and the like, because D3 puts all of the design work completely in your hands.

This comes at a price, and that price is a significant investment in learning and understanding the library. D3 involves Javascript, HTML, CSS, and SVG. It also uses a strong functional programming style, which can be confusing to people experiencing it for the first time.

This three hour workshop will cover the basics of using the library, as well as just enough information on SVG and functional programming to get us through. The goal is not to give you an expert-level knowledge of the library but enough familiarity to get you started and over several of the conceptual roadblocks common to beginners in the library.

John Williams

NewCity Media, Inc.

I am web developer who has worked for media, education, and government organizations for seventeen years. For the last seven I have been working for NewCity in Blacksburg, VA, assisting with several data visualization projects in bioinformatics.

Comments on this page are now closed.


John Williams
03/11/2014 3:30pm PDT

Thanks, Ryan!

Picture of Ryan Kirby
Ryan Kirby
03/11/2014 9:43am PDT

A question came up about modularizing d3. I remember this talk from last year’s fluentconf. Figured i’d share.

John Williams
03/08/2014 5:43am PST

Robert, you should not have to install anything. All of the examples except the larger integrated application we examine at the end are available as jsfiddles.

I have made HTML files of the examples you may want to download in case of spotty network access during the workshop. You can find those at .

Robert Stark
03/08/2014 4:45am PST

Quick Question, Is there anything I should do to prepare for this workshop…i.e. install anything on my local laptop etc. Looking forward to the workshop. Thanks.