1. Krist Wongsuphasawat / @kristw
ร้อยเรื่องราวจากข้อมูล
STORYTELLING WITH DATA

2. แนะนําตัวก่อน

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

4. ข้อมูล

5. ประมง

7. 400

9. เก็บข้อมูล
Time Location Type
12:00 Paragon Magikarp
12:05 Siam Dis Magikarp
12:40 CTW Magikarp
… … …

11. เวลา
00:00 12:00 00:006:00 18:00
จำนวนปลา
เวลา

12. DATA VISUALIZATION
การแปลงข้อมูลเป็นภาพ

13. ประวัติศาสตร์

14. data

16. Number of Napoleon's troops,
Distance, Temperature,
Latitude and Longitude,
Direction of travel,
Location (relative to specific dates)
2 dimensions
6 types of data

17. DATA VISUALIZATION
Explanatory
Communicate known information
Exploratory
Explore data to reveal insights

18. ข้อมูลมาจากไหน?

19. DATA SOURCES
Open data
Publicly available
Private data
owned by organization, not available to public
Self-collected data
Manual, site scraping, etc.
Combination of the above

20. OPEN DATA

21. OPEN DATA

22. เก็บเองก็ได้

23. ข้อมูลที่ทวิตเตอร์
Tweets
Text, Time, Location, Media
User information
Age, Country, etc.
Follows
User interactions
Navigation, Views

24. MANY FORMS OF DATA
Standalone files
txt, csv, tsv, json, excel, Google Docs, …, pdf*
APIs
better quality with more overhead
Databases
doesn’t necessary mean they are organized
Big data
bigger pain

25. HAVING ALL TWEETS
How people think I feel.

26. How people think I feel. How I really feel.
HAVING ALL TWEETS

27. CHALLENGES
Get relevant Tweets
hashtag: #oscars
keywords: “goal” (football)
Too big
Need to aggregate & reduce size
Slow
Long processing time (hours)

28. Hadoop Cluster
GETTING BIG DATA
Data Storage

29. Pig / Scalding (slow)
GETTING BIG DATA
Hadoop Cluster
Data Storage
Tool

30. Hadoop Cluster
Pig / Scalding (slow)
GETTING BIG DATA
Data Storage
Tool

31. Pig / Scalding (slow)
GETTING BIG DATA
Hadoop Cluster
Data Storage
Tool
Your laptop Smaller dataset

32. Hadoop Cluster
Pig / Scalding (slow)
Data Storage
Tool
Final dataset
Tool node.js / python / excel (fast)
Your laptop
GETTING BIG DATA
Smaller dataset

33. เอาข้อมูลไปทําอะไร?

34. APPLICATIONS OF DATA
Personal analytics
Anyone
Product analytics
Product Manager, Engineer
Data Journalism
News, Magazine, Company’s Public Relations
…

35. NEW YORK TIMES GRAPHICS
http://www.nytimes.com/interactive/2014/08/13/upshot/where-people-in-each-state-were-born.html?abt=0002&abg=0#New_York

36. THE GUARDIAN

37. NEWS
New York Times
The Guardian
Washington Post
Wall Street Journal
FiveThirtyEight
etc.

38. GOOGLE TRENDS
https://www.google.com/trends/story/US_cu_XRyhKlcBAACrtM_en

39. GOOGLE TRENDS
https://www.google.com/trends/story/US_cu_XRyhKlcBAACrtM_en

40. UBER
https://newsroom.uber.com/a-day-in-the-life-of-uber/

41. ตัวอย่างงาน

43. ทวีตอะไร?

44. โปเกมอนที่ถูกพูดถึงมากที่สุด

45. ทวีตเมื่อไหร่?

46. ทวีตต่อนาที

47. ทวีตต่อนาที
interactive.twitter.com/euro2016

48. ทวีตที่ไหน?

49. LOCATION
Low density
High density
by Miguel Rios

50. LOCATION
Low density
High density
by Miguel Rios

51. LOCATION
flickr.com/photos/twitteroffice/8798020541
San Francisco
Low density
High density
by Miguel Rios

52. Rebuild the world
based on
tweet density
twitter.github.io/interactive/andes/
by Nicolas Garcia Belmonte

53. ทวีตอะไร? ที่ไหน? เมื่อไหร่?

54. HAPPY NEW YEAR
สวัสดีปีใหม่

55. ปีใหม่ 2013
twitter.github.io/interactive/newyear2014/

57. USER อยู่ที่ไหน?

58. USER + LOCATION : FAN MAP
interactive.twitter.com/nfl_followers2014

59. USER + LOCATION : FAN MAP
interactive.twitter.com/nba_followers

60. USER + LOCATION : FAN MAP
interactive.twitter.com/premierleague

61. interactive.twitter.com

62. มีขั้นตอนอะไรบ้าง?

63. ขั้นตอนวิเคราะห์ข้อมูล
Collect
Clean
Explore*
Analyze
Present*

64. ขั้นตอนวิเคราะห์ข้อมูล
Collect
Clean
Explore*
Analyze
Present*

65. CASE STUDY:
GAME OF THRONES

66. Problem is coming.
CHAPTER I

67. “Problem first, not solution backward”
— Brian Caffo (via Ron Brookmeyer)

68. “If all you have is a hammer,
everything looks like a nail.”
— Abraham Maslow

