Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Webstock 2014 Workshop
Sha Hwang
February 12, 2014
Design
0
61
Webstock 2014 Workshop
A workshop on data visualization given at Webstock in Wellington
Sha Hwang
February 12, 2014
Tweet
Share
More Decks by Sha Hwang
See All by Sha Hwang
From Paper Architect to Product Designer
sha
1
92
A Guidebook to Mapping Techniques
sha
2
100
Life after Mercator
sha
1
78
Astronauts and Architects
sha
1
45
Other Decks in Design
See All in Design
TIPSTARでのデザイナーの働き方について
mixil
0
520
The Consolations of Complexity
tsmorgan
1
270
FIT2022_levii
levii
0
250
Améliorez l'expérience utilisateur de vos formulaires web
geoffreycrofte
1
470
Understanding UX Design Proces - デザインリテラシーを高める方法
bookslope
0
110
モデルとダイアグラムの活用の本質
akiramotomura
0
410
DL2022 Zoe Rose - ‘Scientific design methods’ and ‘applied creativity’: a lost history
uxaustralia
PRO
0
150
Functionalism Architecture: according to Wikipedia
juliaso
0
100
UIを完全に理解して、 プロダクトをチョット良くする
tojimasan
1
290
Kurashiru Brand Guideline
delyinc
0
3.1k
アイデアと上手くつきあう方法
more_t
5
12k
保育中心設計でつくる保育ICTの裏側
hiro93n
0
220
Featured
See All Featured
Debugging Ruby Performance
tmm1
67
11k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
Keith and Marios Guide to Fast Websites
keithpitt
407
21k
Robots, Beer and Maslow
schacon
154
7.3k
KATA
mclloyd
12
9.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
120
29k
Stop Working from a Prison Cell
hatefulcrawdad
263
18k
A Tale of Four Properties
chriscoyier
149
21k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Why You Should Never Use an ORM
jnunemaker
PRO
49
7.9k
Writing Fast Ruby
sferik
613
58k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Transcript
Becoming a Data Visualization Superhero Webstock 2014
Hi, my name is Sha. postarchitectural.com or @shashashasha
Stamen
Movity
Trulia
Current
The Plan: Building blocks, Core principles, Simple strategies, Tools and
resources.
Why is data visualization so important now?
Computers vs People
Computers are bad at things like gender, humor.
The Scunthorpe Problem.
The Scunthorpe Problem.
Data is for computers.
People are bad at things like scale and time.
Everything has become a giant fucking heap. Nick Kallen
shorturl
None
chris jordan
BILL MCKIBBEN
The differences in meaning between mammoth and gigantic are itty-bitty
and small. Bill McKibben
BIG DAM BIG LUNCH
None
Data visualization is a lens for seeing the world.
Maps, Infographics, Interactive Visualizations.
None
bit.ly/1iFnDXr
aaronkoblin.com/work/flightpatterns
None
None
None
Infographics
radicalcartography.net
bit.ly/LPkND7
None
Interactive Visualizations
None
None
So, where do you begin?
Exercise 1 Fun with markers
Four Questions: 1. What’s your name? 2. Where are you
coming from? 3. When are you the most productive? 4. What colors are you wearing?
What’s your name? # of letters in your name
Where are you from? east west north south
When are you productive? 12pm 6am 6am 6pm 12am
When are you productive? 12pm 6am 6am 6pm 12am
What colors are you wearing?
Let’s see what we’ve made!
Why is data visualization an effective tool?
Preattentive Processing
None
None
None
None
Pretty cool huh?
None
Color& Size& Shape& Position.
Exercise 2 Encoding numbers
Instructions: Four numbers. 41, 174, 34, 118. 1. Draw a
way to represent the numbers. 2. Pass your paper to the right.
bit.ly/1dDvxey
Information visualization is a language. Santiago Ortiz
Data visualization is a language of scale.
Let’s build up our vocabulary.
bit.ly/1lsEnlI
None
Simple questions. Simple strategies.
Who? What? Where? When?
Show everything Small multiples Highlighting outliers Linked views Micro /
Macro
Show everything
None
sta.mn/y5p
flickr.com/photos/walkingsf/5560480146
Small multiples
elections.huffingtonpost.com/pollster
None
None
Highlighting outliers
bit.ly/OMAurU
bit.ly/1gjr2dy
Linked views
trends.truliablog.com/strata
Micro and macro
nyti.ms/mDcrXY
guns.periscopic.com
Put a slider on it.
gapminder.org/world
nyti.ms/ckcJgq
Combine datasets.
None
None
trulia.com/local
Okay, so.
Exercise 3 Asking questions of a dataset
None
Photograph, name, age, military unit, hometown, details.
Exercise 4 Photograph, name, age, military unit, hometown, details.
None
None
Who were they?
None
How did they die?
None
Where were they from?
None
None
None
None
None
There is no one right answer.
What are you trying to communicate?
None
None
We’re so used to seeing emotionless, blurry images of rockets
exploding that we disconnect the image from the reality. These are images of death. Doug McCune
None
None
None
None
None
None
None
Animation and Interactivity.
None
None
None
None
None
None
None
Some helpful principles to keep in mind.
Don’t tackle too much. Complex encodings get confusing fast.
eagerpies.com
Remove clutter. Visual decoration is fun but distracting!
wtfviz.net
None
Labels and Axes Getting things right is not a weakness.
wrd.cm/1aNuo9g
bit.ly/1biMrVt
bit.ly/1biMrVt
Give your data context. Don’t be afraid to add annotations
or drill down.
None
Use color smartly. Color in datavis is not just an
aesthetic decision.
Rob Simmon, bit.ly/1eM54jF
Cynthia Brewer, colorbrewer2.org, bl.ocks.org
Complex needs simple. Simple interfaces provide ways into complex data.
None
None
Tilemill demo! mapbox.com/tilemill
None
None
None
None
None
d3.js d3js.org
None
None
Tools and Resources
mapping designy cookie cutter non-technical technical tilemill leaflet, d3 fusion
tables google maps
charting highcharts designy cookie cutter non-technical technical illustrator d3 tableau
munging python designy cookie cutter non-technical technical google refine csvkit
d3 http://alignedleft.com/tutorials/d3/ https://github.com/mbostock/d3/wiki/Tutorials fusion tables http://bit.ly/OkFa7r leaflet http://leaflet.cloudmade.com/examples/quick-start.html illustrator http://flowingdata.com/2008/12/16/how-to-make-a-graph-in-adobe-illustrator/
tutorials
Data Visualization Blogs http://flowingdata.com http://datavisualization.ch http://thewhyaxis.info http://chartsnthings.tumblr.com http://datahacker.tumblr.com http://www.visualisingdata.com/index.php/resources/ Data
Visualization Collections http://marijerooze.nl/thesis/graphics http://www.pinterest.com/arnicas http://pinterest.com/shashashasha/data-visualization more links
Edward Tufte The Visual Display of Quantitative Information http://www.amazon.com/The-Visual-Display-Quantitative-Information/dp/0961392142 Nathan
Yau Visualize This! http://book.flowingdata.com/ Andrew Abela Advanced Presentation by Design http://www.extremepresentation.com/books/advanced_presentation_by_design/ printed stuff
Sweet as.