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 - Bar Charts: An Intro to D3
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.
This session will showcase events in your visualization and walk through some simple interactions, including click events, transitions, and basic data sorting.
3 - [Transitions and Animations] (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. In the process we will work through examples of transition visualizations from one dataset to another.
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.