MIDS_W209_Information_Visualization_Slides
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
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:
