MIDS W209 Information Visualization Slides

Slides source code for the W209 Information Visualization course of the Masters in Data Science at UC Berkeley. Designed by John Alexis Guerra Gomez and Andy Reagan.

Apart from the slides included in this code, you can also find below links to the videos and Observable notebooks used for each module

Video Playlists

• All videos covering D3, Vega-Lite JS API and Tableau by John
• Only the Vega-Lite JS API by John

Week 01: Introduction

Slides

Software Demos

Unit Number	Element Name	Presenter	Youtube Link	Content Link
1	Web Development for Visualization	John	link
1	Introduction to Observable	John	link
1	Introduction to D3	John	link
1	Introduction to Vega-Lite	John	link
1	Introduction to Python and Altair	Andy	link	slides
1	Introduction to Tableau	John	link

Week 02: What

Slides

Software Demos

Unit Number	Element Name	Presenter	Youtube Link	Content Link
2	Introduction to JavaScript	John	link
2	Introduction to JavaScript	John	link	observable
2	Introduction to JavaScript	John	link	observable
2	Introduction to JavaScript	John	link	observable
2	Nesting, Folding, Pivoting, etc.	John	link
2	Reshaping & Pivot Tables with Pandas	Andy	link
2	Data manipulation in Tableau	John	link
2	Introduction to Flask: Web basics	Andy	link
2	Introduction to Flask	Andy	link

Week 03: Why

Slides

Software Demos

Unit Number	Element Name	Presenter	Youtube Link	Content Link
3	Scalable Vector Graphics (SVG)	John	link
3	Canvas	John	link
3	WebGL	John	link
3	Setting up d3	John	link	observable
3	Setting up altair	Andy	link	collab
3	Setting up vega-lite	John	link	observable
3	Setting up Tableau	John	link	observable

All of the collaboratory files are here.

Week 04: How

Slides

Software Demos

Unit Number	Element Name	Presenter	Youtube Link	Content Link
4	Introduction to D3 Selections	John	link	observable
4	Marks & Channels in d3	John	link	observable
4	Marks & Channels in vega-lite	John	link	observable
4	Marks and Channels in Altair	Andy	link	collab
4	Marks and Channels in Tableau	John	link

Week 05: Rules_of_thumb

Slides

Software Demos

Unit Number	Element Name	Presenter	Youtube Link	Content Link
5	D3: Axis, Data Binding	John	link	observable
5	D3: Modularization	John	link
5	D3 Extra: Deploying to NPM	Andy	link
5	Vega-Lite-API: Axis, Headers, Config	John	link
5	Altair: Axis, Headers, Config	Andy	link	collab
5	Tableau: Calculated Fields, LOD Functions	John	link

Week 06: Tabular

Slides

Software Demos

Unit Number	Element Name	Presenter	Youtube Link	Content Link
6	D3 Path	John	link	observable
6	D3 Other Scales	John	link
6	D3 Creating a Histogram	John	link
6	D3 Stack and Other Layouts	John	link
6	D3 Circular and Spiral	John	link
6	Vega-Lite-API Path	John	link
6	Altair API	Andy	link	collab
6	Tableau Histrograms, Stacked, and Radial	John	link

Week 07: Time

Slides

Software Demos

Unit Number	Element Name	Presenter	Youtube Link	Content Link
7	Time with d3	John	link
7	Time with d3 2	John	link	observable
7	Time with vega-lite	John	link	observable
7	Altair Temporal Pt 1	Andy	link	collab
7	Altair Temporal Pt 2	Andy	link	same ^
7	Time with tableau	John	link

Week 08: Networks_and_Color

Slides

Software Demos

Unit Number	Element Name	Presenter	Youtube Link	Content Link
8	Networks with d3	John	link	observable
8	Networks with vega-lite	John	link	observable
8	Networks with altair	Andy	link	collab
8	Networks with tableau	John	link	observable
8	Color with d3	John	link
8	Color with vega-lite	John	link
8	Color with altair	Andy	link
8	Color with tableau	John	link

Week 09: Trees_and_Geo

Slides

Software Demos

Unit Number	Element Name	Presenter	Youtube Link	Content Link
9	Trees with d3	John	link	observable
9	Trees with vega-lite	John	link	observable
9	Trees with altair	Andy	link	collab
9	Trees with tableau	John	link
9	Geo with d3	John	link
9	Geo with vega-lite	John	link	observable
9	Geo with altair Pt 1	Andy	link	collab
9	Geo with altair Pt 2	Andy	link	collab
9	Geo with tableau and mapbox	John	link

Week 10: Manipulate_Views

Slides

Software Demos

Unit Number	Element Name	Presenter	Youtube Link	Content Link
10	Animations on the Web With D3 Transitions: Tweening and Flubber	John	link	observable
10	Vega-Lite Animations	John	link
10	Animations With Tableau	Andy	link	Based on this recreation of Gapminder

Week 11: Faceting

Slides

Software Demos

Unit Number	Element Name	Presenter	Youtube Link	Content Link
11	How to Scroll	John	link
11	D3 Faceting	John	link
11	Vega-Lite Faceting	John	link
11	Faceting with altair 1	Andy	link	collab
11	Faceting with altair 2: Dashboard inside Collab	Andy	link
11	Faceting with altair 3: Build a dashboard	Andy	link
11	Faceting with tableau	John	link

Week 12: Evaluation

Slides

Week 13: Reducing

Slides

Software Demos

Unit Number	Element Name	Presenter	Youtube Link	Content Link
13	Crossfilter	John	link	observable
13	Filtering Items and Attributes in Javascript	John	link
13	Tableau Data Preparation	John	link

Week 14: Advanced

Slides

Software Demos

Unit Number	Element Name	Presenter	Youtube Link	Content Link
14	Visualization for Machine Learning	Andy	link
14	Deploy AWS EC2 Server using AWS Console	Andy	link
14	Deploy AWS EC2 Server using Terraform	Andy	link
14	Python Flask on AWS EC2	Andy	link
14	Full-stack with Nginx, UWSGI, Flask	Andy	link

Vis for ML links:

• https://en.wikipedia.org/wiki/Q%E2%80%93Q_plot
• https://towardsdatascience.com/understanding-auc-roc-curve-68b2303cc9c5
• https://www.listendata.com/2014/08/excel-template-gain-and-lift-charts.html
• https://scikit-learn.org/stable/auto_examples/ensemble/plot_forest_importances.html
• https://playground.tensorflow.org/
• https://distill.pub/2019/activation-atlas/
• https://distill.pub/2017/feature-visualization/
• https://github.com/marcotcr/lime
• https://christophm.github.io/interpretable-ml-book/shapley.html
• https://arxiv.org/pdf/2008.02250.pdf

Notes

How to embed a youtube video with the screenshot in markdown:

How to embed slides with HTML, can control the width more easily:

How to embed slides with markdown: