From Data to Visualization, what happens in between?
Upcoming SlideShare
Loading in...5
×
 

From Data to Visualization, what happens in between?

on

  • 8,027 views

A talk at Data Visualization Summit 2014 in Santa Clara, CA ...

A talk at Data Visualization Summit 2014 in Santa Clara, CA

ABSTRACT: What is the thought process that transforms data into visualizations? In this presentation, I will talk about guidelines that will help you when starting with raw data, walk through standard techniques, and also discuss things to keep in mind when making design decisions.

Statistics

Views

Total Views
8,027
Views on SlideShare
7,416
Embed Views
611

Actions

Likes
41
Downloads
192
Comments
1

78 Embeds 611

http://visualoop.com 207
https://twitter.com 157
http://www.scoop.it 63
https://www.facebook.com 32
http://tweetedtimes.com 27
http://feedly.com 23
http://www.google.com 10
http://shuku2.tumblr.com 9
http://feeds.feedburner.com 6
http://www.inoreader.com 4
http://libguides.mssm.edu 3
http://getpocket.com 2
http://digg.com 2
https://www.linkedin.com 2
https://m.facebook.com&_=1397609520649 HTTP 1
https://m.facebook.com&_=1397618206332 HTTP 1
https://m.facebook.com&_=1397618198958 HTTP 1
https://m.facebook.com&_=1397618290345 HTTP 1
https://m.facebook.com&_=1397618185071 HTTP 1
https://m.facebook.com&_=1397613949748 HTTP 1
https://m.facebook.com&_=1397612143605 HTTP 1
https://m.facebook.com&_=1397612133932 HTTP 1
https://m.facebook.com&_=1397612392501 HTTP 1
https://m.facebook.com&_=1397609527823 HTTP 1
https://m.facebook.com&_=1397609525128 HTTP 1
https://m.facebook.com&_=1397609519276 HTTP 1
https://m.facebook.com&_=1397608097776 HTTP 1
https://m.facebook.com&_=1397609522460 HTTP 1
https://m.facebook.com&_=1397618281932 HTTP 1
https://m.facebook.com&_=1397619020606 HTTP 1
https://m.facebook.com&_=1405466904533 HTTP 1
http://www.pinterest.com 1
https://m.facebook.com&_=1398820642831 HTTP 1
https://m.facebook.com&_=1397692788502 HTTP 1
https://m.facebook.com&_=1397658410028 HTTP 1
https://m.facebook.com&_=1397656855637 HTTP 1
https://m.facebook.com&_=1397655027266 HTTP 1
https://m.facebook.com&_=1397648356773 HTTP 1
https://m.facebook.com&_=1397648091352 HTTP 1
https://m.facebook.com&_=1397645413563 HTTP 1
https://m.facebook.com&_=1397622464503 HTTP 1
https://m.facebook.com&_=1397621017605 HTTP 1
https://m.facebook.com&_=1397621088903 HTTP 1
http://www.slideee.com 1
https://m.facebook.com&_=1397609517563 HTTP 1
https://m.facebook.com&_=1397607514699 HTTP 1
https://m.facebook.com&_=1397604865222 HTTP 1
https://m.facebook.com&_=1397604833120 HTTP 1
https://m.facebook.com&_=1397604415871 HTTP 1
https://m.facebook.com&_=1397604124747 HTTP 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • my c­­­­o-­­­­wor­­­­ker's ha­­­­lf-si­­­­ster ma­­­­kes $8­­­­9 /hou­­­­r o­­­­n t­­­­he l­­­­aptop . Sh­­­­e ha­­­­s be­­­­en fire­­­­d fro­­­­m w­­­­ork f­­­­or five mo­­­­nths ­­­­b­­­­­­­­ut las­­­­t m­­­­onth h­­­­er c­­­­heck wa­­­­s $21­­­­382 ju­­­­st ­­­­wor­­­­ki­­­­ng o­­­­n th­­­­e la­­­­ptop fo­­­­r a f­­­­ew h­­­­ours.

    l­­­­ook a­­­­t th­­­­is s­­­­ite........ http://goo.gl/ZC87k7
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

From Data to Visualization, what happens in between? From Data to Visualization, what happens in between? Presentation Transcript

  • VISUALIZATION Krist Wongsuphasawat (@kristw) FROM DATA TO Senior Data Visualization Scientist, Twitter
  • Twitter Analytics / Visual Insights Internal Dashboarding system Exploratory data visualization tools ! External Public facing visualizations #interactive
  • #interactive http://twitter.github.io/interactive
  • Examples
  • What are visualizations?
  • pretty graphics POWER OF THE EYES
  • pretty MEANINGFUL
  • Anscombe’s Quartet X Y 10.0 8.04 8.0 6.95 13.0 7.58 9.0 8.81 11.0 8.33 14.0 9.96 6.0 7.24 4.0 4.26 12.0 10.84 7.0 4.82 5.0 5.68 X Y 10.0 9.14 8.0 8.14 13.0 8.74 9.0 8.77 11.0 9.26 14.0 8.10 6.0 6.13 4.0 3.10 12.0 9.13 7.0 7.26 5.0 4.74 X Y 10.0 7.46 8.0 6.77 13.0 12.74 9.0 7.11 11.0 7.81 14.0 8.84 6.0 6.08 4.0 5.39 12.0 8.15 7.0 6.42 5.0 5.73 X Y 8.0 6.58 8.0 5.76 8.0 7.71 8.0 8.84 8.0 8.47 8.0 7.04 8.0 5.25 19.0 12.50 8.0 5.56 8.0 7.91 8.0 6.89 #1 #2 #3 #4
  • Anscombe’s Quartet Property Value Mean of X 11.0 Variance of X 10.0 Mean of Y 7.5 Variance of Y 3.75 Correlation between X and Y 0.816 Linear regression y = 3.0 +0.5x #1 #2 #3 #4 Identical statistics!
  • Anscombe’s Quartet #1 #2 #3 #4 0! 2! 4! 6! 8! 10! 12! 0! 5! 10! 15! 0! 1! 2! 3! 4! 5! 6! 7! 8! 9! 10! 0! 5! 10! 15! 0! 2! 4! 6! 8! 10! 12! 14! 0! 5! 10! 15! 0! 2! 4! 6! 8! 10! 12! 14! 0! 10! 20! but very different
  • Napoleon’s March geography time course (attack/retreat) quantity of troops temperature direction
  • London Cholera Outbreak
  • London Cholera Outbreak
  • Visualization • Power • Understand data quickly • Discover hidden facts • Usage • Storytelling / Reporting • Exploratory data analysis
  • “Visualization” • Information Visualization (academia) • InfoVis • Data Visualization (commonly used) • DataVis ! • infographics (...)
  • How to start? • What tool should I use? ! ! DATA
  • How to start? • What tool should I use? ! ! ! 1. What type of data do I have? DATA
  • DATA 1) What type of data?
  • DATA 1) What type of data? vis7 vis5 vis3 vis2 vis1 vis6 vis4 Many options... Which visualization technique should I use?
  • 1) What type of data? • Visualizations are categorized by data types: • 2,3- dimensional • Multi-dimensional • Temporal • Tree • Network • etc.
  • Let’s take a tour.
  • 2D, 3D data (real world objects) ! a.k.a. Scientific Visualization (SciVis)
  • 2D: Maps
  • 3D: Brain
  • Multi-dimensional data abstract dimensions (+ real world dimensions)
  • Flowers species sepalLength sepalWidth petalLength petalWidth setosa 5.1 3.5 1.4 0.2 setosa 4.9 3.0 1.4 0.2 setosa 4.7 3.2 1.3 0.2 virginica 4.6 3.1 1.5 0.2 virginica 5.0 3.6 1.4 0.2 virginica 5.4 3.9 1.7 0.4 DATA
  • Scatterplot http://bl.ocks.org/mbostock/3887118 Sepal Length Sepal Width
  • Scatterplot Matrix http://bl.ocks.org/mbostock/4063663 Sepal Length Sepal Width Petal Length Petal Width
  • Cars Name economy (mpg) cylinders power (hp) weight (lb) 0-60 mph (s) Ford Mustang 18 6 88 3139 14.5 Honda Accord 31.5 4 68 2045 18.5 Honda Civic 24 4 97 2489 15 Mazda RX-7 23.7 3 100 2420 12.5 DATA
  • Parallel Coordinates http://bl.ocks.org/jasondavies/1341281
  • The Geography of Tweets @miguelrios
  • The Geography of Tweets @miguelrios tweet counts latitude longitude 20,000 27.174526 78.042153 9,000 49.124093 52.201304 1,000 12.2995 31.59592 ... ... ... DATA abstract dimension real world dimensions
  • Temporal Data value changes over time events
  • Line charts http://bl.ocks.org/mbostock/3884955
  • Calendar chart
  • Events on timeline http://evolutionofweb.appspot.com/#/evolution/day
  • Trees hierarchy
  • Tree http://bl.ocks.org/mbostock/4339083
  • Stock Market Financial All stocks Healthcare Technology ... Apple Google Canon ... DATA
  • TreeMaps http://www.marketwatch.com/tools/stockresearch/marketmap
  • Icicle http://bl.ocks.org/mbostock/1005873
  • Sunburst http://bl.ocks.org/mbostock/4348373
  • Networks nodes and edges
  • Character Co-occurrences {! nodes: [! 'valjean',! 'fantine',! 'cosette',! ...! ],! edges: [! {character1: 'valjean', character2: 'fantine', 10},! {character1: 'valjean', character2: 'cosette', 5},! ...! ]! }! DATA
  • Node-link diagram http://bl.ocks.org/mbostock/4062045
  • Matrix http://bost.ocks.org/mike/miserables/
  • Combination Multi-D + Temporal Multi-D + Tree Multi-D + Network Temporal + Tree Temporal + Network ...
  • Life Expectancy (Multi-D + Temporal) http://www.gapminder.org/videos/the-river-of-myths/
  • VISUALIZATION visual encodings + interactions tooltips animation highlight filter etc. bar chart line chart matrix node-link treemaps etc. or multiple views (data type)
  • DATA 1) What type of data? vis7 vis5 vis3 vis2 vis1 vis6 vis4 Many options... Which visualization technique should I use?
  • DATA 1) What type of data? vis7 vis3 vis4 Less options... Still, which one should I use?
  • How to start? • What tool should I use? ! ! ! 1. What type of data do I have? 2. What do I want from the data? DATA
  • 2) What do I want from the data? • Many ways to visualize one type of data. • Things to consider: • audience (data scientist, execs, etc.) • goal (storytelling, exploratory analysis) • tasks
  • Storytelling Exploratory
  • Four more years https://www.youtube.com/watch?v=01un0ORjQps
  • Photogrid (Treemap + photo) http://twitter.github.io/interactive/sochi
  • Soccer Tournament https://uclfinal.twitter.com/
  • State of the Union http://twitter.github.io/interactive/sotu2014/#p1
  • Ok, now tools. 1. What type of data do I have? 2. What do I want from the data?
  • Tools Option 1: Programming library Option 2: Packaged software You have to write code. (Mostly) no coding involved
  • Programming libraries • d3.js, processing, R, etc. ! • Copy and modify from examples. • Can do custom stuffs (if you can figure out how) • More overhead for common task
  • Packaged software • Tableau (multi-dimensional) • Gephi (graph) • NodeXL (graph) • Research projects (contact authors) ! • Just use the software. No hassle of code/debug • Limited functionalities to what the tools can do • Custom designs more difficult
  • Ideal workflow 1. What type of data do I have? 2. What do I want from the data? 3. Pick appropriate techniques/tools 4. Done!
  • Ideal workflow 1. What type of data do I have? 2. What do I want from the data? 3. Pick appropriate techniques/tools 4. Done! Not that easy!
  • Real-life workflow data are dirty unsatisfied transform What type of data do I have? Pre-process data What do I want from the data? Pick appropriate techniques/tools See results change goal change perspective
  • New year 2014 http://twitter.github.io/interactive/newyear2014/
  • Behind the scene
  • VISUALIZATION FROM DATA TO @kristw
  • VISUALIZATION FROM DATA TO @kristw DATA first, not tools.
  • VISUALIZATION FROM DATA TO @kristw DATA first, not tools. visual encodings
 (by data types) + interactionschoose:
  • VISUALIZATION FROM DATA TO visual encodings
 (by data types) + interactions DATA first, not tools. @kristw choose: twitter.github.io/interactive
  • Thank you