Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webstock 2014 Workshop
Search
Sha Hwang
February 12, 2014
Design
0
68
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
97
A Guidebook to Mapping Techniques
sha
2
110
Life after Mercator
sha
1
84
Astronauts and Architects
sha
1
48
Other Decks in Design
See All in Design
プロダクトデザインは子育て/Product design is parenting
medley
0
300
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
280
素晴らしき余白の世界
kasumidyaya
1
110
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
220
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
170
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2.1k
Wishing Star Comic
torije
2
1.2k
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
1
860
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
930
UIをもたらすコンテクストの考察
securecat
9
2.5k
Web 組版の課題とその解法
yamatoiizuka
0
110
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
44
9.7k
Debugging Ruby Performance
tmm1
70
11k
What the flash - Photography Introduction
edds
64
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
RailsConf 2023
tenderlove
4
540
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Typedesign – Prime Four
hannesfritz
36
2.1k
Building Your Own Lightsaber
phodgson
99
5.7k
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.