1
Data Visualization
for
Architecture,
Urbanism,
and the Humanities
ARCH A4892 Spring 2019 Week 3: Graphic Forms and More Programming
2
Last Time
Today
3
The most
Basic Chart Types
Bar Pie ScatterPlot Line
4
Scale of Graphical Perceptual Tasks
Human Subject Testing on percpetion of graphical elements
Formalization of Graphical Language
5
Position along common scale
Position along identical nonaligned scales
Length
Direction and Angle
Area
Volume
Shade and satuation
Color and Hue
Precise Comparisons
General Comparisons
Scale of Graphical Perceptual Tasks
6
Position along common scale
Position along identical nonaligned scales
Length
Direction and Angle
Area
Volume
Shade and satuation
Color and Hue
Precise Comparisons
General Comparisons
Scale of Graphical Perceptual Tasks
We will talk about color after
7
Bar
Chart Variations
done in d3
Position along common scale
Position along identical nonaligned scales
Length
Direction and Angle
Area
8
Bar
Chart Variations
done in d3 and historical
Diverging Values
Diverging Categories
9
Bar
Chart Variations
done in d3
10
Pie
Chart Variations
done in d3
Position along common scale
Position along identical nonaligned scales
Length
Direction and Angle
Area
11
Pie?
Exceptions
Category Quantity
Pie color degree
Nightingale equal slices radii
Bar bar height
(verical)
Position along common scale
Position along identical nonaligned scales
Length
Direction and Angle
Area
12
“There’s a strand of the data viz world that argues that everything could be a bar chart. That’s possibly true but also possibly a world without joy.”
13
Pie?
Exceptions
Category - color/ring
Time - Angle
Duration - length of arch
14
Line
Chart Variations
done in d3
Position along common scale
Position along identical nonaligned scales
Length
Direction and Angle
Area
15
Line
Chart Variations
done in d3 and in history
16
Scatter Plot
Chart Variations
your homework
Position along common scale
Position along identical nonaligned scales
Length
Direction and Angle
Area
17
Scatter Plot
Chart Variations
Done in ?
Size of circle - population
Y - life expectency
X - income
Color - continent
18
Scatter Plot
Chart Variations
done in d3
19
(Small) Multiples
Chart Variations
done in d3
Position along common scale
Position along identical nonaligned scales
Length
Direction and Angle
Area
20
(Small) Multiples
Chart Variations
done in d3
21
Position along common scale
Position along identical nonaligned scales
Length
Direction and Angle
Area
Volume
Shade and satuation
Color and Hue
Precise Comparisons
General Comparisons
Scale of Graphical Perceptual Tasks
22
Other: Bubble
Chart Variations
done in d3 in NYT
23
Other: Heat
Chart Variations
done in d3
24
Chart
Graph
25
Relationships
Chart Variations
done in d3
26
Hierarchy
Chart Variations
done in d3
27
In this class:
Maps are charts and graphs with geospatial dimensions
28
Choropleth
29
Choropleth
Matrix
30
Proportional Symbol
31
Proportional Symbol
Bar chart
32
Proportional Symbol
33
Proportional Symbol
Scatter Plot
34
Flow Map
35
Flow Map
Sankey
36
Flow Map
Chord
37
38
Set Mood
Draw Attention
Colors
39
40
41
Peach in different cultures
Color according to “girl” and “guy”
42
Color space
More XKCD survey results
43
Interaction of color
https://albersfoundation.org
44
45
Color Spaces
46
RGB
3 numbers, each range from 0 to 255
Red Green Blue
Black 0 0 0
White 255 255 255
Red 255 0 0
Green 0 255 0
Blue 0 0 255
47
48
RGB
3 numbers, each range from 0 to 255
Red Green Blue
Black 0 0 0
White 255 255 255
Red 255 0 0
Green 0 255 0
Blue 0 0 255
49
RGB
Red Green Blue
Black 0 0 0
White 255 255 255
Red 255 0 0
Green 0 255 0
Blue 0 0 255
Hex Triplet - hexcode
6 digits
Each digit can range from 0 to F (16 possible values)
0 1 2 3 4 5 6 7 8 9 A B C D E F
Black #000000
White #FFFFFF
Red #FF0000
Green #00FF00
Blue #0000FF
We count in decimal = base 10
Binary = base 2
Hex = base 16
50
http://hextodecimal.com/index.php
FF == 255
51
RGB
In CSS
color: rgb(0,0,0);
With transparency
color: rgba(0,0,0,0);
Hex Triplet - hexcode
color: #000000;
color:#00000000
52
Where to look for colors?
54
55
56
57
http://tools.medialab.sciences-po.fr/iwanthue/
58
59
In class:
HOMEWORK OUTPUT
60
61
In groups
62
In files in courseworks
63
64
65
For Next Week
you will get feedback before you post your final version
Next Week
66
67
68
Taxonomy of Data
1 dimension
2 dimensions
3 dimensions
Multi-dimensional
Temporal
Tree
Network
https://www.cs.umd.edu/~ben/papers/Shneiderman1996eyes.pdf
Taxonomy of Tasks
Overview: Gain an overview of the entire collection.
Zoom : Zoom in on items of interest Filter: filter out uninteresting items.
Details-on-demand: Select an item or group and get
Relate: View relations hips among items.
History: Keep a history of actions to support undo
Extract: Allow extraction of sub-collections and of the details when needed. replay, and progressive refinement. query parameters.