-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsemantic-clusters-twitterstyle.html
147 lines (138 loc) · 6.57 KB
/
semantic-clusters-twitterstyle.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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <script type="text/javascript" src="jquery-ui/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui/js/jquery-ui-1.10.4.custom.js"></script>-->
<script src="https://code.jQuery.com/jQuery-1.10.2.js"></script>
<script src="https://code.jQuery.com/ui/1.10.4/jQuery-ui.js"></script>
<link rel="stylesheet" href="css/twitter-style.css" type="text/css">
<link rel="stylesheet" href="jquery-ui/css/custom-theme/jquery-ui-1.10.4.custom.css" type="text/css">
</head>
<body style="background-color: #B2D6E9; width: 90%; margin: auto" onload="topicSelection()">
<div>
Select a topic:
<select id = "topicSelect" onchange="topicSelection()">
<option></option>
<option value="003">3.Haiti Aristide return</option>
<option value="021">21.Emanuel residency court rulings</option>
<option value="022">22.healthcare law unconstitutional</option>
<option value="026">26.US unemployment</option>
<option value="042">42.Holland Iran envoy recall</option>
<option value="051">51.British Government cuts</option>
<option value="057">57.Chicago blizzard</option>
<option value="066">66.Journalists' treatment in Egypt</option>
<option value="068">68.Charlie Sheen rehab</option>
<option value="088">88.Kings' Speech awards</option>
</select>
<button id="expand" onclick="expand()">Expand all</button>
<button id="collapse" onclick="collapse()">Collapse all</button>
</div>
<div id="main" style="height:97%;overflow:scroll"></div>
<script type="text/javascript">
var tweetsPath = "data/relevant-chrono-sort-tweets/json/";
var clustersUrl = "data/semantic-clusters-ids/json/clusters-ids.json";
function topicSelection() {
choices = document.getElementById("topicSelect");
topicNum = choices[choices.selectedIndex].value;
var tweets = {};
$.ajax({
url: tweetsPath + "tweet_topic" + topicNum + ".json",
dataType: "text",
async: false,
success: function(json) {
var data = $.parseJSON(json);
for (var i = 0, tweet; i < data.tweets.length; i++) {
tweet = data.tweets[i];
tweets[tweet.id] = [tweet.time, tweet.name, tweet.screenname, tweet.text];
}
}
});
var html = "";
$.ajax({
url: clustersUrl,
dataType: "text",
async: false,
success: function(json) {
var data = $.parseJSON(json);
var clusters = data.topics["MB" + topicNum].clusters;
for (var i = 0; i < clusters.length; i ++) {
var tweetFirst = tweets[clusters[i][0]];
if (clusters[i].length > 1) {
html += "<div class='accordion'>";
html += "<div class='header'>";
} else {
html += "<div>";
}
html += tweetHTML(tweetFirst);
html += "</div>";
if (clusters[i].length > 1) {
html += "<div>";
for (var j = 1; j < clusters[i].length; j ++) {
var tweet = tweets[clusters[i][j]];
html += "<div>";
html += tweetHTML(tweet);
html += "</div>";
}
html += "</div>";
html += "</div>";
}
}
}
});
$("#main").html(html);
if ($('.accordion').hasClass('ui-accordion')) {
$('.accordion').accordion('destroy');
} else {
$(".accordion").accordion({
header: ".header",
active: false,
collapsible: true,
heightStyle: "content"
});
}
}
function expand() {
$(".accordion").accordion({
active: 0
});
}
function collapse() {
$(".accordion").accordion({
active: false,
collapsible: true
});
}
function tweetHTML(tweet) {
var html = "";
html += "<table cellspacing='0' cellpadding='0' class='tweet'>";
html += "<tr><td>";
html += "<font><b>" + tweet[1] + "</b></font> ";
html += "<font class='gray'>@" + tweet[2] + "</font>";
html += "</td></tr>";
html += "<tr><td>";
html += "<div class='text'>" + tweet[3] + "</div>";
html += "</td></tr>";
html += "<tr><td>";
html += "<font class='gray'>" + timeConvert(tweet[0]) + "</font>";
html += "</td></tr>";
html += "</table>";
return html;
}
//Sun Jan 23 15:53:01 +0000 2011 --> 3:53 PM - 23 Jan 2011
function timeConvert(time) {
var twelve;
var hour = parseInt(time.substring(11, 13));
var minute = time.substring(14, 16);
if (hour == 12) {
twelve = "12:" + minute + " PM";
} else if ( hour > 12) {
twelve = (hour - 12) + ":" + minute + " PM";
} else {
twelve = hour + ":" + minute + " AM";
}
var result = twelve + " - " + time.substring(8, 10) + " " + time.substring(4, 7) + " " + time.substring(26, 30);
return result;
}
</script>
</body>
</html>