1. Krist Wongsuphasawat / @kristw
Adventure in data
A tour of visualizations at Twitter

2. Krist Wongsuphasawat / @kristw

3. Computer Engineer
Bangkok, Thailand
PhD in Computer Science
Univ. of Maryland
Information Visualization
IBM
Microsoft
Data Visualization Scientist
Twitter
Krist Wongsuphasawat / @kristw

4. Krist Wongsuphasawat / @kristw
Adventure in data
A whirlwind tour of visualization projects at Twitter

5. Get data

7. Having all Tweets
How people think I feel.

8. How people think I feel. How I really feel.
Having all Tweets

9. • Too much data. Want only relevant Tweets
• hashtag: #BRA
• keywords: “goal”
• Need to aggregate & reduce size
• Long processing time (hours)
Challenges

10. Hadoop Cluster
Data Storage
Workflow

11. Hadoop Cluster
Pig / Scalding (slow)
Data Storage
Tool
Workflow

12. Hadoop Cluster
Pig / Scalding (slow)
Data Storage
Tool
Workflow

13. Hadoop Cluster
Pig / Scalding (slow)
Data Storage
Tool
Smaller datasetYour laptop
Workflow

14. Hadoop Cluster
Pig / Scalding (slow)
Data Storage
Tool
Final dataset
Tool node.js / python / excel (fast)
Your laptop
Workflow
Smaller dataset

15. Krist Wongsuphasawat / @kristw
Cleaning data
a story of my life

16. Storytelling
Analytics Tools
Creative
Projects

17. To understand the world
and share the stories
To understand Twitter users
and improve the service
To showcase the data
and inspire
Projects
Storytelling
Analytics Tools
Creative

18. Storytelling1
World Cup Election
Oscars
TV Shows New Year
Earthquake
Super Bowl
Protest
…
Behaviors
Sleeping
Daylight saving
Language
…
Events
Fasting
Information spread
Commute

19. So many things
we could learn
from Twitter data

20. Give us interesting vis
about xxxx by Nov 10

21. Challenge accepted

22. Tweets
(+ media)
photos, videos
What?
Where? When?
GEO TIME
TEXT

23. What?
Where? When?
GEO TIME
TEXT
Visualize Tweets

24. What?
Where? When?
GEO TIME
TEXT
Visualize Tweets

25. Time Tweets/second

26. Time Tweets/second

27. Time Tweets/second + Annotation
http://www.flickr.com/photos/twitteroffice/5681263084/

28. What?
Where? When?
GEO TIME
TEXT
Visualize Tweets

29. Geo
Heatmap
Low density
High density

30. Geo
San Francisco
flickr.com/photos/twitteroffice/8798020541
Low density
High density

31. Geo
San Francisco
Rebuild the world
based on
tweet volumes
twitter.github.io/interactive/andes/

32. What?
Where? When?
GEO TIME
TEXT
Visualize Tweets

33. Text
www.wordle.net
Some experiments
during World Cup

34. Text
www.wordle.net
Word cloud of Tweets right after the 1st goal

35. Text Word cloud of Tweets right after the 1st goal
www.wordle.net
It was an “own” goal.

36. Text WordTree [Wattenberg & Viégas 2008]
www.jasondavies.com/wordtre
www.jasondavies.com/wordtree

37. Text
word/phrase/hashtag count
topic

38. What?
Where? When?
GEO TIME
TEXT
Visualize Tweets

39. Time + Geo Tweet pattern [Rios & Lin 2012]
Night
Late night
Daytime
Night
Late night
Daytime

40. Night
Late night
Daytime
Night
Late night
Daytime
Time + Geo Tweet pattern [Rios & Lin 2012]

41. Night
Late night
Daytime
Night
Late night
Daytime
Time + Geo Tweet pattern [Rios & Lin 2012]

42. Night
Late night
Daytime
Night
Late night
Daytime
Time + Geo Tweet pattern [Rios & Lin 2012]

43. What?
Where? When?
GEO TIME
TEXT
Visualize Tweets

44. Geo + Text Real-time Tweet map

45. Geo + Text Real-time Tweet map

46. most
frequent
term
Geo + Text Real-time Tweet map

47. Gmail was down
Jan 24, 2014
Geo + Text Real-time Tweet map

48. Nelson Mandela
passed away
Dec 5, 2013
Geo + Text Real-time Tweet map

49. What?
Where? When?
GEO TIME
TEXT
Visualize Tweets

50. Time + Text
UEFA Champions League
Biggest tournament for European soccer clubs
Many Tweets during the matches

51. UEFA Champions League
Dortmund Bayern Munich
Count Tweets mentioning
the teams every minute
Team 1 Team 2
Time + Text

