BeeLabs/dataviz-course-2018

Online course on data visualization analysis, design & construction with D3.js.

Syllabus | Videos | Code | Slides | Canvas

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!

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
• 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