Simplified Grammar of Graphics
Creating a Humble Chart
Start with Data
Area Sales
North 5
East 25
West 15
South 20
Central 10
Data
Map the Aesthetics
Area Sales
North 5
East 25
West 15
South 20
Central 10
Data
x y
1 5
2 25
3 15
4 20
5 10
Aesthetics
x (Nominal) = Areay (Quantitative) = Sales
Encode Geometric & Scale
Area Sales
North 5
East 25
West 15
South 20
Central 10
Data
x y
1 5
2 25
3 15
4 20
5 10
Aesthetics
x (N) = Areay (Q) = Sales
x - position y - barscale - 200 x 200
x y
20
40
100
140
180
Geometric & Scale
Choose a Coordinate
x y
1 5
2 25
3 15
4 20
5 10
Aesthetics
x (N) = Areay (Q) = Sales
x y
20
60
100
140
180
Geometric & Scale
cartesian
Coordinate
x - position y - barscale - 200 x 200
Points Line Bar
Bar - Stacked Bar - Stagger CoordinatesCartesian
Example #1
x
y
Coordinates: Cartesian
x
y
Dot Plot Line Chart Column Chart
WaterfallStacked Column
Points Line Bar
Bar - Stacked Bar - Stagger CoordinatesCartesian - Flip
Example #2
y
x
Coordinates: Cartesian FlipDot Plot Line Chart Bar Chart
CascadeStacked Bar
y
x
Points Line Bar
Bar - Stacked Bar - Stagger CoordinatesPolar - x
Example #3
r
θ
x = θy = r
Coordinate: Polar - x
r
θ
x = θy = r
Marked Radar Line Radar? CoxComb
Polar Waterfall?Bullseye
Points Line Bar
Bar - Stacked Bar - Stagger CoordinatesPolar - Y
Example #4
r
θ
x = ry = θ
Coordinate: Polar - y
r
θ
x = ry = θ
Target? Wind Rose? Wind Rose
Polar Cascade?Pie Chart
Amit Kapoor@amitkapsPartner, narrativeVIZ [email protected]
Find this presentation and more athttp://narrativeviz.com/playbook