1. Hacking public-facing
visualizations at Twitter
Nicolas Garcia Belmonte / @philogb

3. thejit.org PhiloGL

4. https://interactive.twitter.com/

6. Hacking public-facing
visualizations

7. Hacking public-facing
visualizations at Twitter

8. Platform
!
Global / Real-Time / Conversational

9. Global
!

10. Sports
WORLD CUP
!
GLOBAL

11. Visual Display

12. Visual Display

13. Visual Display

14. Visual Display

15. Real-Time
!

16. Government
STATE OF THE UNION
!
REAL-TIME

17. 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

18. Visual Display

19. Visual Display

20. Visual Display

21. Visual Display

23. Conversational
!

24. News
TYPHOON HAIYAN
!
CONVERSATIONAL

25. 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

26. Visual Display

27. Visual Display

28. Visual Display

29. Visual Display

30. Visual Display

31. Visual Display

32. Visual Display
http://github.com/philogb/mingle

33. Implementation
!
!

34. 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

35. Libraries used

36. 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

37. When to Choose WebGL ?

38. COOL FACTOR

39. BRANDS

40. BRANDS

41. BRANDS

42. Key takeaways
!
!

44. 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.)

45. @philogb
https://interactive.twitter.com/