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

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

data visualization for cs teachers

  • 2,838