52. Time + Text UEFA Champions League

53. + “goal” count
+ context
Time + Text UEFA Champions League

54. + “offside”
Time + Text UEFA Champions League

55. + players
Time + Text UEFA Champions League

56. A B C D
A C
C
Competition Tree
vs vs
vs + =
uclfinal.twitter.com

57. What?
Where? When?
GEO TIME
TEXT
Visualize Tweets

58. Time + Text + Geo State of the Union
twitter.github.io/interactive/sotu2014

59. 1) timeline + topic from Tweets
4) Density map of
Tweets about
selected topic
3) Volume of Tweets
by topics
during selected
part of the SOTU
2) context
(speech)
twitter.github.io/interactive/sotu2014
Time + Text + Geo State of the Union

60. World Cup 2014Time + Text
interactive.twitter.com/wccompetitree

61. Time + Text + Geo World Cup 2014
interactive.twitter.com/wccompetitree

62. What?
Where? When?
GEO TIME
TEXT
Visualize Tweets

63. What?
Where? When?
GEO TIME
TEXT
Visualize Tweets
+
Non-Twitter data
CONTEXT

64. Time + Text New Year 2014

65. Time + Text New Year 2014

66. Time + Text + Geo (c) New Year 2014
twitter.github.io/interactive/newyear2014/

67. Analytics Tools2
Data sources
Output
explore
analyze
present
get
*
*

68. Analytics Tools2
Data sources
Output
explore
analyze
present
get
*
*

69. Analytics Tools2
Data sources
Output
explore
analyze
present
get
*
*
ad-hoc scripts

70. Analytics Tools2
Data sources
Output
explore
analyze
present
get
*
*
ad-hoc scripts tools for exploration

71. User activity logs

72. UsersUseTwitter

73. UsersUse
Product Managers
Curious
Twitter

74. UsersUse
Curious
Engineers
Log data
in Hadoop
Write Twitter
Instrument
Product Managers

75. What are being logged?
tweet
activities

76. What are being logged?
tweet from home timeline on twitter.com
tweet from search page on iPhone
activities

77. What are being logged?
tweet from home timeline on twitter.com
tweet from search page on iPhone
sign up
log in
retweet
etc.
activities

78. Organize?

79. log event a.k.a. “client event”
[Lee et al. 2012]

80. log event a.k.a. “client event”
client : page : section : component : element : action
web : home : timeline : tweet_box : button : tweet
1) User ID
2) Timestamp
3) Event name
4) Event detail
[Lee et al. 2012]

81. Log data

82. UsersUse
Curious
Engineers
Log data
in Hadoop
Twitter
Instrument
Write
Product Managers
bigger than
Tweet data

83. UsersUse
Curious
Engineers
Log data
in Hadoop
Data Scientists
Ask
Twitter
Instrument
Write
Product Managers

84. UsersUse
Curious
Engineers
Log data
in Hadoop
Data Scientists
Find
Ask
Twitter
Instrument
Write
Product Managers

85. Log data

86. UsersUse
Curious
Engineers
Log data
in Hadoop
Data Scientists
Find, Clean
Ask
Twitter
Instrument
Write
Product Managers

87. UsersUse
Curious
Engineers
Log data
in Hadoop
Data Scientists
Find, Clean
Ask
Monitor
Twitter
Instrument
Write
Product Managers

88. UsersUse
Curious
Engineers
Log data
in Hadoop
Data Scientists
Find, Clean, Analyze
Ask
Monitor
Twitter
Instrument
Write
Product Managers

89. Log data
EngineersData Scientists
Usersin Hadoop
Find, Clean, Analyze
Use
Monitor
Ask
Curious
1 2
Twitter
Instrument
Write
Product Managers

90. Part I
Find & Monitor
Client Events

91. Motivation

92. Log data
in Hadoop
Engineers & Data Scientists
billions of rows

93. Log data
in Hadoop
Aggregate
10,000+ event types
date client page section comp. elem. action count
20141011 web home home - - impression 100
20141011 web home wtf - - click 20
Engineers & Data Scientists
Client event collection

94. Log data
in Hadoop
Aggregate
10,000+ event types
date client page section comp. elem. action count
20141011 web home home - - impression 100
20141011 web home wtf - - click 20
Engineers & Data Scientists
Client event collection
(Who-to-Follow)

95. Log data
in Hadoop
Aggregate
Client event collection
Engineers & Data Scientists

96. Log data
in Hadoop
Aggregate
Find
client page section component element action
Search
Client event collection
Engineers & Data Scientists

97. Log data
in Hadoop
Aggregate
Find
client page section component element action
Search
Client event collection
Engineers & Data Scientists

98. section?
component?
element?

