O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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
Terminou este documento.
Transfira e leia offline.
Próximos SlideShares
From Data Journalism to Data Illustration - Visualizing Data with JavaScript at Twitter
Avançar
Próximos SlideShares
From Data Journalism to Data Illustration - Visualizing Data with JavaScript at Twitter
Avançar
Transfira para ler offline e ver em ecrã inteiro.

Compartilhar

Hacking public-facing data visualizations at Twitter

Baixar para ler offline

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/
  • Douneg

    Jul. 9, 2015
  • gabmail

    Nov. 7, 2014
  • content-supermarket

    Oct. 30, 2014
  • dedevillela

    Sep. 10, 2014
  • rerebelo

    Sep. 7, 2014
  • rdahis

    Sep. 7, 2014
  • martinezbeatch

    Sep. 7, 2014
  • checkmoz

    Sep. 6, 2014
  • luiy

    Sep. 3, 2014
  • xaosmedia

    Sep. 2, 2014
  • candelagallardo140

    Sep. 1, 2014
  • bditl

    Sep. 1, 2014
  • handelseib

    Aug. 28, 2014
  • norambunch

    Aug. 28, 2014
  • mikeseven

    Aug. 27, 2014

Vistos

Vistos totais

6.480

No Slideshare

0

De incorporações

0

Número de incorporações

1.199

Ações

Baixados

28

Compartilhados

0

Comentários

0

Curtir

15

×