/
index.html
348 lines (292 loc) · 17.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
<!DOCTYPE html>
<html>
<head>
<title>Thai Politics Through Pantip</title>
<meta charset="UTF-8">
<meta name="application-name" content="Thai Politics Through Pantip" />
<meta name="description" content="See how can Pantip.com can give us a window into the present and the past of Thai Politics.">
<meta property="og:title" content = "Thai Politics Through Pantip" />
<meta property="og:site_name" content = "Ben Vibhagool" />
<meta property="og:url" content = "http://benv.io/politics-through-pantip" />
<meta property="og:description" content = "See how can Pantip.com can give us a window into the present and the past of Thai Politics." />
<meta property="og:image" content = "http://i.imgur.com/VjHHfP9.jpg" />
<meta property="og:type" content = "website" />
<meta property="og:locale" content = "en_US" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@benvib" />
<meta name="twitter:title" content="Thai Politics Through Pantip" />
<meta name="twitter:description" content = "See how can Pantip.com can give us a window into the present and the past of Thai Politics." />
<meta name="twitter:image" content="http://i.imgur.com/VjHHfP9.jpg" />
<meta name="twitter:url" content="http://benv.io/politics-through-pantip" />
<style>
body, html{
width: 100%;
height: 100%;
}
body{
padding-top:20px;
padding-bottom: 20px;
}
input{
border-radius: 0px !important;
}
.logo{
font-size: 18px;
font-weight: 900;
float: right;
}
.select-search{
border-radius: 0px !important;
}
.btn{
color: #ffffff !important;
background-color: #18bc9c !important;
border-color: #18bc9c !important;
}
h1,h2,h3,h4,h5,h6,p,a,text, ol, li{
font-family: 'Source Sans Pro', sans-serif !important;
-webkit-font-smoothing: antialiased !important;
}
.text{
margin-top: 5px;
line-height: 1.8;
font-size: 17px;
margin-top:10px;
}
svg{
font: 10px sans-serif;
display: block;
margin:auto;
}
.area {
fill: #0000ff;
clip-path: url(#clip);
stroke: #4040e8;
fill-opacity: 0.35
}
.axis path,
.axis line {
fill: none;
stroke: none;
shape-rendering: crispEdges;
}
posts-single{
display: block;
height: 400px;
width:66%;
float:left;
}
.all-posts{
margin-top: 20px;
margin-bottom: 20px;
}
.single-posts{
margin-top: 20px;
margin-bottom: 20px;
}
.multi-posts{
margin-top: 20px;
margin-bottom: 20px;
}
posts-multiple{
display: block;
height: 400px;
width:80%;
}
.brush .background{
width:100%;
height: 100%;
}
.tick line{
opacity: 0.1;
stroke: #000;
}
.handle{
fill: grey;
}
.brush .extent {
stroke: LightGray;
fill-opacity: .125;
shape-rendering: crispEdges;
}
.news-table{
display:block;
width:30%;
overflow: hidden;
font-size:10px;
height:400px;
overflow: hidden;
white-space: nowrap;
border:4px;
}
.news-table .list-group-item{
border:0px;
}
.news-table .list-group{
overflow:scroll;
white-space: nowrap;
height:320px;
}
.news-heading{
text-align: center;
font-size: 12px;
font-weight:bold;
}
.news-thumbnail{
width:35px;
height:35px;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
clip-path: url(#clip-m);
}
.single-search{
width: 30%;
}
.title{
margin-bottom: 15px;
}
.container{
margin-top: 15px;
margin-bottom: 15px;
padding-left: 70px !important;
padding-right: 70px !important;
}
</style>
</head>
<script src="assets/dist/js/lib.min.js"></script>
<link rel="stylesheet" href="assets/dist/css/lib.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' type='text/css'>
<body ng-app="myApp">
<div class = "shell container">
<div class = "logo">
<a href='http://benv.io' style = "color:black" target = "_blank">benv.io</a>
</div>
<div class = "title header">
<h1> Thai Politics through Pantip </h1>
</div>
<div class = "text">
<p><a href="http://pantip.com" target="_blank">Pantip.com</a> is the de facto discussion forum about everything in Thailand, and there is no close second. Its sub forums include topics ranging from food, Thai television dramas to photograph, finance, and politics. Think: Like <a href="http://reddit.com" target="_blank">Reddit</a>, but anyone - from your parents to your friends occasionally go on it. Pantip is <a href="http://www.alexa.com/topsites/countries/TH" target="_blank">4th</a> most trafficked website in Thailand, after Google, Facebook, and Youtube, making it the most visited Thai website.</p>
<p><a href="http://pantip.com/forum/rajdumnern" target="_blank">Rajdumnern</a>, one of Pantip's sub forums, houses the discussion of politics and current events in Thailand. Because of its active community, and relatively anonymous membership, Rajdumnern is often at the crosshair of political censorship. Having said that, Pantip is the only consistently available and collectable data of the <strike>general</strike> online (underground..?) public’s mood at each point in time, and I think in many ways it is the closest tool to a time machine which allows us to take a peek back into the past, and relive the feelings Thai people experience as nation. Thailand has been through a lot - experiencing 19 coups d'état since the transition from absolute monarchy to constitutional monarchy in 1932, with the most recent coup in May 2014. There is a saying that Thai people forget easily, meaning Thai people as a nation never learn from their past mistakes, and because of that, we are stuck in a cycle of political polarization. Going with the idea that Pantip provides a reflection of the past, I collected the posts from Rajdumnern, and made a tool for everyone to explore the trends of different topics, and get a brief idea how things were over the past few years.</p>
</div>
<div class = "all-posts" ng-controller="SingleCtrl" ng-init="init(['_all'])">
<div class = "main">
<posts-single data="data" cur-spike='curSpike' start-date='startDate' end-date='endDate'></posts-single>
<news data="data" cur-spike='curSpike'></news>
<top-table data = 'topPosts' start-date='startDate' end-date='endDate' keywords='keywords'></top-table>
</div>
</div>
<div class = "text">
<p>To collect the data, I built a scraper to gather every post from Rajdumnern created after Pantip upgraded the website in December 2012 to the present day. I had wanted to collect the comments, but that proved to be too many to be worth the effort and time - I had more than 1.6 million comments before giving up. The total number of posts came to more than ~220,000.<p>
<p>The graph above shows the number of posts per day across the time frame mentioned earlier. You might notice that the spikes in number of daily posts correspond to different important political events in Thailand, and you would be right! For example, there were large numbers of posts between November '13 and June '14, corresponding to the <a href="https://en.wikipedia.org/wiki/2013%E2%80%9314_Thai_political_crisis" target="_blank">political crisis</a> in that period. Below the graph is the context window. Resizing it will allow a more detailed view of the graph from the time period, and will also show you the top posts ranked by comment count and upvote count from that period in the table above.</p>
<p>The red markers are in place of spikes of number of daily posts. These spikes are determined by an algorithm, so some of them may be missing or look a bit out of place. If you think about it, spikes are easy to determine visually, but there isn't a clear quantitative definition of a spike. If you are interested in more the technical details behind this project, I'll be writing it up on <a href="http://benv.io" target="_blank">here</a>. To give more contexts to these spikes, we should try to understand the current events at each point in time. To do that, I grab ten news headlines from Google News with keyword ‘การเมือง’ (‘politics’ in Thai) on each date of spike. You can see the news to the right of the graph, and if you hover over the red markers, the news will change to the corresponding date.
</p>
</div>
<hr>
<h2> What's on People's Mind </h2>
<div class = "text">
<p>Next, we can dive a little bit deeper to see how popular a topic is overtime. In this case, we are interested in the proportion of posts containing a certain keyword per day. Basically, any post with the keyword in its title or body is counted, and divided by the total number of posts from that day. Like before, the spikes and news are also shown here. Notice that there is input box below for you to put in any keywords you want to query. Play around and see if you can find an interesting keyword or trends!</p>
</div>
<div class = "header">
<h3> Prayuth </h3>
</div>
<div class = "row">
<img class = "img-thumbnail" style='float:left;width:150px;height:150px; margin-right:10px; margin-left:10px;' src="assets/dist/img/prayuth.jpg"/>
<div class = "text">
<p>Speaking of popularity (in context of this project), there can't be a more popular person than our current unelected Prime Minister, <a href="https://en.wikipedia.org/wiki/Prayut_Chan-o-cha" target="_blank">General Prayuth Chan-o-cha</a> who launched the military coup against the government and assumed control of the country in May 2014. We apply the idea above to the keyword ‘ประยุทธ์’, his first name, and the name most people use when they refer to him. I am sure that he has other nicknames, but let’s not go there for now. You can see below that he became very popular after the coup in May 2014. He was most talked about on November 4, 2014 when he talked about cracking down on political movements using Article 44 of the Interim Constitution.</p>
</div>
</div>
<div class = "single-posts" ng-controller="SingleCtrl" ng-init="init(['ประยุทธ์'])">
<div class = "main">
<form class="input-group single-search" ng-submit="submit()" style="margin: 0 auto; margin-bottom:10px;">
<input type="text" ng-model="text" name="text" class="form-control" placeholder="ประยุทธ์">
<span class="input-group-btn">
<input ng-disabled="submitted" class="btn btn-default" type="submit" id="submit" value="Search" />
<img ng-show="submitted" src="assets/dist/img/hourglass.svg">
</span>
</form>
<posts-single data="data" cur-spike='curSpike' start-date='startDate' end-date='endDate'></posts-single>
<news data="data" cur-spike='curSpike'></news>
<top-table data = 'topPosts' start-date='startDate' end-date='endDate' keywords='keywords'></top-table>
</div>
</div>
<hr>
<h2> Popularity Comparison </h2>
<div class = "text">
<p>Now you might be wondering how popular different topics are relative to each other. As before, we look at the proportion of each keyword over time. We'll be looking at different keywords side by side, and like before you can put in your own keywords.</p>
</div>
<div class = "header">
<h3> Major Political Figures </h3>
</div>
<div class = "text">
<p>Let's see how recent political figures fare against each other.</p>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Thaksin_Shinawatra" target="_blank">Thaksin Shinawatra 'ทักษิณ'</a> - PM between 2001 - 2006 before being ousted by a coup. The man at the begining of all the drama.</li>
<li><a href="https://en.wikipedia.org/wiki/Abhisit_Vejjajiva" target="_blank">Abhisit Vejjajiva 'อภิสิทธิ์'</a> - Former PM from Democrat Party from 2008-2011. Lost his seat to Yingluck in 2011.</li>
<li><a href="https://en.wikipedia.org/wiki/Suthep_Thaugsuban" target="_blank">Suthep Thaugsuban 'สุเทพ'</a> - Former secretary-general of Democrat Party and protest leader during the political crisis in 2013-2014.</li>
<li><a href="https://en.wikipedia.org/wiki/Yingluck_Shinawatra" target="_blank">Yingluck Shinawatra 'ยิ่งลักษณ์'</a> - Thaksin's sister who became the PM after Abhitsit through election. Overthrown by coup in 2014.</li>
<li><a href="https://en.wikipedia.org/wiki/Prayut_Chan-o-cha" target="_blank">Prayuth Chan-ocha 'ประยุทธ์'</a> - Leader of 2014 coup and current PM.</li>
<li>Did I miss someone? Hopefully not.</li>
</ul>
<p>Thai politics is pretty volatile, and 'hairy' if you look at the major characters. Professor Darren Zook at Berkeley, during his lecture on Thailand, said Thai politics is like a Korean drama, and I couldn't have agreed more! If you are interested, <a href="http://www.economist.com/blogs/graphicdetail/2015/09/graphics" target_"_blank">here's</a> a great resource for becoming familiar with Thai politics.</p>
</div>
<div class = "multi-posts" ng-controller="MultiCtrl" ng-init="init(['ทักษิณ','อภิสิทธิ์', 'ยิ่งลักษณ์','สุเทพ','ประยุทธ์'])">
<div class = "main">
<div class = "multi-input" class = "style:margin: 0 auto;">
<oi-select
ng-model="searchBox"
multiple
oi-select-options="{
newItem: true,
saveTrigger: 'enter blur space . , ;'
}"
placeholder="Select"
style = "width:70%; margin-right:0px;display:block;float:left"
></oi-select>
<span class="input-group-btn">
<input ng-disabled="submitted" class="btn btn-default" ng-click = "submit()" value = "Search"/>
<img ng-show="submitted" src="assets/dist/img/hourglass.svg">
</span>
</div>
<posts-multiple data="data"></posts-multiple>
</div>
</div>
<div class = "header">
<h3> Colors of Thai Politics </h3>
</div>
<div class = "text">
<p>I present to you the <a href ="http://www.bbc.com/news/world-asia-pacific-13294268" target="_blank">colors</a> of Thai politics. In Thailand, the color you wear may be used to inferred your political affiliation. It's not that big of an issue now, but there was definitely a period when you had to think twice about the color you wear for the day. No joke! There are the <a href = "https://en.wikipedia.org/wiki/United_Front_for_Democracy_Against_Dictatorship">red 'แดง' shirts</a> and the <a href = "https://en.wikipedia.org/wiki/People%27s_Alliance_for_Democracy">yellow 'เหลือง' shirts</a>. The yellow shirts are original movement that opposed Thaksin and his party. After the 06 coup, come the red shirts who are basically the supporter of Thaksin, Yingluck, and Puea Thai Party. Since then other colors have come and go, and usually are opposed to the red shirts. I also put in multi-color 'สลิ่ม' as a keyword, referring to the various colors that come and go, normally with a poor connotation.</p>
</div>
<div class = "multi-posts" ng-controller="MultiCtrl" ng-init="init(['แดง','เหลือง','สลิ่ม'])">
<div class = "main">
<div class = "multi-input" class = "style:margin: 0 auto;">
<oi-select
ng-model="searchBox"
multiple
oi-select-options="{
newItem: true,
saveTrigger: 'enter blur space . , ;'
}"
placeholder="Select"
style = "width:70%; margin-right:0px;display:block;float:left"
></oi-select>
<span class="input-group-btn">
<input ng-disabled="submitted" class="btn btn-default" ng-click = "submit()" value = "Search"/>
<img ng-show="submitted" src="assets/dist/img/hourglass.svg">
</span>
</div>
<posts-multiple data="data"></posts-multiple>
</div>
</div>
<hr>
<h2> FIN </h2>
<div class = "text">
<p> We are just scratching the surface of how we can explore and analyze the data from Pantip. I had thought about applying natural language processing, and doing some sentiment analysis, but it is very difficult due to the structure of Thai language (Please let me know if you know a good way to do this). I think the data as it stands is too rudimentary to apply the fancy analytical methods to talk about things within the area of Thai politics. This is an exciting start; there are many other ideas to explore! I'll be sure to collect more data from Pantip, so we can talk about something else other than politics. Stay tuned!</p>
</div>
</div>
</body>
<script src="assets/dist/js/app.min.js"></script>
</html>