Data Visualization with D3.js

New York City

September 12 - October 19
Mondays & Wednesdays
6:30pm - 9:30pm
$2,500

San Francisco

COMING SOON

Enroll Get Info
COURSE DESIGNED BY KEVIN QUEALY
Graphics Editor, The New York Times

Check out some of Kevin's favorite pieces he and his colleagues have created:

NYT 4th Downbot

N.F.L. Playoff Simulator

The Best and Worst Places to Grow Up: How Your Area Compares

At Chipotle, How Many Calories Do People Really Eat?

Where We Came From and Where We Went, State by State


You can view more of Kevin's data visualization articles for The New York Times here.


YOUR INSTRUCTORS
  • Paul Buffa

    New York City

  • Kai Chang

    San Francisco

COURSE OVERVIEW

This is a course about data visualization and D3, the powerful Javascript library frequently used to create data visualizations on the web. We use the library extensively at the Times – its creator, Mike Bostock, was a colleague of Kevin's for three years.

D3 can be challenging to learn, and lots of the difficulty comes with learning syntax and understanding data joins, probably the most fundamental aspect of D3. On top of that, there are the headaches associated with what Hadley Wickham has called the "fiddly bits" of charts: scales, axes, labels, annotations and the like. These basically come for free with software like Excel, R, Chartbuilder or Data Wrapper, but with D3 you're in charge of every pixel, which makes it incredibly powerful.

WHY D3?

Ultimately, the reason to learn D3 instead of or in addition to those other (great!) programs is because it enables you to tell stories and communicate information interactively in ways that are simply not possible outside a web browser. Making these kinds of applications is worth a little bit of extra headaches up front.

WHO IS THIS COURSE FOR?

This is a course for anyone who wants to be proficient in the use of D3 and seeks expertise visualizing quantitative information. This course will not make you a data scientist. (For that, Metis offers a licensed, accredited bootcamp).

About a third of our course will be discussions and theory. We'll read from classic data visualization texts, discuss the merits and flaws of work published at some of the world's best institutions and get a strong understanding of effective visual communication.

So even if you're already an expert at Javascript and D3, this course will help you select the right form, hone in on the best way to communicate your idea, and build it!

PREREQUISITIES

This course is open to beginners, but students should have experience writing HTML, CSS and basic JavaScript. For HTML/CSS, you should know how to work with the DOM and be familiar with CSS selectors. For Javascript, you should be familiar with variables, data types, arrays, loops and conditional statements, and you should have worked with functions and objects. For Git and GitHub, you should be familiar with forking, cloning, pull requests, and branches. Finally, you should have a general idea of working with and manipulating structured data.

If you don't yet have this familiarity, we suggest completing some of the following free tutorials in advance of the course start:

The Details

The 36-hour course is held on Monday and Wednesday evenings from 6:30pm - 9:30pm at Metis in both San Francisco and New York City where the Metis Data Science Bootcamps and other evening courses are also held.
San Francisco: 633 Folsom Street, 6th Floor.
New York City: 27 East 28th Street, 3rd Floor.

The Outcome

    Upon completing the Data Visualization with D3.js course, students will have:
  • A working conceptual understanding of the field of data visualization, particularly as it relates to the internet and mobile devices.
  • Deep knowledge of the forms and techniques of data visualization and effective display of quantitative information; specifically, bar charts, scatterplots, area charts, line charts, choropleth and bubble maps, small multiples, annotation principles; and the strengths and weaknesses of each.
  • Proficiency in using D3 to make static and interactive charts and documents, and in using JavaScript to process and manipulate data.

Total Cost: $2,500

COURSE STRUCTURE AND SYLLABUS

Learning to make charts form by form – scatter plots, then bar charts, then line charts, and so on – is not the most creative way to learn about data visualization. But because the course is so technical, this structure will help provide a foundation we can build on each week.

Each class will roughly be split into two. Half will be discussions and a hands-on, computers off activity about that week's subject, and half will be a deeply technical guided lab making things in D3.

Week 1 | Getting Started and Learning About New Problems

We'll do boring things like configure our computers, make our first charts, understand why data joins are helpful and get a sense of all the things we need to learn.

  • Introduction, configuring machines, intro to data visualization
  • Making our first chart...scatterplots
  • Charting and intent
  • Bar charts
  • The fuddly bits: axes, formatting, etc.
Week 2 | Enough to be Dangerous: Mastering Basic Forms

If you want to be good, you really only need to be good at making a few kinds of forms: bar charts, line charts, scatterplots and maybe a histogram. We'll make demos of all of these and understand when to use which.

  • Line + area charts
  • Histograms
  • Tables to line + area charts
Week 3 | Data Sketching and Traversing Data Structures

Since your computer is drawing the charts instead of you, making 100 charts is as easy as making 1. We'll explore the power of exploratory sketching and the data manipulation you'll need to be able to master to do so.

  • Making things move
  • Sketching in the browser and making applications that scale
Week 4 | Maps

Mapping with D3 has exploded in the last few years. We might not explore Great Circle Arc Intersects, but we'll learn how to make bubble maps, choropleth maps and create topojson files from scratch.

Week 5 | Making Dynamic Content

Most things don't need to be interactive, but when they do, you'll be ready. We'll use D3 to make dynamic charts and applications that let us answer questions and solve problems that couldn't have happened in a printed format.

  • Data Visualization on Mobile Devices
  • D3 and Node
Week 6 | Editing and Publishing an Idea

Here, we focus on honing ideas and making publication-grade data visualizations. We'll work on small touches, like custom annotations and styles, managing your data visualizations on mobile devices, incorporating feedback and pitching work for publication. We'll also do a "show and tell" of projects we've been working on throughout the 6 weeks.

  • Pushing the envelope
  • Project show-and-tell
Enroll Get Info