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