Datavis 2020 is a free online course about how to conceptualize, design, and build interactive data visualizations with Web technologies.
See also the previous iteration of this course, which used purely D3: Data Visualization Course 2018.
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?
Course Content
YouTube Playlist Slides in Google Drive
Video: Datavis 2020 Course Launch
Episode 1 – What is Data Visualization
Viz: Locations of Datavis 2020 Students
Episode 3 – Finding Visualizations
Blog: Visualizations of Current Events
Episode 4 – Introduction to Web Technologies
Episode 5 – Let’s Make a Face Part I (HTML, CSS, SVG)
Start Viz: Hello HTML End Viz Smiley Face Part I
Episode 6 – Let’s Make a Face Part II (React)
Start Viz Smiley Face Part I End Viz Smiley Face Part II
Episode 7 – Let’s Make a Face Part III (React & D3)
Start Viz Smiley Face Part II End Viz Smiley Face Part III
Episode 8 – Let’s Make a Face Part IV (React Components & ES6)
Start Viz Smiley Face Part III End Viz Smiley Face Part IV
Episode 9 – Let’s Make a Face Part V multiple files with ES6 modules
Start Viz Smiley Face Part IV End Viz Smiley Face Part V
Episode 10 – Let’s Make a Face Part VI (Compartmentalizing Complexity)
Start Viz Smiley Face Part V End Viz Smiley Face Part VI
Episode 11 – Coronavirus Dataviz Hackathon Part I (Coronavirus Dataviz)
Episode 12 – Preparing Data for Visualization
Episode 13 – Loading Data with Fetch, Promises, Aync & Await
Episode 14 – Interaction With React
Episode 15 – Parsing CSV Data with D3
Episode 16 – Loading Data in React
Episode 17 – Inputs for Visualization: Data and Tasks
Episode 18 – Iterating Fast with Vega Lite API
Episode 19 – Marks and Channels
Episode 20 – Visualizing Data with React & D3
Episode 21 – Making a Bar Chart with React & D3
Episode 23 – Refactoring a Bar Chart
Episode 24 – Stylized Bar Chart
Episode 25 – Making a Scatter Plot
Episode 26 – Working with Time
Episode 27 – Making a Line Chart
Episode 28 – Preparing Geospatial Data
Episode 29 – Making a World Map with React & D3
Episode 31 – Scatter Plot with Menus
Episode 32 – Polished Scatter Plot with Menus
Episode 33 – Scatter Plot with Color
Episode 34 – Making a Color Legend
Episode 35 – Interactive Color Legend
… This list may be out of date. See YouTube Playlist for the latest.
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