Learning Vis Tools

Teaching Data Visualization Tutorials

Leo Yu-Ho Lo, Yao Ming, Huamin Qu

VIS 2019 Vancouver

HKUST

VISLAB

This is a special topic. Yet, it is a common and important topic among us.

I am the TA of the data visualization course at HKUST

# Background

In our course, course project takes up 50% of the grade

Students need to deliver a visualization project on a dataset of their own choice.

And we need to provide they the skills they need to deliver the project.

Before deciding what to teach, we need to know our audience

Here is the situation of our data visualization course

A Class of 51 Students

Computer Science & Engineering

69%

Science

14%

Business

12%

Others

2 to 4 years (41%)

1 to 2 years (37%)

Programming Exp.

> 4 Years (16%)

< 1 year

Exp. in R (22%)

Python (86%)

JavaScript (53%)

Java (55%)

We have 51 students in our class.

And the immediate challenge is their diverse professions, which includes 30% of the students are from business and science school.

A Class of 51 Students

Computer Science & Engineering

69%

Science

14%

Business

12%

Others

2 to 4 years (41%)

1 to 2 years (37%)

Programming Exp.

> 4 Years (16%)

< 1 year

Exp. in R (22%)

Python (86%)

JavaScript (53%)

Java (55%)

Therefore, their programming experience varies a lot

A Class of 51 Students

Computer Science & Engineering

69%

Science

14%

Business

12%

Others

2 to 4 years (41%)

1 to 2 years (37%)

Programming Exp.

> 4 Years (16%)

< 1 year

Exp. in R (22%)

Python (86%)

JavaScript (53%)

Java (55%)

And we need to take extra care to the less experienced

A Class of 51 Students

Computer Science & Engineering

69%

Science

14%

Business

12%

Others

2 to 4 years (41%)

1 to 2 years (37%)

Programming Exp.

> 4 Years (16%)

< 1 year

Exp. in R (22%)

Python (86%)

JavaScript (53%)

Java (55%)

Besides, when we did the survey, it was a surprise that Python is the most popular language among them, for both CS and non CS students.

But it is understandable that most directly because Python is the language to start with for students interested in data science and machine learning

A Class of 51 Students

Computer Science & Engineering

69%

Science

14%

Business

12%

Others

2 to 4 years (41%)

1 to 2 years (37%)

Programming Exp.

> 4 Years (16%)

< 1 year

Exp. in R (22%)

Python (86%)

JavaScript (53%)

Java (55%)

We conclude that our old practice of teaching just JavaScript and D3 is not ideal

Msg #1 of 2

cover More vis tools

2:00

We found that this diversity is common among different data visualization courses

Here is my first message want to spread

Data Exploration

Customized Visualization

Data Analytics

In our course, we decided to teach more tools, and organize them in a way that can help students to master, not D3, but to create visualizations

From our own experience and the literatures about visualization project workflows

We split the tutorials into 3 stages, explore, dive deep and design

Data Exploration

  • GUI
  • Quick & Swift
  • MS Excel
  • Tableau

Customized Visualization

Data Analytics

First step

Start with Data Exploration, we teach students GUI based tools, more specifically, MS Excel and Tableau

Students can use them to create visualization easily

And understand about the elements that makes up of a chart

In this early stage of the semester, students can joyfully practice what they had learned from the lecture and play with visualizations in their hands

Customized Visualization

Data Analytics

  • Manipulate Data
  • Find Insight
  • Python & Jupyter & Pandas
  • Altair

Data Exploration

  • GUI
  • Quick & Swift
  • MS Excel
  • Tableau

Then dive deep into data

When they start getting unsatisfied with GUI tools, we give them more powerful tools to transform and manipulate data.

Specifically, Python and Pandas, to perform tasks like

Combined with Altair, the library designed on top of Vega, which has a beautiful API written in visualization language, like data types, marks and encoding.

Students can experience the process of visual analytics by applying what they had learned from the lecture