99. client page section component element action
Search
Find
Log data
in Hadoop
Aggregate
web home * * impression*
Client event collection
Engineers & Data Scientists

100. client page section component element action
Search
Find
Query
Return
Log data
in Hadoop
Results
web : home : home : - : - : impression
web : home : wtf : - : - : impression
Aggregate
web home * * impression*
Client event collection
Engineers & Data Scientists

101. client page section component element action
Search
Find
Query
Return
Log data
in Hadoop
Results
web : home : home : - : - : impression
web : home : wtf : - : - : impression
Aggregate
search can be better
Client event collection
Engineers & Data Scientists

102. client page section component element action
Search
Find
Query
Return
Log data
in Hadoop
Results
web : home : home : - : - : impression
web : home : wtf : - : - : impression
Aggregate
10,000+ event types
search can be better
Client event collection
Engineers & Data Scientists

103. client page section component element action
Search
Find
Query
Return
Log data
in Hadoop
Results
web : home : home : - : - : impression
web : home : wtf : - : - : impression
Aggregate
search can be better
10,000+ event types
not everybody knows
What are all sections under web:home?
Client event collection
Engineers & Data Scientists

104. client page section component element action
Search
Find
Query
Return
Log data
in Hadoop
Results
web : home : home : - : - : impression
Aggregate
search can be better
one graph / event
10,000+ event types
not everybody knows
What are all sections under web:home?
Client event collection
Engineers & Data Scientists

105. client page section component element action
Search
Find
Query
Return
Log data
in Hadoop
Results
web : home : home : - : - : impression
Aggregate
search can be better
one graph / event
x 10,000
10,000+ event types
not everybody knows
What are all sections under web:home?
Client event collection
Engineers & Data Scientists

106. !
• Search for client events
• Explore client event collection
• Monitor changes
Goals

107. Design

108. Client event collection
Engineers & Data Scientists

109. See
Client event collection
Engineers & Data Scientists

110. See
Interactions
search box => filter
Client event collection
narrow down
Engineers & Data Scientists

111. See
How to visualize?
narrow down
Client event collection
Engineers & Data Scientists
Interactions
search box => filter

112. See
How to visualize?
narrow down
Client event collection
Engineers & Data Scientists
client : page : section : component : element : actionInteractions
search box => filter

113. Client event hierarchy
iphone home -
- - impression
tweet tweet click
iphone:home:-:-:-:impression
iphone:home:-:tweet:tweet:click

114. Detect changes
iphone home -
- - impression
tweet tweet click
iphone home -
- - impression
tweet tweet click
TODAY
7 DAYS AGO
compared to

115. Calculate changes
+5% +5% +5%
+10% +10% +10%
-5% -5% -5%
DIFF

116. Display changes
iphone home -
- - impression
tweet tweet click
Map of the Market [Wattenberg 1999], StemView [Guerra-Gomez et al. 2013]

117. Display changes
home -
- - impression
tweet tweet click
iphone

118. Demo
Scribe Radar

119. Twitter for Banana

121. Part II
Analysis

122. Count page visits
banana : home : - : - : - : impression
home page

123. Funnel
home page
profile page

124. Funnel analysis
banana : home : - : - : - : impression
banana : profile : - : - : - : impression
1 jobhome page
profile page
1 hour

125. Funnel analysis
banana : home : - : - : - : impression
banana : profile : - : - : - : impression banana : search : - : - : - : impression
home page
profile page search page
2 jobs
2 hours

126. Funnel analysis
banana : home : - : - : - : impression
banana : profile : - : - : - : impression banana : search : - : - : - : impression
home page
profile page search page
Specify all funnels manually!
n jobs
n hours

127. Goal
banana : home : - : - : - : impression
… ……
1 job => all funnels, visualized
home page

128. • Visualize an overview of event sequences
!
• Big data? eBay checkout sequences
Related work
[Wongsuphasawat et al. 2011, Monroe et al. 2013, …]
[Shen et al. 2013]

129. User sessions
Session#1
A
B
start
end
Session#4
start
end
A
Session#2
B
start
end
A
Session#3
C
start
end
A

130. Aggregate
4 sessions
A
BB C
start
end endend
A A
end
A

131. Aggregate
A
BB C
start
end endend
end
4 sessions

132. Aggregate
C
start
end endend
end
A
B
4 sessions

133. Aggregate
C
start
end endend
end
A
B
4 sessions

134. Aggregate
C
start
end endend
A
B end
4 sessions

135. Aggregate
C
start
endend
A
B end
4 sessions

136. Aggregate
C
start
endend
A
B end
4 sessions

137. Aggregate
start
endend
A
CB end
4 sessions

138. Aggregate
4,000,000 sessions
endend
A
CB end
start

139. Twitter for Banana