69. Problem
Want to know what the audience
talk about a TV show

70. Problem
Want to know what the audience
talk about a TV show
from Tweets

71. HBO’s Game of Thrones
Based on a book series “A Song of Ice and Fire”
Medieval Fantasy. Knights, magic and dragons.

72. Brief Story

73. A King dies.
A lot of contenders wage a war
to reclaim the throne.

74. Minor characters with no claim to the throne
set their own plans in action to gain power
when all the major characters end up killing each other.

75. Brave/Honest/Honorable characters die.
Intelligent but shady characters
and characters who know nothing
continue to live.

76. While humans are busy killing each other,
ice zombies “White walkers” are invading from the North.
The only group who seems to care about this
is neutral group called the Night’s Watch.

77. HBO’s Game of Thrones
Based on a book series “A Song of Ice and Fire”
Medieval Fantasy. Knights, magic and dragons.
Many characters.
Anybody can die.
6 seasons (57 episodes) so far
Multiple storylines in each episode

78. Problem
Want to know what the audience
talk about a TV show
from Tweets

79. Ideas
Common words
Too much noise

80. Ideas
Common words
Too much noise
Characters
How o"en each character were mentioned?

81. I demand a trial by prototyping.
CHAPTER II

82. Prototyping
Pull sample data
from Twitter API
Character recognition and counting
naive approach

83. Sample Tweet

84. Sample Tweet

85. List of names
Daenerys Targaryen,Khaleesi
Jon Snow
Sansa Stark
Tyrion Lannister
Arya Stark
Cersei Lannister
Khal Drogo
Gregor Clegane,Mountain
Margaery Tyrell
Joffrey Baratheon
Bran Stark
Theon Greyjoy
Jaime Lannister
Brienne
Eddard Stark,Ned Stark
Ramsay Bolton
Sandor Clegane,Hound
Ygritte
Stannis Baratheon
Petyr Baelish,Little Finger
Robb Stark
Bronn
Varys
Catelyn Stark
Oberyn Martell
Daario Naharis
Davos Seaworth
Jorah Mormont
Melisandre
Myrcella Baratheon
Tywin Lannister
Tommen Baratheon
Grey Worm
Tyene Sand
Rickon Stark
Missandei
Roose Bolton
Robert Baratheon
Jojen Reed
Jeor Mormont
Tormund Giantsbane
Lysa Arryn
Yara Greyjoy,Asha Greyjoy
Samwell Tarly,Sam
Hodor
Victarion Greyjoy
High Sparrow
Dragon
Winter
Dothraki

86. Sample data
Character Count
Hodor 10000
Jon Snow 5000
Daenerys 4000
Bran Stark 3000
… …
*These numbers are made up for presentation, not real data.

87. When you play the game of vis,
you iterate or you die.
CHAPTER III

88. Where to go from here?

89. + emotion

90. + connections

91. + connections

92. Gain insights from a single episode
emotion & connections

93. Sample data
Character Count
Jon Snow+Sansa 1000
Tormund+Brienne 500
Bran Stark+Hodor 300
… …
Character Count
Hodor 10000
Jon Snow 5000
Daenerys 4000
… …
INDIVIDUALS CONNECTIONS
+ top emojis + top emojis
*These numbers are made up for presentation, not real data.

94. Graph
NODES EDGES
+ top emojis + top emojis
Character Count
Jon Snow+Sansa 1000
Tormund+Brienne 500
Bran Stark+Hodor 300
… …
Character Count
Hodor 10000
Jon Snow 5000
Daenerys 4000
… …
*These numbers are made up for presentation, not real data.

95. Network Visualization
Node-link diagram
Force-directed layout
http://blockbuilder.org/kristw/762b680690e4b2b2666dfec15838a384

96. + Collision Detection
http://blockbuilder.org/kristw/2850f65d6329c5fef6d5c9118f1de6e6

97. + Community Detection
https://github.com/upphiminn/jLouvain

98. + Collision Detection (with clusters)
https://bl.ocks.org/mbostock/7881887

99. Let’s get other episodes.

100. (More) data are coming.
CHAPTER IV

101. More data
1 episode (1 day) => all episodes (6 years)
Rewrite the scripts
to get archived data

102. How much data do we need?
Whole week?
5 days?
2 days?
A day?
etc.

103. How much data do we need?

104. Hold the vis.
CHAPTER V

105. The vis is not enough.

107. Legend

108. Navigation

109. Top 3

110. Adjust threshold

111. Recap

112. Filtered Recap
Tooltip

113. Demo
https://interactive.twitter.com/game-of-thrones

114. Mobile Support

115. A visualizer always evaluates his work.
CHAPTER VI

116. “Feedback is the breakfast of champion.”
— Ken Blanchard

117. Self & Peer
Does it solve the problem?

118. Tormund + Brienne

119. Google Analytics
Pageviews
Visitors
Actions
Referrals
Sites/Social

120. Feedback

121. Feedback

122. สรุป
Data are around us and come from many sources.
Open data are valuable.
Telling story from data is one possible application.
News, Magazine, Company PR.
Takes time and iterations
with many trials and errors.
Start with a problem, collect the data, explore, find a story and present it.
Krist Wongsuphasawat / @kristw
kristw.yellowpigz.com

125. The Reading Room
2 Silom Soi 19,
Bangkok, Thailand 10500

126. ขอบคุณครับ