uas-workshop-logo-01

Welcome to the D3js Workshop!

Data Driven Documents (D3) is a powerful JavaScript library that allows the user to bind data to elements of an webpage to create dynamic charts, maps, graphs, and visualizations. D3 is the creation and brainchild of Mike Bostock, formerly a graphics editor of the New York Times who now devotes his time to web visualizations. Online visualizations are proving an excellent and engaging medium for telling stories that quickly communicate complex messages to users, and represent one of the many ways that data is being integrated into online applications and used to influence policy and society.

D3 Cluster Force Diagram Example (Click to view this example on its own.)

For rich examples of what D3 is and can do, see the links and visualizations embedded on this page and in the tutorials below, or better yet, go check out the D3 Gallery on the D3 Homepage and Mike Bostocks D3 blocks for an incredible number of fun and engaging interactive graphics.

Learning D3

This series of workshops introduces the fundamentals of D3 from the ground up. We will walk through the process from the start, creating a webpage, adding elements, and binding data to those elements (but not always in that order!). These workshop sessions are designed to complement your other coursework and project work in DUSP and will use a handful of techniques, centered around the D3 library. We will begin with introducing D3, showcasing what it can do, then move into creating charts, graphics, visualizations, and maps.

Obama’s 2013 Budget Proposal
Source: New York Times

D3 is not the easiest JavaScript library to learn, and certain things might be confusing to beginners. We recommend you gain some familiarity with JavaScript by running through a beginner tutorial at Codecademy. That said, D3 is a widely used, well documented language, and a large, growing amount of material can found online. This resource and the following tutorials will contain many links to outside resources, supplemental documentation, and additional tutorials that can help you become a D3 master! See the links below for references and recommended additional tutorials.

The America’s Cup Finale: Oracle’s Path to Victory
Source: New York Times

About this Resource

Link to tutorials, examples, and datasets on Github

This resource contains four modular sessions introducing D3. The sessions are best taken in order and can be completed on your laptop machine or on a cron workstation. The software used is generally free and easy to install. A basic understanding of modern website design and structure using HTML, CSS, and JavaScript is helpful. A small handful of suggested prerequisites is listed in the series below. Alot of the basics will also be covered in the first sessions.


Workshop Series

Each workshop is modular and designed to stand independently as a resource online. See below for the session topics, tutorials, and materials.


    1 - Make a Bar Chart: An Introduction to D3 and Data Binding

    An introduction to what D3 is, and what it isn't. This session will get you started, showing how to setup a document and development environment, work with selectors, create elements, and visualize a basic dataset.

    2 - Scatterplots and More: Working with Scales and Domains

    This session focuses on another data visualization staple, the scatterplot, and how you can use scales and domains to account for changing datasets.

    3 - Engaging the User! Interactions, Animations, and Transitions

    This session will showcase events in your visualization and walk through some simple interactions, including click events, transitions, and basic data sorting.

    4 - Mapping Data with D3

    D3 supports mapping and the creation of web maps and visualizations! We will walk through the creation of a simple map in D3, add a dataset, stylize the map, and include some user events like what happens when a user clicks on a data point.


Materials and examples for all of the exercises on Github


Steal Some Code

The following sites provide great examples and all of the associated code that you can grab and use for your projects. Remember to provide attribution when you 'borrow' someone elses fantastic work!


D3 JavaScript API Reference


Tutorials and Other Resources


Contact Mike Foster (mjfoster@mit.edu) with questions.


Return to DUSPVIZ tutorials page