Data Visualization with D3.js

Course: Metis Data Visualization
City: New York, NY
Dates: 8/15/17 - 9/21/17

Creator Based on course materials by Kevin Quealy
Instructor: Paul Buffa

About Me

  • Data Visualization Engineer @ Capital One
  • Instructor at Metis
  • Former Data Scientist at Kaplan and TA for the Metis Data Science Bootcamp

What is D3?

Data Driven Documents

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.

Why D3?

from D3.js...

D3 is not a monolithic framework that seeks to provide every conceivable feature. Instead, D3 solves the crux of the problem: efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, exposing the full capabilities of web standards such as HTML, SVG, and CSS. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation. D3’s functional style allows code reuse through a diverse collection of components and plugins.

Let's go head-to-head with Google Charts vs D3

Prerequisites

  • HTML
  • CSS
  • Javascript

++A if you have experience with Web Dev, Design, Data Analysis and Github

Course Syllabus

Schedule

WEEK 1 Getting Started & Learning about New Problems We'll 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 – a scatter plot
  • Charting and intent
  • Bar charts
  • The fiddly bits: axes, formatting, etc.

WEEK 2 Enough to be Dangerous: Mastering Basic Forms If you want to be good at data viz, you need to master bar charts, line charts, scatter plots, and histograms. We'll make demos of each and learn when to use which.

  • Line + area charts
  • Histograms
  • Tables to line + area charts

WEEK 3 Data Sketching & Traversing Data Structures Since your computer is drawing the charts instead of you, making 100 charts is as manageable as making 1. We'll explore the power of exploratory sketching and the data manipulation you'll need to know in order to use it.

  • 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'll learn how to make bubble maps, choropleth maps, and will create topojson files from scratch.

WEEK 5 Making Dynamic Content We'll use D3 to make dynamic charts and applications that let us answer questions and solve problems that wouldn’t be possible in a printed format.

  • Data visualization on mobile devices
  • D3 and Node

WEEK 6 Editing & Publishing an Idea In our last week, we’ll 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.