Hacking public-facing data visualizations at Twitter
-
Upload
philogb -
Category
Data & Analytics
-
view
3.783 -
download
0
description
Transcript of Hacking public-facing data visualizations at Twitter
![Page 1: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/1.jpg)
Hacking public-facing visualizations at Twitter
Nicolas Garcia Belmonte / @philogb
![Page 2: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/2.jpg)
![Page 3: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/3.jpg)
thejit.org PhiloGL
![Page 4: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/4.jpg)
https://interactive.twitter.com/
![Page 5: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/5.jpg)
![Page 6: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/6.jpg)
Hacking public-facing visualizations
![Page 7: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/7.jpg)
Hacking public-facing visualizations at Twitter
![Page 8: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/8.jpg)
Platform !
Global / Real-Time / Conversational
![Page 9: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/9.jpg)
Global !
![Page 10: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/10.jpg)
SportsWORLD CUP
!GLOBAL
![Page 11: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/11.jpg)
Visual Display
![Page 12: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/12.jpg)
Visual Display
![Page 13: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/13.jpg)
Visual Display
![Page 14: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/14.jpg)
Visual Display
![Page 15: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/15.jpg)
Real-Time !
![Page 16: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/16.jpg)
GovernmentSTATE OF THE UNION
!REAL-TIME
![Page 17: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/17.jpg)
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
![Page 18: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/18.jpg)
Visual Display
![Page 19: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/19.jpg)
Visual Display
![Page 20: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/20.jpg)
Visual Display
![Page 21: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/21.jpg)
Visual Display
![Page 22: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/22.jpg)
![Page 23: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/23.jpg)
Conversational !
![Page 24: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/24.jpg)
NewsTYPHOON HAIYAN
!CONVERSATIONAL
![Page 25: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/25.jpg)
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
![Page 26: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/26.jpg)
Visual Display
![Page 27: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/27.jpg)
Visual Display
![Page 28: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/28.jpg)
Visual Display
![Page 29: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/29.jpg)
Visual Display
![Page 30: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/30.jpg)
Visual Display
![Page 31: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/31.jpg)
Visual Display
![Page 32: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/32.jpg)
Visual Display
http://github.com/philogb/mingle
![Page 33: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/33.jpg)
Implementation !
!
![Page 34: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/34.jpg)
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
![Page 35: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/35.jpg)
Libraries used
![Page 36: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/36.jpg)
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
![Page 37: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/37.jpg)
When to Choose WebGL ?
![Page 38: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/38.jpg)
COOL FACTOR
![Page 39: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/39.jpg)
BRANDS
![Page 40: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/40.jpg)
BRANDS
![Page 41: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/41.jpg)
BRANDS
![Page 42: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/42.jpg)
Key takeaways !
!
![Page 43: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/43.jpg)
![Page 44: Hacking public-facing data visualizations at Twitter](https://reader033.fdocuments.us/reader033/viewer/2022052410/54bc2f4c4a79592a738b4598/html5/thumbnails/44.jpg)
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.)