Hacking public-facing data visualizations at Twitter

5,545 views

Published on

Hacking public-facing data visualizations at Twitter

  1. 1. Hacking public-facing visualizations at Twitter Nicolas Garcia Belmonte / @philogb
  2. 2. thejit.org PhiloGL
  3. 3. https://interactive.twitter.com/
  4. 4. Hacking public-facing visualizations
  5. 5. Hacking public-facing visualizations at Twitter
  6. 6. Platform ! Global / Real-Time / Conversational
  7. 7. Global !
  8. 8. Sports WORLD CUP ! GLOBAL
  9. 9. Visual Display
  10. 10. Visual Display
  11. 11. Visual Display
  12. 12. Visual Display
  13. 13. Real-Time !
  14. 14. Government STATE OF THE UNION ! REAL-TIME
  15. 15. Data Collection & Analysis ! • Transcript of the address annotated paragraph by paragraph • Tweets with #SOTU sent during the address • Perform matching with paragraphs • Generate topic analysis in Tweet text • Provide geographical breakdown
  16. 16. Visual Display
  17. 17. Visual Display
  18. 18. Visual Display
  19. 19. Visual Display
  20. 20. Conversational !
  21. 21. News TYPHOON HAIYAN ! CONVERSATIONAL
  22. 22. Data Collection & Analysis ! • Fetch geolocated Tweets • Filter text containing “Philippines” and “Help” • Translate keywords in multiple languages (22) • Apply clustering (MINGLE) • Sort Tweets by relevance
  23. 23. Visual Display
  24. 24. Visual Display
  25. 25. Visual Display
  26. 26. Visual Display
  27. 27. Visual Display
  28. 28. Visual Display
  29. 29. Visual Display http://github.com/philogb/mingle
  30. 30. Implementation ! !
  31. 31. Scaffold Build Manage + + Generate static- site structure Building Tasks for JS/ CSS/HTML ! Data Transform Phase Install libs. Depending on choices made: ! HTML, SVG, 2DCanvas, WebGL Interactive Generator for Yeoman
  32. 32. Libraries used
  33. 33. Visual Component Tweet Histogram Choropleth Map # of Elements Small (~40) Small (~50) Shape Complexity Simple: (Rectangle) Complex: (Concave, Convex, Connected, Disconnected) Interactive Yes Yes Standard Chosen HTML SVG Choosing the right Standard
  34. 34. When to Choose WebGL ?
  35. 35. COOL FACTOR
  36. 36. BRANDS
  37. 37. BRANDS
  38. 38. BRANDS
  39. 39. Key takeaways ! !
  40. 40. Audience ! • Verticals to focus on (News, Gov, Sports, TV, Music) • Data to focus on (Interest topics from the community) • Type of the visualization (Exploratory / Expository) • Tone of the visualization (Insightful, Playful, Storytelling) • Implementation (Mobile friendly, SVG, Canvas, WebGL, etc.)
  41. 41. @philogb https://interactive.twitter.com/

×