Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Hacking public-facing
visualizations at Twitter
Nicolas Garcia Belmonte / @philogb
thejit.org PhiloGL
https://interactive.twitter.com/
Hacking public-facing
visualizations
Hacking public-facing
visualizations at Twitter
Platform
!
Global / Real-Time / Conversational
Global
!
Sports
WORLD CUP
!
GLOBAL
Visual Display
Visual Display
Visual Display
Visual Display
Real-Time
!
Government
STATE OF THE UNION
!
REAL-TIME
Data Collection & Analysis
!
• Transcript of the address annotated paragraph by paragraph
• Tweets with #SOTU sent during ...
Visual Display
Visual Display
Visual Display
Visual Display
Conversational
!
News
TYPHOON HAIYAN
!
CONVERSATIONAL
Data Collection & Analysis
!
• Fetch geolocated Tweets
• Filter text containing “Philippines” and “Help”
• Translate keywo...
Visual Display
Visual Display
Visual Display
Visual Display
Visual Display
Visual Display
Visual Display
http://github.com/philogb/mingle
Implementation
!
!
Scaffold Build Manage
+ +
Generate static-
site structure
Building Tasks for JS/
CSS/HTML
!
Data Transform Phase
Install li...
Libraries used
Visual Component
Tweet Histogram Choropleth Map
# of Elements Small (~40) Small (~50)
Shape Complexity Simple: (Rectangle)...
When to Choose WebGL ?
COOL FACTOR
BRANDS
BRANDS
BRANDS
Key takeaways
!
!
Audience
!
• Verticals to focus on (News, Gov, Sports, TV, Music)
• Data to focus on (Interest topics from the community)
...
@philogb
https://interactive.twitter.com/
Hacking public-facing data visualizations at Twitter
Hacking public-facing data visualizations at Twitter
Hacking public-facing data visualizations at Twitter
Hacking public-facing data visualizations at Twitter
Upcoming SlideShare
Loading in …5
×

Hacking public-facing data visualizations at Twitter

5,903 views

Published on

  • Hello! High Quality And Affordable Essays For You. Starting at $4.99 per page - Check our website! https://vk.cc/82gJD2
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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/

×