Customized Vis

  • Present with Interactions
  • Flexible & Expressive
  • JS & Observable
  • Vega & D3

Data Analytics

  • Manipulate Data
  • Find Insight
  • Python & Jupyter & Pandas
  • Altair

Data Exploration

  • GUI
  • Quick & Swift
  • MS Excel
  • Tableau

Toward the end of the semester, when they had a concrete idea on how to design their visualization solution

We provide them the tools to implement their solution

We teach JavaScript, Vega and D3, which have better expressiveness

And by leveraging the power of JavaScript as the web language, their solution can be widely accessible and has rich interactivity

Customized Vis

  • Present with Interactions
  • Flexible & Expressive
  • JS & Observable
  • Vega & D3

Data Analytics

  • Manipulate Data
  • Find Insight
  • Python & Jupyter & Pandas
  • Altair

Data Exploration

  • GUI
  • Quick & Swift
  • MS Excel
  • Tableau

By weaving in the tools with visualization workflow,

Students learn what they need when they need them throughout the semester building their visualization project

I found them actively pull from us, instead of we pushing knowledge to them

D3

D3

D3

And, instead of building a wall to scare students away

Python & Altair

MS Excel & Tableau

JS & Vega & D3

We build a stair

Msg #2 of 2

Notebooks as medium

5:00

My second message is, use notebooks as the teaching medium

  • Python with Jupyter
    • Google Colab
  • JavaScript with Observable

Notebooks

The idea behind notebooks is literate programming, which means interleaving program code with natural language explanations

For Python, it is Jupyter Notebook, which is popular among data science community

And recently, Google Colab provides a free hosted solution

For JavaScript, it is Observable Notebook, which is built by Mike Bostock

It was in Beta since last year, and it is officially released recently

Web Dev / IDE

  • Setup is troublesome
  • Command line is intimidating
  • Error causes panic

In the past

In our previous offering, we needed to help student setting up IDE or text editor + command line

Helping them to setup is a big headache

Remember our audience from business school and science school

When an error shows up, they get panic and we need to help them out

And it can easily take up the whole tutorial session

Notebooks

  • No setup
  • No command lines
  • Just a click

On the other hand, notebooks require no setup, no command line,

and all they need to do is a click on the url we provide

More Goodies

  • Interleave instructions with exercises
  • No switching back and forth
  • Communicate like a data scientist

On top of that, interleaving instructions and exercises largely improve students’ learning experience

They don’t need to switch back and forth between slides, browser and their code

And they can learn how to communicate like a data scientist

#1. Cover more visualization tools

#2. Notebooks as the medium

* github.com/leoyuholo/learning-vis-tools

These are the messages I wanna spread to the community

Our teaching materials are available on GitHub, you can search it with learning vis tools

Thanks to the tool developers!

At the end, I want to take a chance to thank the developers of all these awesome tools!

# Backup slides

Student Feedback

  • Wide range of tools used in student projects (13 groups, 51 students in total)
    • All projects use tools more than just D3
  • Students actively look for and learn related tools
    • Learned how to pick up new tools
  • Students enjoy learning with engaging datasets
    • Pokemon and Spotify datasets
  • Notebooks is a better medium of teaching visualization tools

Students’ Projects

How about R language?

  • Reason for Python
    • Common among the audience
    • 22% vs 86%
  • Reason for Altair
    • API coherent with visualization language
      • Marks and encoding
      • Interactions
  • Reason for Tableau
    • Same
  • Reason for MS Excel
    • Widely accessible
    • Any equivalent spreadsheet will do

Star ⭐⭐⭐ our GitHub Repo

  • github.com/leoyuholo/learning-vis-tools
    • Leo Yu-Ho Lo, Yao Ming, Huamin Qu
    • VisLab @ HKUST
  • Star our GitHub repository ⭐⭐⭐
    • Short URL: http://bit.ly/vis-tools
  • Like our Observable notebooks ❤️❤️❤️
    • Short URL: http://bit.ly/vis-tools-ob
VIS 2019: Learning Vis Tools - Google Slides