Data Visualization
an intersection of many ways of thinking
objectives
See how data viz is at the intersection of many fields
Understand why CS is valuable for visualization
Use a data visualization to engage deeply with data
Think critically about a visualization's design within the context of an audience and purpose
Learn one technique, being intentional with color, for effective visualizations
Create a visualization by adapting an existing one, on paper or using code
Discuss next steps for how you might want to bring data viz into your classroom
what does data visualization mean to you?
Spend 5 minutes answering either...
Is there a data viz that has stuck in your memory or meant something to you? if yes... why?
let's talk about the weather
Data visualization is about...
data
Data visualization is about...
storytelling
Data visualization is about...
data journalism
Data visualization is about...
making discoveries with data
Data visualization is about...
informing choices
Data visualization is about...
life and death
Data visualization is about...
graphic design
Data visualization is about...
interaction design
Data visualization is about...
Data-driven design
Data visualization is about...
Making sense of lots of data
Data visualization is about...
Making sense of lots and lots of data
Data visualization is about...
relating information and events
Data visualization is about...
storytelling
Data visualization is about...
building with tools
Data visualization is about...
building with math & code
Data visualization is about...
understanding algorithms
Data visualization is about...
drawing with math
Data visualization is about...
visual perception
Data visualization is about...
explanations
Data visualization is about...
simulations
Data visualization is about...
learning about people
Data visualization is about...
being playful
Data visualization is about...
being impactful
Data visualization is about...
changing how we experience data
Data visualization is about...
interpreting statistical methods
Data visualization is about...
asking questions of data
Data visualization is about...
changing our perspective
Data visualization is about...
seeing something familiar in a different context
Data visualization is about...
Beauty
Data visualization is about...
Revealing underlying patterns
number of births
deaths per 1000 births
Data visualization is about...
influencing decisions
Data visualization is ...
Inherently interdisciplinary
and
collaborative
What does computer science have to do with data viz?
You don't need code to visualize data
Statistical Atlas of the United States - 1870 Census Data
W.E.B Du Bois - "The American Negro" at 1900 Paris Expo
"Redlining" maps - Home Owners Loan Corporation - 1930's
Dear Data Postcard Project - 2015
Sample business visualization made in Excel - 2018
Storytelling with Data - chart by Elizabeth Ricks
Contest entry, created with Tableau Public - 2018
Storytelling with Data - by Sarah
Viz Illustrated with Adobe Illustrator
Drawing/illustration
pen/paper or with tools like Adobe Illustrator, Paper, etc
GUI Charting tools
Spreadsheets like Excel, Google Sheets
Viz tools like Tableau
code charting tools
Ggplot2 in R, matplotlib and Seaborn in Python, vega and nvd3 and highcharts in Javascript
Creating with codE
D3 in Javascript, pixi.js and three.js in WebGL
But, writing code vastly expands what's possible
Early data visualization created with code
Code: bigger datasets
Code: as part of data analysis
Text
Code: same viz, different data (now)
Code: same viz, different data (personal)
Code: same viz, different data (as a tool)
Code: animations
Code: to reveal & use time
Code: interactive
Code: interactive
You Draw It - New York Times
Code: can draw with math; make anything you imagine
From what you've seen so far, what was expected and what was unexpected?
Reflection minute: talk with your neighbors about...
Engaging deeply
with data
Choose a topic, and spend 15 minutes analyzing the data and critiquing the visualization with a partner
Color
&
human perception
Notice anything interesting about this group of numbers?
Easier question: how many 7's are there?
It's common to add color to show categories. Maybe this helps? How many 7's do you see?
Because it's ordered, we might use a color spectrum like this. How many 7's do you see?
But, maybe this is easier... how many 7's are there?
What about 3's?
What about 1's?
What about all the numbers?
But did you notice that the lower left corner is all 3/4/5?
Pre-attentive Attributes
Visual analysis appears to be functionally divided between an early preattentive level of processing at which simple features are coded spatially in parallel and a later stage at which focused attention is required to conjoin the separate features into coherent objects.
Pre-attentive Attributes
Not just in data viz...
Business Data Viz example (anonymized)
Before: color shows categories of things that might influence job satistifaction
After: color used to emphasize the core story -- what aspects of job satisfaction are most influenced by managers
Using a highlight color: gene lookup tool
Different Color; Different insights
Unemployment Rate - Aug 2016
Different Color; Different insights
Unemployment Rate - Aug 2016
D3 - Bostock; Adapted by Zan
Being intentional with color: meta genomics project
Being intentional with color: meta genomics project
Critique A visualization
Compare/Contrast these two visualizations of the same data
For what purposes is one form better than the other? And vise-versa? Why?
How is the data encoded differently? (shape? color? position?)
d = percent cloudy
i = hour of day (0-24)
The code behind the paths
angle determined by time of day (i)
distance from the center determined by the percent cloudy (d)
d (scaled)
The code behind the paths
position determined by day of year (i) and % cloudiness (d)
The code behind the paths
The hidden layer (to detect mouse movements; find closest point)
reflection moment
For 3 minutes, write about the following on your own...
Based on what we've done so far, is there anything you want to bring back to your classroom or colleagues?
For the next 3 minutes, discuss with your neighbors...
Based on what we've done so far, is there anything you want to bring back to your classroom or colleagues?
Creating:
data viz make-over
SF Population Data Set
or
Random walk visualized
or
adapt an animation
or
Color a Map based on unemployment (a or b)
Time to create!
data viz & your students?
Spend 5 minutes writing about...
what would you like to bring to your students?
And why?
Let's discuss as a group...
what would you like to bring to your students?
And why?
objectives
See how data viz is at the intersection of many fields
Understand why CS is useful for visualization
Use a data visualization to engage deeply with data
Think critically about a visualization's design within the context of an audience and purpose
Learn one technique, being intentional with color, for effective visualizations
Create a visualization by adapting an existing one, on paper or using code
Discuss next steps for how you might want to bring data viz into your classroom
data visualization for cs teachers
By Zan Armstrong
