Syllabus | Videos | Code | Slides | Canvas

Also check out 👉 Datavis 2020.

All code is MIT Licensed, and all other content is Creative Commons Attribution Licensed.

Feel free to use any of this material for your own teaching or work!

If you prefer a single 13-hour video, check out this compilation video from FreeCodeCamp, which contains the exact same video content as the links below.

Week 1

• Data Visualization 2018 Course Overview - YouTube (8 min)
  • Slides for Data Visualization 2018 Course Overview - Google Drive
  • Data Visualization Online @ WPI 2018 - Medium - Contains links to examples shown.
• Intro to Javascript in 2018 - YouTube (1.5 hours)
  • Slides for Intro to Javascript in 2018 - Google Drive
  • Cars Report Code - VizHub
• Intro to HTML, CSS & SVG - YouTube (35 min)
  • Slides for Intro to HTML, CSS & SVG - Google Drive
  • HTML Cars Report - VizHub
  • Shapes with SVG and CSS - VizHub
  • Google Color Picker
• Intro to D3.js - Let's Make a Face! - YouTube (45 min)
  • Slides for Intro to D3.js - Let's Make a Face! - Google Drive
  • Let's make a face with D3.js! - VizHub

Week 2

• Why Visualize Data? - YouTube (12 min)
  • Slides for Why Visualize Data? - Google Drive
• Inputs for Data Visualization - YouTube (15 min)
  • Slides for Inputs for Visualization - Google Drive
• Making a Bar Chart with D3 & SVG - YouTube (30 min)
  • Slides for Making a Bar Chart with D3 & SVG - Google Drive
  • Making a Bar Chart - VizHub

Week 3

• Uploading Datasets to VizHub - YouTube (7 min)
  • Data Table Summary - VizHub
  • Auto MPG Summary - VizHub
• Customizing Axes of a Bar Chart with D3.js - YouTube (26 min)
  • Customizing Axes - VizHub
  • The Sunlight Foundation's Data Visualization Style Guidelines (pdf)
• Making a Scatter Plot with D3.js - YouTube (25 min)
  • Cars Scatter Plot - VizHub

Week 4

• Making Line and Area Charts with D3.js - YouTube (30 min)
  • Temperature in San Francisco Scatter Plot - VizHub
  • Temperature in San Francisco Line Chart - VizHub
  • Temperature in San Francisco Area Chart - VizHub
  • World Population Area Chart - VizHub
• The General Update Pattern of D3.js - YouTube (1 hour)
  • Slides for The General Update Pattern of D3.js - Google Drive
  • Bowl of Fruit - General Update Pattern - VizHub
  • Bowl of Fruit - Animated Transitions - VizHub
  • Bowl of Fruit - General Update Pattern Special Cases - VizHub
• Marks & Channels in Data Visualization - YouTube (25 min)
  • Slides for Marks & Channels in Data Visualization - Google Drive

Week 5

• Interaction with Unidirectional Data Flow - YouTube (16 min)
  • Slides for Interaction with Unidirectional Data Flow - Google Drive
  • Bowl of Fruit - Click to Select - VizHub
  • Bowl of Fruit - Hover to Select - VizHub
• Making a World Map with D3 - YouTube (18 min)
  • Slides for Making a World Map - Google Drive
  • Let's make a map with D3.js! - VizHub
• Cheap Tricks for Interaction on a D3.js World Map - YouTube (23 min)
  • Slides for Cheap Tricks for Interaction - Google Drive
  • Cheap Tricks for Interaction - VizHub
• Blank Canvas - YouTube (5 min)
  • Blank Canvas - VizHub
• Building a Tree Visualization of World Countries - YouTube (35 min)
  • Slides for Building a Tree Visualization of World Countries - Google Drive
  • World Countries Tree - VizHub

Week 6

• Using Color in Visualization - YouTube (17 min)
  • Slides for Using Color in Visualization - Google Drive
  • Akiyoshi Kitaoka Visual Illusions - Twitter
• Color and Size Legends with D3.js - YouTube (30 min)
  • Color and Size Legends - VizHub
• Choropleth Map with D3.js - YouTube (32 min)
  • Slides for Choropleth Map
  • Choropleth Map - VizHub
• Interactive Filtering on a Choropleth Map - YouTube (45 min)
  • Choropleth Map with Interactive Filtering - VizHub

Week 7

• Scatter Plot with Menus - YouTube (46 min)
  • Scatter Plot with Menus - VizHub

Week 8

• VizHub 1.0 - YouTube (20 min)
  • VizHub 1.0 - Medium
• Circles on a Map - YouTube (42 min)
  • Circles on a Map - VizHub
• Line Chart with Multiple Lines - YouTube (24 min)
  • Line Chart with Multiple Lines - VizHub

Week 9

• Melting and Munging Data with JavaScript - YouTube (29 min)
  • Melting and Munging Data with JavaScript - VizHub
• Map with Selectable Countries - YouTube (12 min)
  • Map with Selectable Countries - VizHub
• Selecting a Year on a Line Chart - YouTube (28 min)
  • Selecting a Year on a Line Chart - VizHub