Datavis 2020

Episodes in YouTube Playlist

Datavis 2020 is a free online course about how to conceptualize, design, and build interactive data visualizations with Web technologies. Anyone can join this course and it’s completely free, public, Open Source. The “hidden agenda” is to drive users to, which may offer paid features in the future but for now is completely free to use.

See also the previous iteration of this course, which used purely D3: Data Visualization Course 2018.

Course launch video

To Join This Course

  • Join the D3 Slack Group
    • Submit your email, follow link from email, sign in.
  • Join the #datavis-2020 channel there
    • This is our “course Slack channel”.
  • Introduce yourself in the course Slack channel
    • What’s your name? Where are you from?
    • What’s your profession?
    • Why are you interested in this course?
    • What do you hope to get out of this course?

Tentative Curriculum

Textbook: Visualization Analysis and Design

  • Course Overview
  • What is Visualization
  • Introduction to Web Technologies
  • Let’s Make a Face Part I – Intro to HTML & SVG
  • Let’s Make a Face Part II – Using React & D3
  • Let’s Make a Face Part III – Components and Modules
  • Preparing Data for Visualization
  • Interaction with React
  • Inputs for Visualization
  • Loading and Parsing Data
  • Introduction to Vega Lite API
  • Marks & Channels
  • Loading Data with React & D3
  • Rendering Data with React
  • Visualizing Data with React & D3
  • Bar Chart Part I – Scales
  • Bar Chart Part II – Axes
  • Bar Chart Refactored
  • Stylized Bar Chart
  • Making a Scatter Plot
  • Working with Time
  • Making a Line Chart
  • Preparing Geospatial Data
  • Making a World Map with React & D3
  • Using Color in Visualization
  • Menus with React
  • Scatter Plot with Menus
  • Polished Scatter Plot with Menus
  • Effective Visualization
  • Scatter Plot with Color
  • Making a Color Legend
  • Interactive Color Legend
  • Points on a Map
  • Using Size
  • Missing Migrants
  • Missing Migrants Part II – Aggregation
  • Missing Migrants Part III – On a Map
  • Multiple Views
  • Why Use Modules
  • Multiple Views Cleanup
  • Multiple Views with Brushing
  • React Performance Optimization
  • Log Scales
  • Making a Choropleth Map