Web Development with D3.js


Dates: Tuesdays & Thursdays, November 6th, 8th, 13th, 15th
Times: 6pm – 9pm
Course Length: 12 hours
Cost: $20/instruction hour, $240 total, $216 for GAFFTA Members
Location: GAFFTA, 923 Market Street, Ste. 200 San Francisco, CA 94103

Select ticket option


This workshop will introduce you to d3.js for creating data visualizations and vector graphics in the browser.

// About d3

d3.js is a JavaScript library for manipulating documents based on data. d3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Days 1 & 2: Turning .csv files into bar charts and scatterplots

- load a csv & use JSON
- draw rectangles
- make scales, map data to pixels
- make axes
- add labels
- complete a bar chart
- draw circles
- complete a scatter plot

Days 3 & 4: Smooth transitions and interaction

- perform basic transitions on visual properties
- trigger transition with change in data
- add some mouse interactions
- add tooltips
- link visual elements through interaction
- BONUS: touch interaction

// Course Materials:

This will be an interactive course, so you’ll need your laptop and a modern browser. We will use Python to run a simple local webserver, so it would save time to have Python installed before coming.

Ian Johnson


Ian Johnson is a data visualization programmer and designer. His passion is building tools that make the creation of audio, visual, and data-driven media more intuitive and engaging for both programmers and non-programmers. As an active user in the d3.js community, he co-organizes the SF Bay Area d3 Meetup and hones his skills by helping startups visualize their data with his colleagues at the Mainstem Collective.