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.
Examples for all of the sessions can be found in this repository.
Each workshop is modular and designed to stand independently as a resource online. See below for the session topics, tutorials, and materials.
Suggested Prerequisite: Codecademy JavaScript Tutorial
1 - Introducing D3: What are Data Driven Documents? (Make a Chart)
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 - Loading Data and Stealing Code
There is no need to reinvent the wheel! Building on the previous session, we will continue our fundamentals by adding a larger dataset in CSV format, covering a few more fundamentals, then end with copying and modifying examples you find on the web.
3 - [Engage the User! Interactions, Animations, and Transitions] (http://duspviz.mit.edu/d3-workshop/transitions-animation/)
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] (http://duspviz.mit.edu/d3-workshop/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.