CSC 444 Data Visualization
Final Exam Review
December 6, 2022
1 Viz critique
You need to apply Munzner’s What-Why-How Framework: map to data-task-idiom trio to evaluate the quality of the visualization:
- What? (data, data quality)
- Why? (user intent)
- How? (visual encoding – scales, perceptual issues, interaction)
Remember also the general guidelines:
- Maximize data-to-ink ratio
- Avoid multiple font faces, and extraneous colors and backgrounds
- Simplify, mute, or delete gridlines
- Remove superfluous axis marks and labels
- Avoid excessive decorative embellishments
1.1 Visualization A
Visualization by Stephan Teodosescu (@steodosescu)
1.2 Visualization B
Visualization by Pauline Baudry @PauBaudry
1.3 Visualization C
Visualization by Nicola Rennie @nrennie35
1.4 Visualization D
Visualization by Dan Oehm @danoehm
2 Variable mapping to viz encodings
Variables can be:
- Quantitative/numeric
- Discrete: counts like number of bigfoot sightings
- Continuous: temperature, height
- Categorical:
- Ordered: size
- Unordered: countries
Color schemes that best represent each type of variable:
- Gradients/Sequential with single hue for continuous numeric variables from low to high to represent numeric continuous/ordered variables (e.g., population size). Light colors should represent low values, and dark colors high values.
- Diverging scales should be used where there is a neutral midpoint and then there is variance in ether direction from that neutral point (e.g., temperatures can be positive and negative).
- Qualitative palettes where each color has the same valence (i.e., no color dominates the other) should be used for unordered categorical variables (e.g., political parties, countries). Different colors in the palette should not imply differences in magnitude.
2.1 What variable types are present in the following data:
| year | state | id | total | DEMOCRAT | REPUBLICAN | democrat_difference | republican_difference |
|---|---|---|---|---|---|---|---|
| 2020 | ALABAMA | 1 | 2323282 | 0.3656999 | 0.6203164 | -0.2546165 | 0.2546165 |
| 2020 | ALASKA | 2 | 359530 | 0.4277195 | 0.5283314 | -0.1006119 | 0.1006119 |
| 2020 | ARIZONA | 4 | 3387326 | 0.4936469 | 0.4905598 | 0.0030871 | -0.0030871 |
| 2020 | ARKANSAS | 5 | 1219069 | 0.3477506 | 0.6239573 | -0.2762067 | 0.2762067 |
| 2020 | CALIFORNIA | 6 | 17500881 | 0.6348395 | 0.3432072 | 0.2916322 | -0.2916322 |
| 2020 | COLORADO | 8 | 3279980 | 0.5501107 | 0.4160413 | 0.1340694 | -0.1340694 |
| 2020 | CONNECTICUT | 9 | 1823857 | 0.5926073 | 0.3918712 | 0.2007361 | -0.2007361 |
| 2020 | DELAWARE | 10 | 504346 | 0.5874301 | 0.3977488 | 0.1896813 | -0.1896813 |
| 2020 | DISTRICT OF COLUMBIA | 11 | 344356 | 0.9214969 | 0.0539732 | 0.8675237 | -0.8675237 |
| 2020 | FLORIDA | 12 | 11067456 | 0.4786145 | 0.5121982 | -0.0335837 | 0.0335837 |
2.1.1 What variables would you map to build the following visualizations based on these data:
- A line plot showing the percentage of votes to the democratic candidate across the years for the state of Arizona
- A map plot with percent democrat/republican votes per state
- A bar plot showing the 5 states that voted the most republican and the 5 states that voted the most democrat
2.1.2 What color scheme would use for each of the visualizations above?
2.2 What variable types are present in the following data (NYTimes best sellers):
| id | title | author | year | total_weeks | first_week | debut_rank | best_rank |
|---|---|---|---|---|---|---|---|
| 0 | “H” IS FOR HOMICIDE | Sue Grafton | 1991 | 15 | 1991-05-05 | 1 | 2 |
| 1 | “I” IS FOR INNOCENT | Sue Grafton | 1992 | 11 | 1992-04-26 | 14 | 2 |
| 10 | ‘’G’’ IS FOR GUMSHOE | Sue Grafton | 1990 | 6 | 1990-05-06 | 4 | 8 |
| 100 | A DOG’S JOURNEY | W. Bruce Cameron | 2012 | 1 | 2012-05-27 | 3 | 14 |
| 1000 | CHANGING FACES | Kimberla Lawson Roby | 2006 | 1 | 2006-02-19 | 11 | 14 |
| 1001 | CHAOS | Patricia Cornwell | 2016 | 3 | 2016-12-04 | 1 | 7 |
| 1002 | CHAPTERHOUSE: DUNE | Frank Herbert | 1985 | 16 | 1985-04-21 | 9 | 2 |
| 1003 | CHARADE | Sandra Brown | 1994 | 5 | 1994-05-01 | 7 | 10 |
| 1004 | CHARLESTON | John Jakes | 2002 | 4 | 2002-08-25 | 7 | 12 |
| 1005 | CHARLOTTE GRAY | Sebastian Faulks | 1999 | 1 | 1999-03-14 | 12 | 17 |
2.2.1 What visualization would you built to answer the following questions? Include which variables you would map to each encoding, and what color scheme you would use:
- What are the top 10 books that stayed the most weeks in the NYTimes best sellers list?
- How has the debut ranking for books by Stephen King changed over time? 1.1 How does debut rank for Stephen King compare with debut rank by Danielle Steel over time?
- Which books had the largest difference between best rank and debut rank?
3 Vega spec completion
Complete the Vega specification for the three plots (they all use the same data – NY Times Best Sellers).
var spec = {
$schema: "https://vega.github.io/schema/vega/v5.json",
description: "NY Times Best Sellers of All Times",
width: 800,
height: 400,
padding: 50,
data: [
{
name: "books",
url: "https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2022/2022-05-10/nyt_titles.tsv",
format: { type: "tsv" }
},
{
name: "aggregate",
source: "books",
transform: [
{
type: "aggregate",
groupby: ["year"],
fields: ["total_weeks"],
ops: ["mean"],
as: ["total_weeks"]
}
]
}
],
scales: [
{
name: " ",
type: " ",
domain: { field: " ", data: " " },
range: " ",
zero:
},
{
name: " ",
type: " ",
domain: { field: " ", data: " " },
range: " ",
zero:
}
],
axes: [
{
scale: " ",
orient: " ",
format: "d",
title: " "
},
{
scale: " ",
orient: " ",
title: " "
}
],
marks: [
{
type: " ",
from: { data: " " },
encode: {
enter: {
x: { field: " ", scale: " " },
y: { field: " ", scale: " " },
}
}
}
],
title: {
text: " "
}
};
var spec = {
$schema: "https://vega.github.io/schema/vega/v5.json",
description: "NY Times Best Sellers of All Times",
width: 800,
height: 800,
padding: 50,
data: [
{
name: "books",
url: "https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2022/2022-05-10/nyt_titles.tsv",
format: { type: "tsv" },
transform: [
{
type: "filter",
expr: "datum.total_weeks > 94"
}
]
}
],
scales: [
{
name: " ",
type: " ",
domain: [2020, 1931],
range: " ",
zero: false
},
{
name: " ",
type: " ",
domain: { field: " ", data: " " },
range: " "
}
],
axes: [
{
scale: " ",
orient: " ",
title: " "
},
{
scale: " ",
orient: " ",
format: "d",
title: " "
}
],
marks: [
{
type: " ",
from: { data: " " },
encode: {
enter: {
y: { field: " ", scale: " " },
x: { field: " ", scale: " " },
x2: { value: 0, scale: " " },
height: { value: 3 }
}
}
},
{
type: " ",
from: {data : " " },
encode: {
enter: {
text: { signal: " " },
y: { field: " ", scale: " " },
x: { field: " ", scale: " " },
align: { value: "right"}
}
}
}
],
title: {
text: " ",
subtitle: " "
}
};
var spec = {
$schema: "https://vega.github.io/schema/vega/v5.json",
description: "NY Times Best Sellers of All Times",
width: 800,
height: 400,
padding: 50,
data: [
{
name: "books",
url: "https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2022/2022-05-10/nyt_titles.tsv",
format: { type: "tsv" }
},
{
name: "aggregate",
source: "books",
transform: [
{
type: " ",
groupby: [" "]
}
]
}
],
scales: [
{
name: " ",
type: " ",
domain: { field: " ", data: " " },
range: " ",
zero: false
},
{
name: " ",
type: " ",
domain: { field: " ", data: " " },
range: " ",
zero: true
}
],
axes: [
{
scale: " ",
orient: " ",
title: " ",
format: "d"
},
{
scale: " ",
orient: " ",
title: " "
}
],
marks: [
{
type: " ",
from: { data: " " },
encode: {
enter: {
x: { field: " ", scale: " " },
y: { field: " ", scale: " " },
y2: { value: 0, scale: " " },
width: { value: 5 }
}
}
}
],
title: {
text: " "
}
};4 Audiences, purposes, and storytelling
Consider the three plots from the previous questions when answering the following questions: