From Data to Visualization, what happens in between?

  • 8,655 views
Uploaded on

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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
No Downloads

Views

Total Views
8,655
On Slideshare
0
From Embeds
0
Number of Embeds
25

Actions

Shares
Downloads
213
Comments
1
Likes
47

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. VISUALIZATION Krist Wongsuphasawat (@kristw) FROM DATA TO Senior Data Visualization Scientist, Twitter
  • 2. Twitter Analytics / Visual Insights Internal Dashboarding system Exploratory data visualization tools ! External Public facing visualizations #interactive
  • 3. #interactive http://twitter.github.io/interactive
  • 4. Examples
  • 5. What are visualizations?
  • 6. pretty graphics POWER OF THE EYES
  • 7. pretty MEANINGFUL
  • 8. 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
  • 9. 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!
  • 10. 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
  • 11. Napoleon’s March geography time course (attack/retreat) quantity of troops temperature direction
  • 12. London Cholera Outbreak
  • 13. London Cholera Outbreak
  • 14. Visualization • Power • Understand data quickly • Discover hidden facts • Usage • Storytelling / Reporting • Exploratory data analysis
  • 15. “Visualization” • Information Visualization (academia) • InfoVis • Data Visualization (commonly used) • DataVis ! • infographics (...)
  • 16. How to start? • What tool should I use? ! ! DATA
  • 17. How to start? • What tool should I use? ! ! ! 1. What type of data do I have? DATA
  • 18. DATA 1) What type of data?
  • 19. DATA 1) What type of data? vis7 vis5 vis3 vis2 vis1 vis6 vis4 Many options... Which visualization technique should I use?
  • 20. 1) What type of data? • Visualizations are categorized by data types: • 2,3- dimensional • Multi-dimensional • Temporal • Tree • Network • etc.
  • 21. Let’s take a tour.
  • 22. 2D, 3D data (real world objects) ! a.k.a. Scientific Visualization (SciVis)
  • 23. 2D: Maps
  • 24. 3D: Brain
  • 25. Multi-dimensional data abstract dimensions (+ real world dimensions)
  • 26. 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
  • 27. Scatterplot http://bl.ocks.org/mbostock/3887118 Sepal Length Sepal Width
  • 28. Scatterplot Matrix http://bl.ocks.org/mbostock/4063663 Sepal Length Sepal Width Petal Length Petal Width
  • 29. 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
  • 30. Parallel Coordinates http://bl.ocks.org/jasondavies/1341281
  • 31. The Geography of Tweets @miguelrios
  • 32. 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
  • 33. Temporal Data value changes over time events
  • 34. Line charts http://bl.ocks.org/mbostock/3884955
  • 35. Calendar chart
  • 36. Events on timeline http://evolutionofweb.appspot.com/#/evolution/day
  • 37. Trees hierarchy
  • 38. Tree http://bl.ocks.org/mbostock/4339083
  • 39. Stock Market Financial All stocks Healthcare Technology ... Apple Google Canon ... DATA
  • 40. TreeMaps http://www.marketwatch.com/tools/stockresearch/marketmap
  • 41. Icicle http://bl.ocks.org/mbostock/1005873
  • 42. Sunburst http://bl.ocks.org/mbostock/4348373
  • 43. Networks nodes and edges
  • 44. Character Co-occurrences {! nodes: [! 'valjean',! 'fantine',! 'cosette',! ...! ],! edges: [! {character1: 'valjean', character2: 'fantine', 10},! {character1: 'valjean', character2: 'cosette', 5},! ...! ]! }! DATA
  • 45. Node-link diagram http://bl.ocks.org/mbostock/4062045
  • 46. Matrix http://bost.ocks.org/mike/miserables/
  • 47. Combination Multi-D + Temporal Multi-D + Tree Multi-D + Network Temporal + Tree Temporal + Network ...
  • 48. Life Expectancy (Multi-D + Temporal) http://www.gapminder.org/videos/the-river-of-myths/
  • 49. VISUALIZATION visual encodings + interactions tooltips animation highlight filter etc. bar chart line chart matrix node-link treemaps etc. or multiple views (data type)
  • 50. DATA 1) What type of data? vis7 vis5 vis3 vis2 vis1 vis6 vis4 Many options... Which visualization technique should I use?
  • 51. DATA 1) What type of data? vis7 vis3 vis4 Less options... Still, which one should I use?
  • 52. 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
  • 53. 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
  • 54. Storytelling Exploratory
  • 55. Four more years https://www.youtube.com/watch?v=01un0ORjQps
  • 56. Photogrid (Treemap + photo) http://twitter.github.io/interactive/sochi
  • 57. Soccer Tournament https://uclfinal.twitter.com/
  • 58. State of the Union http://twitter.github.io/interactive/sotu2014/#p1
  • 59. Ok, now tools. 1. What type of data do I have? 2. What do I want from the data?
  • 60. Tools Option 1: Programming library Option 2: Packaged software You have to write code. (Mostly) no coding involved
  • 61. 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
  • 62. 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
  • 63. 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!
  • 64. 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!
  • 65. 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
  • 66. New year 2014 http://twitter.github.io/interactive/newyear2014/
  • 67. Behind the scene
  • 68. VISUALIZATION FROM DATA TO @kristw
  • 69. VISUALIZATION FROM DATA TO @kristw DATA first, not tools.
  • 70. VISUALIZATION FROM DATA TO @kristw DATA first, not tools. visual encodings
 (by data types) + interactionschoose:
  • 71. VISUALIZATION FROM DATA TO visual encodings
 (by data types) + interactions DATA first, not tools. @kristw choose: twitter.github.io/interactive
  • 72. Thank you