140. try with sample data
(~millions sessions, 10,000+ event types)
!
original paper
(100,000 sessions, ~10 event types)

141. fail…

142. How to make it work?

143. # of unique sequences

144. 1. Reduce event types
Reduce # of unique sequences

145. 1. Reduce event types
Reduce # of unique sequences
10,000 types select
tweet
sign up
log out

146. 1. Reduce event types
Reduce # of unique sequences
10,000 types select
tweet
sign up
log out

147. 1. Reduce event types
Reduce # of unique sequences
10,000 types select merge
tweet from home timeline
tweet from search page
tweet …
= tweet

148. 1. Reduce event types
2. Reduce sequence length
Reduce # of unique sequences

149. 1. Reduce event types
2. Reduce sequence length
Reduce # of unique sequences
session
1000 events

150. 1. Reduce event types
2. Reduce sequence length
Reduce # of unique sequences
session
10 events after (window size & direction)
1000 events
visit home page (alignment)

151. 1. Reduce event types
2. Reduce sequence length
Reduce # of unique sequences
Ask users for input}

152. 1. Reduce event types
2. Reduce sequence length
3. More aggregation on Hadoop
Reduce # of unique sequences
Ask users for input}

153. Collapse events
Sequence
ABBBCCCC
ABBCC
ABC
ABCCCC
ABCD
ABCCCD
ABCCE
ABCDF
ABCDG
ABCDH
e.g.
tweet, tweet, tweet, … = tweet

154. Sequence
ABC
ABC
ABC
ABC
ABCD
ABCD
ABCE
ABCDF
ABCDG
ABCDH
Collapse events

155. Group & Count
Sequence
ABC
ABCD
ABCE
ABCDF
ABCDG
ABCDH
…
Count
2000
80
20
1
1
1
…

156. Group & Count
Sequence
ABC
ABCD
ABCE
ABCDF
ABCDG
ABCDH
ABCDI
ABCDJK
ABCDJL
Count
2000
80
20
1
1
1
1
1
1
rare sequences
(count < threshold)

157. Truncate
Sequence
ABC
ABCD
ABCE
ABCDx
ABCDx
ABCDx
ABCDx
ABCDJx
ABCDJx
Count
2000
80
20
1
1
1
1
1
1
Replace last event with x (…)

158. Sequence
ABC
ABCD
ABCE
ABCDx
ABCDJx
Count
2000
80
20
4
2
Group & Count

159. Truncate more
Sequence
ABC
ABCD
ABCE
ABCDx
ABCDx
Count
2000
80
20
4
2

160. Group & Count
Sequence
ABC
ABCD
ABCE
ABCDx
Count
2000
80
20
6

161. 1. Define set of events
2. Pick alignment, direction and window size
3. Run Hadoop job (with more aggregation)
4. Wait for it… (2+ hrs)
5. Visualize
Final process
~100,000 patterns (10MB)
gazillion patterns (TBs)

162. Demo
Flying Sessions

163. • Large-scale User Activity Logs + Visual Analytics
• Used in day-to-day operations at Twitter
• Generalize to smaller systems
Summary
Challenge
big data
small data
visualize & interact
aggregate
& sacrifice

164. Data sources
Output
Creative3
…

165. https://medium.com/@kristw/designing-the-game-of-tweets-7f87c30dc5a2
Demo / Game of Tweets

166. To understand the world
and share the stories
To understand Twitter users
and improve the service
To showcase the data
and inspire
Projects
Storytelling
Analytics Tools
Creative

167. Oh no…. NOT AGAIN

168. To understand the world
and share the stories
To understand Twitter users
and improve the service
To showcase the data
and inspire
Projects
Storytelling
Analytics Tools
Creative
Reusable
Toolkits
To implement
once and for all

169. Coming soon
Demo / Labella.js

170. https://github.com/twitter/d3kit
Demo / d3Kit
http://www.slideshare.net/kristw/d3kit

171. Conclusions
Data are everywhere.
Many applications:
Journalism, Product development, Art, etc.
Combine visualization with other skills:
HCI, Design, Stats, ML, etc.
Don’t repeat yourself.
Krist Wongsuphasawat / @kristw
interactive.twitter.com kristw.yellowpigz.com

172. @philogb @trebor @miguelrios
@smrogers @lintool @linuslee @chuangl4
and many other colleagues at @twitter
Acknowledgement

173. Conclusions
Data are everywhere.
Many applications:
Journalism, Product development, Art, etc.
Combine visualization with other skills:
HCI, Design, Stats, ML, etc.
Don’t repeat yourself.
Krist Wongsuphasawat / @kristw
interactive.twitter.com kristw.yellowpigz.com

174. Thank you

175. Questions?