From Data to Visualization, what happens in between?
81 likes48,143 views
Krist Wongsuphasawat discusses the importance and techniques of data visualization, emphasizing the power of visual representations in uncovering insights and telling stories with data. The document explains different types of data visualizations, approaches to selecting appropriate tools based on data types and desired outcomes, and outlines an ideal workflow for creating visualizations. It highlights the significance of understanding the data first before choosing visualization methods.
![Character Co-occurrences
{!
nodes: [!
'valjean',!
'fantine',!
'cosette',!
...!
],!
edges: [!
{character1: 'valjean', character2: 'fantine', 10},!
{character1: 'valjean', character2: 'cosette', 5},!
...!
]!
}!
DATA](https://image.slidesharecdn.com/datatovis2-140409130521-phpapp02/85/From-Data-to-Visualization-what-happens-in-between-44-320.jpg)
From Data to Visualization, what happens in between?
- 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
- 6. pretty graphics POWER OF THE EYES
- 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
- 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
- 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
- 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
- 37. Trees hierarchy
- 39. Stock Market Financial All stocks Healthcare Technology ... Apple Google Canon ... DATA
- 44. Character Co-occurrences {! nodes: [! 'valjean',! 'fantine',! 'cosette',! ...! ],! edges: [! {character1: 'valjean', character2: 'fantine', 10},! {character1: 'valjean', character2: 'cosette', 5},! ...! ]! }! DATA
- 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
- 56. Photogrid (Treemap + photo) http://twitter.github.io/interactive/sochi
- 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
- 67. Behind the scene
- 75. VISUALIZATION FROM DATA TO @kristw DATA first, not tools.
- 76. VISUALIZATION FROM DATA TO @kristw DATA first, not tools. visual encodings (by data types) + interactionschoose:
- 77. VISUALIZATION FROM DATA TO visual encodings (by data types) + interactions DATA first, not tools. @kristw choose: twitter.github.io/interactive
- 78. Thank you