Uploaded by Wesley Zhen

Choosing Charts Dsc106 ucsd lecture slide

advertisement
Choosing Charts
with Thomas Powell - tpowell@ucsd.edu
We Got Categories
We Got a List
We Got a Flow Chart to Use
Another Chart Chooser
Poster!
Choosing Charts
Cards!
Choosing Charts
Programs
Choosing Charts
Parting Thoughts
Be Careful when choosing
chart types
Choosing Charts
Exploring Types
Here we take a simple data set and see how we
might chart and style it
Note we do some wrong things and some right things
The chart types made are not meant to be some
ideal, but demonstrate ideas and prompt discussion
Most demos made in Keynote, PowerPoint or
Google Slides but the point is not tool but result!
Choosing Charts
Very Simple Data Set
Some Fake Poll data of 200 voters preferences.
Table 1
April May June July
Democrat
17
26
53
96
Republican 55
43
70
58
Undecided 128 131
77
46
Let’s plot it!
Choosing Charts
Don’t Accept the Defaults
140
105
70
35
0
April
May
June
I can’t read this!
Choosing Charts
July
Better?
140
105
70
35
0
April
May
June
What is this?
July
Better?
Republican
Title
Democrat
Undecided
140
105
70
35
0
April
May
June
What’s Happening? Collided objects!
July
Better?
Survey of San Diego Voter Preferences April to July 2020
Democrat
Republican
Undecided
140
105
70
35
0
April
May
June
Titled and some layout
July
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
140
Republican
Undecided
105
70
35
0
April
May
June
Colors, editorialized title/subtitle, text treatments
July
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
100
Republican
75
50
25
0
April
May
June
July
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv
Source, data transparency, data omission
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
140
Republican
Undecided
105
70
35
0
April
May
June
July
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv v1.0 070420
Data returns with new style, versioning info
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
140
Republican
Undecided
105
70
35
0
April
Credit:
May
Thomas A. Powell, UCSD
Authorship
June
July
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv v1.0 070420
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
Republican
Undecided
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv v1.0 070420
3D with some awareness
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
Republican
Undecided
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv v1.0 070420
3D with no awareness
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Undecided
140
Democrat
Republican
105
70
35
0
April
May
June
July
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv v1.0 070420
Wrong type?
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
Republican
Undecided
140
105
70
35
0
April
May
June
July
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv v1.0 070420
Better type
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
Republican
Undecided
140
105
70
35
0
April
May
June
July
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv v1.0 070420
Clustering improved by space
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Undecided
Republican
Democrat
140
105
70
35
0
April
May
June
July
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv v1.0 070420
Editorializing via order
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
200
Republican
Undecided
150
100
50
0
April
May
June
July
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv v1.0 070420
Stack shows part of whole, but continuous is wrong
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
Republican
Undecided
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv v1.0 070420
Made it look ‘cool,’ but still the continuous part is wrong
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
Republican
Undecided
April
May
June
July
0
50
100
150
200
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv v1.0 070420
More appropriate stack style
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
Republican
Undecided
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv v1.0 070420
Making it cooler?
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
Republican
Undecided
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv v1.0 070420
Making it cooler?
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
Republican
Undecided
200
150
100
50
0
April
May
June
July
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv v1.0 070420
Column stack is probably more appropriate
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
Republican
Undecided
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv v1.0 070420
Cool column stack?
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
9%
Republican
Undecided
13%
28%
64%
22%
66%
April
May
27%
23%
48%
39%
35%
June
29%
July
Pies might work but …
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
Republican
April
May
June
July
Undecided
Source: Fake poll conducted from April to July 4
No 3D
pies
please!
Data: q2_2020.csv
v1.0
070420
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
Republican
9%
April
13%
28%
64%
May
22%
July
48%
66%
27%
39%
Undecided
23%
June
35%
29%
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv v1.0 070420
If you had to maybe
rings but please no…
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
9%
April
64%
Republican
Undecided
13%
27%
39%
28%
May
22%
23%
June
July
66%
35%
48%
29%
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv v1.0 070420
Probably the best you can do with pie/ring
Animated
The next examples are animated so they won’t be
useful as static slides but they use animations to tell
the story from April to June
The impact might be bigger but you force people to
remember what you saw. If the final point is all that
matters that might be satisfactory.
Choosing Charts
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
140
Republican
Undecided
105
70
35
0
Democrat
Republican
Undecided
April
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv v1.0 070420
Democratic Surge Amongst Undecided Voters
Party preference of 200 undecided voters in San Diego County
Democrat
Republican
Undecided
Democrat
Republican
Undecided
0
35
70
April
105
Source: Fake poll conducted from April to July 4
Data: q2_2020.csv v1.0 070420
140
PowerPoint Examples
The exercise wouldn’t be that diļ¬€erent in
PowerPoint. As a comparison here is a roughly
similar version.
Choosing Charts
PowerPoint Take
Aways
Some things weren’t possible in Keynote that were
easily done in PowerPoint
Choosing Charts
PowerPoint Take
Aways
•More chart types!
•Some things like annotations / text boxes not as easy
as should be
•More configuration possibilities (though quite hidden)
•Excel editing would seem a plus compared to
Numbers, but in my practice it hung a lot
•UX of the product was not good
•Default look and feel is “meh”
Choosing Charts
Google Charts
•Even less capable than
Keynote/Numbers or Excel/
Powerpoint
•Special things it could do that
those tools couldn’t do easily
•Easier distribution online
though!
Choosing Charts
Tool Wind Down
We can look at other tools and the story is the same
Some tools will have ease of use while others might have
volume of features
Some tools might be more specialized to viz or even
a particular application of viz while others are more
general purpose
Focus more on what we make not how
Choosing Charts
Some Evaluations
Now that we know about picking types, their various
parts and how we used some tools and made some
results let’s try our hand at looking a few charts and
see what we see right and wrong and what we might
fix.
Choosing Charts
Let’s Discuss
Choosing Charts
Better?
Aug
2016
Projected
July
2014
Choosing Charts
Let’s Discuss
Choosing Charts
Let’s Discuss
Obviously things are too small
What is our eye doing with the red bars?
If purpose is just outlier spikes might this still work?
Choosing Charts
Summary
Choosing charts can follow a prescribed method
The data can deeply inform what we want to do to
communicate clearly
However, there is some subjectivity of choice and
style is quite open to interpretation
Try to understand the tool is rarely the point, but the
result created
Choosing Charts
Download