5
|
1 |
function showData() { |
21
|
2 |
|
|
3 |
var nmmso = data.segments.length; |
14
|
4 |
|
21
|
5 |
data.topics.forEach(function(topic) { |
|
6 |
topic.score = 0; |
|
7 |
topic.weights = []; |
|
8 |
for (var i = 0; i < nmmso; i++) { |
|
9 |
topic.weights.push(0); |
|
10 |
} |
|
11 |
}); |
|
12 |
|
|
13 |
data.segments.forEach(function(mmso, i) { |
|
14 |
mmso.topics.forEach(function(t) { |
|
15 |
data.topics[t.topic].weights[i] = t.weight; |
|
16 |
data.topics[t.topic].score += t.weight; |
|
17 |
}); |
|
18 |
}); |
|
19 |
|
|
20 |
var topicPoubelle = removeBiggestTopic ? _(data.topics.slice()).sortBy(function(t) { return -t.score; })[0].index : -1; |
|
21 |
|
14
|
22 |
data.topiclabels.forEach(function(v) { |
|
23 |
var words = _(v.words).map(function(v, k) { |
|
24 |
return { |
|
25 |
word: k, |
|
26 |
weight: v |
|
27 |
} |
|
28 |
}); |
|
29 |
words.sort(function(a,b) { |
|
30 |
return b.weight - a.weight; |
|
31 |
}) |
|
32 |
data.topics[v.topic_id].words = words; |
|
33 |
}); |
17
|
34 |
|
5
|
35 |
var ordertag = 0; |
|
36 |
|
|
37 |
function secsToString(seconds) { |
|
38 |
var hours = Math.floor(seconds/3600), |
|
39 |
minutes = Math.floor(seconds/60) % 60, |
|
40 |
secs = Math.floor(seconds % 60); |
|
41 |
function pad(n) { |
|
42 |
var r = n.toString(); |
|
43 |
while (r.length < 2) { |
|
44 |
r = "0" + r; |
|
45 |
} |
|
46 |
return r; |
|
47 |
} |
|
48 |
return (hours ? (hours + ":") : "") + pad(minutes) + ":" + pad(secs); |
|
49 |
} |
1
|
50 |
|
5
|
51 |
$(".duration").text(secsToString(data.duration)); |
13
|
52 |
|
5
|
53 |
|
|
54 |
var sortedTopics = data.topics.filter(function(t) { |
|
55 |
return t.index !== topicPoubelle; |
|
56 |
}).sort(function(a,b) { |
|
57 |
return b.score - a.score; |
|
58 |
}); |
|
59 |
|
13
|
60 |
var selectedWords = [], searchString = "", topicscache = {}; |
|
61 |
|
|
62 |
function showTopicsForWord(word) { |
|
63 |
var topicweights = topicscache[word]; |
|
64 |
var topiclist = data.topics.filter(function(topic) { |
|
65 |
return topicweights[topic.index] > .01 && topic.index !== topicPoubelle; |
|
66 |
}); |
|
67 |
topiclist.sort(function(a,b) { |
|
68 |
return topicweights[b.index] - topicweights[b.index] |
|
69 |
}); |
|
70 |
showTopics(topiclist); |
|
71 |
} |
5
|
72 |
|
|
73 |
function wordFilter() { |
|
74 |
searchString = $(".keyword-search").val() || "", |
|
75 |
selectedWords = []; |
|
76 |
if (searchString.length) { |
|
77 |
selectedWords.push(searchString); |
|
78 |
} |
|
79 |
if (selectedWords.length) { |
13
|
80 |
var k = selectedWords.join(","); |
|
81 |
if (typeof topicscache[k] === "undefined") { |
|
82 |
TopicsBean.topicsForKeywords(k,{ |
|
83 |
callback: function(topicweights) { |
|
84 |
topicscache[k] = topicweights; |
|
85 |
showTopicsForWord(k); |
|
86 |
} |
|
87 |
}); |
|
88 |
} else { |
|
89 |
showTopicsForWord(k); |
|
90 |
} |
|
91 |
|
5
|
92 |
} else { |
|
93 |
showTopics(sortedTopics); |
|
94 |
} |
|
95 |
} |
|
96 |
|
|
97 |
function showTopics(topiclist) { |
|
98 |
var topicHtmls = ["", "", ""]; |
|
99 |
if (searchString.length) { |
|
100 |
var searchStringRx = new RegExp('(' + searchString.replace(/(\W)/g,'\\$1') + ')', "gim"); |
2
|
101 |
} |
5
|
102 |
var replaceRx = new RegExp('(' + selectedWords.map(function(w) { |
|
103 |
return w.replace(/(\W)/g,'\\$1') |
|
104 |
}).join("|") + ')', "gim"); |
|
105 |
topiclist.forEach(function(topic,i) { |
14
|
106 |
var wordsToShow = topic.words.slice(), |
5
|
107 |
max = wordsToShow[0].weight, |
|
108 |
min = Math.min(wordsToShow[wordsToShow.length - 1].weight, max - .01), |
|
109 |
scale = 10 / (max - min); |
|
110 |
var li = '<li class="shadow-block topic" data-topic-id="' |
|
111 |
+ topic.index |
|
112 |
+ '" data-timestamp="999999"><ul class="topic-words">' |
|
113 |
+ wordsToShow.reduce(function(memwords, word) { |
|
114 |
return memwords |
|
115 |
+ '<li style="font-size: ' |
|
116 |
+ ( 10 + scale * (word.weight - min) ) |
|
117 |
+ 'px;">' |
|
118 |
+ ( selectedWords.length |
|
119 |
? word.word.replace(replaceRx,'<span class="highlight">$1</span>') |
|
120 |
: word.word ) |
|
121 |
+ '</li>'; |
|
122 |
},"") |
|
123 |
+ '</ul></li>'; |
|
124 |
topicHtmls[i % 3] += li; |
|
125 |
}); |
|
126 |
var tb = $(".topics-block"); |
|
127 |
tb.html(topicHtmls.reduce(function(mem,html) { |
|
128 |
return mem + '<ul class="topic-column">' + html + '</ul>' |
|
129 |
},"")); |
|
130 |
tb.css("top",0); |
1
|
131 |
|
5
|
132 |
showTopicViz(); |
|
133 |
} |
13
|
134 |
|
|
135 |
var allwords = []; |
5
|
136 |
|
|
137 |
data.topics.forEach(function(topic) { |
6
|
138 |
topic.words.forEach(function(topicword) { |
|
139 |
topicword.word.split(" ").filter(function(w) { |
|
140 |
return w.length > 2; |
|
141 |
}).forEach(function(w) { |
13
|
142 |
allwords.push(w); |
6
|
143 |
}); |
5
|
144 |
}); |
|
145 |
}); |
13
|
146 |
|
6
|
147 |
data.topwords.forEach(function(v, k) { |
|
148 |
v.split(" ").filter(function(w) { |
|
149 |
return w.length > 2; |
|
150 |
}).forEach(function(w) { |
13
|
151 |
allwords.push(w); |
6
|
152 |
}); |
5
|
153 |
}); |
13
|
154 |
|
|
155 |
var allwords = _(allwords).uniq(); |
|
156 |
|
5
|
157 |
allwords.sort(); |
|
158 |
|
|
159 |
$(".keyword-search").autocomplete({ |
7
|
160 |
source: allwords, |
|
161 |
change: function() { |
13
|
162 |
window.setTimeout(wordFilter,0); |
21
|
163 |
}, |
|
164 |
select: function() { |
|
165 |
window.setTimeout(wordFilter,0); |
7
|
166 |
} |
5
|
167 |
}).on("keyup change paste", wordFilter); |
6
|
168 |
// */ |
5
|
169 |
|
|
170 |
function showTopicViz() { |
|
171 |
var selectedBlocks = $(".topic.selected, .topic.hover"), |
|
172 |
sbl = selectedBlocks.length, |
|
173 |
topicBlocks = $(".topic"); |
|
174 |
var topicsAndColors = []; |
7
|
175 |
selectedBlocks.each(function() { |
5
|
176 |
var el = $(this), |
|
177 |
topicid = parseInt(el.attr("data-topic-id")); |
|
178 |
topicsAndColors.push({ |
|
179 |
"$": el, |
|
180 |
timestamp: parseInt(el.attr("data-timestamp")), |
|
181 |
hovered: el.hasClass("hover"), |
|
182 |
id: topicid, |
|
183 |
topic: data.topics[topicid] |
4
|
184 |
}); |
5
|
185 |
}); |
|
186 |
topicsAndColors.sort(function(a,b) { |
|
187 |
return ( a.timestamp - b.timestamp ) || ( a.id - b.id ); |
|
188 |
}); |
|
189 |
topicBlocks.css("background",""); |
|
190 |
topicsAndColors.forEach(function(topic, i) { |
|
191 |
topic.color = topic.hovered ? "#ffff00" : colorset[i % colorset.length]; |
|
192 |
topic.$.css("background", topic.color); |
|
193 |
}); |
|
194 |
|
|
195 |
for (var i = 0; i < nmmso; i++) { |
|
196 |
var opacity = 0, |
|
197 |
rgb = [0,0,0]; |
|
198 |
topicsAndColors.forEach(function(topic) { |
|
199 |
var c = Raphael.getRGB(topic.color), |
|
200 |
o = topic.topic.weights[i]; |
|
201 |
rgb[0] += c.r * o; |
|
202 |
rgb[1] += c.g * o; |
|
203 |
rgb[2] += c.b * o; |
|
204 |
opacity += o; |
4
|
205 |
}); |
5
|
206 |
if (opacity) { |
|
207 |
color = Raphael.rgb.apply(Raphael, rgb.map(function(c) { |
|
208 |
return c/opacity; |
|
209 |
})); |
|
210 |
segmentrects[i].show(); |
|
211 |
segmentrects[i].attr({ |
|
212 |
fill: color, |
|
213 |
opacity: .5 + .5 * opacity |
4
|
214 |
}); |
5
|
215 |
} else { |
|
216 |
segmentrects[i].hide(); |
1
|
217 |
} |
2
|
218 |
} |
|
219 |
|
12
|
220 |
var hash = "#visibletopics=" |
7
|
221 |
+ Array.prototype.join.call($(".topic:visible").map(function(){return $(this).attr("data-topic-id")})) |
|
222 |
+ "&selectedtopics=" |
|
223 |
+ Array.prototype.slice.call(topicsAndColors.map(function(t){return t.id})) |
|
224 |
+ "&keywords=" |
|
225 |
+ selectedWords.map(function(w) { |
|
226 |
return encodeURIComponent(w); |
|
227 |
}).join(","); |
|
228 |
|
12
|
229 |
document.querySelector(".play-button").hash = hash; |
7
|
230 |
|
5
|
231 |
} |
|
232 |
|
|
233 |
var jqsvg = $(".start-svg"); |
|
234 |
paper = new Raphael(jqsvg[0]), |
|
235 |
ph = jqsvg.height(), |
|
236 |
pw = jqsvg.width(), |
|
237 |
yscale = (ph - 20) / data.duration, |
|
238 |
mx = Math.max.apply(Math, data.minutes.map(function(s) { return s.count})), |
|
239 |
xscale = (pw - 50)/mx; |
|
240 |
|
|
241 |
var segmentrects = data.segments.map(function(mmso) { |
|
242 |
var rect = paper.rect(0, yscale * mmso.start, pw - 50, 1+yscale * mmso.duration); |
|
243 |
rect.attr({stroke: "none"}); |
|
244 |
return rect; |
|
245 |
}); |
|
246 |
|
|
247 |
var d = "M" + data.minutes.map(function(s) { |
|
248 |
var x = xscale * s.count; |
|
249 |
return x |
|
250 |
+ "," |
|
251 |
+ yscale * (s.from + 20) |
|
252 |
+ "L" |
|
253 |
+ x |
|
254 |
+ "," |
|
255 |
+ yscale * (s.from + 40); |
|
256 |
}).join("L"); |
2
|
257 |
|
5
|
258 |
paper.path(d).attr({ |
|
259 |
"stroke-width": 4, |
|
260 |
"stroke": "#000000", |
|
261 |
opacity: .5 |
|
262 |
}); |
|
263 |
paper.path(d).attr({ |
|
264 |
"stroke-width": 1, |
|
265 |
"stroke": "#ffffff" |
|
266 |
}); |
|
267 |
|
|
268 |
for (var i=0; i < data.duration; i += 1800) { |
|
269 |
var y = yscale * i; |
|
270 |
paper.path("M0," + y + "L" + pw + "," + y).attr({ |
|
271 |
stroke: "#666" |
4
|
272 |
}); |
5
|
273 |
paper.text(pw - 2, y + 6, secsToString(i)).attr({ |
4
|
274 |
"text-anchor": "end", |
|
275 |
"fill": "#ffffff" |
|
276 |
}); |
5
|
277 |
} |
|
278 |
paper.text(pw-2, ph-14, secsToString(data.duration)).attr({ |
|
279 |
"text-anchor": "end", |
|
280 |
"fill": "#ffffff" |
|
281 |
}); |
|
282 |
paper.path("M0," + (ph-20) + "L" + pw + "," + (ph-20)).attr({ |
|
283 |
stroke: "#666" |
|
284 |
}); |
|
285 |
paper.text(0, ph - 14,"tweets/min.").attr({ |
|
286 |
"text-anchor": "start", |
|
287 |
"fill": "#ffffff" |
|
288 |
}); |
|
289 |
|
|
290 |
for (var k = 2; k < 6; k++) { |
|
291 |
var x = xscale * k * 1000; |
4
|
292 |
paper.path("M" + x + ",0L" + x + "," + (ph - 10)).attr({ |
|
293 |
stroke: "#666" |
|
294 |
}); |
|
295 |
|
5
|
296 |
paper.text(x-2, ph - 14,k+"k").attr({ |
4
|
297 |
"fill": "#ffffff" |
2
|
298 |
}); |
5
|
299 |
} |
|
300 |
|
|
301 |
wordFilter(); |
|
302 |
|
|
303 |
$(".topics-block").on("mouseenter", ".topic", function() { |
|
304 |
var el = $(this); |
|
305 |
el.addClass("hover"); |
|
306 |
showTopicViz(); |
|
307 |
}).on("mouseleave", ".topic", function() { |
|
308 |
$(this).removeClass("hover"); |
|
309 |
showTopicViz(); |
|
310 |
}).on("click", ".topic", function() { |
|
311 |
var el = $(this); |
|
312 |
$(this).toggleClass("selected"); |
|
313 |
el.attr("data-timestamp", el.hasClass("selected") ? ++ordertag : 999999); |
|
314 |
showTopicViz(); |
|
315 |
}); |
|
316 |
} |
|
317 |
|
|
318 |
var data = { duration: 10200, topics: [] }, |
|
319 |
colorset = ["#E41A1C", "#377EB8", "#4DAF4A", "#984EA3", "#FF7F00", "#A65628", "#F781BF"]; |
|
320 |
|
|
321 |
$(function() { |
|
322 |
|
|
323 |
$(".topics-block").draggable({axis:"y"}); |
|
324 |
|
|
325 |
var loadedSteps = 0, |
|
326 |
stepsToFullyLoaded = 0; |
|
327 |
|
|
328 |
function checkIfLoaded() { |
|
329 |
loadedSteps++; |
|
330 |
if (loadedSteps >= stepsToFullyLoaded) { |
|
331 |
setTimeout(showData,0); |
|
332 |
} |
|
333 |
} |
|
334 |
|
|
335 |
function loadJson(url, propname, callback) { |
|
336 |
stepsToFullyLoaded++; |
|
337 |
$.getJSON(url, function(d) { |
|
338 |
if (callback) { |
|
339 |
var res = callback(d); |
|
340 |
} else { |
|
341 |
var res = d; |
|
342 |
} |
|
343 |
if (propname) { |
|
344 |
data[propname] = res; |
|
345 |
} |
|
346 |
checkIfLoaded(); |
|
347 |
}); |
|
348 |
} |
|
349 |
|
|
350 |
function solrUrl(table, params) { |
21
|
351 |
return solrUrlBase + table + "/select?" + $.param(params) + "&wt=json&json.wrf=?"; |
5
|
352 |
} |
|
353 |
|
|
354 |
function loadFromTopicsBean(method, propname, args, callback) { |
|
355 |
stepsToFullyLoaded++; |
|
356 |
var arg = args || [], |
|
357 |
cb = function(d) { |
|
358 |
if (callback) { |
|
359 |
var res = callback(d); |
|
360 |
} else { |
|
361 |
var res = d; |
|
362 |
} |
|
363 |
if (propname) { |
|
364 |
data[propname] = res; |
|
365 |
} |
|
366 |
checkIfLoaded(); |
|
367 |
} |
|
368 |
arg.push({callback: cb}); |
|
369 |
TopicsBean[method].apply(TopicsBean,arg); |
|
370 |
} |
|
371 |
|
|
372 |
loadJson("data/minutes.json", "minutes"); |
14
|
373 |
loadJson("data/topiclabels.json", "topiclabels"); |
5
|
374 |
|
|
375 |
loadJson( |
|
376 |
solrUrl("MMSO", {q: "*:*", fl: "topic*,MMSO_id,multimediaSegment", rows: 250 }), |
|
377 |
"segments", |
|
378 |
function(d) { |
|
379 |
return d.response.docs.map(function(mmso) { |
|
380 |
var tc = mmso.multimediaSegment.match(/\d+/g), |
|
381 |
start = parseInt(tc[0]), |
|
382 |
end = parseInt(tc[1]), |
|
383 |
topics = []; |
|
384 |
for (var k in mmso) { |
|
385 |
if (k.substr(0,5) === "topic" && mmso[k] > .01) { |
|
386 |
topics.push({ |
|
387 |
topic: parseInt(k.substr(5)), |
|
388 |
weight: mmso[k] |
|
389 |
}) |
|
390 |
} |
|
391 |
} |
|
392 |
topics.sort(function(a,b) { |
|
393 |
return b.weight - a.weight; |
|
394 |
}); |
|
395 |
return { |
|
396 |
id: mmso.MMSO_id, |
|
397 |
start: start, |
|
398 |
end: end, |
|
399 |
duration: end - start, |
6
|
400 |
topics: topics |
5
|
401 |
} |
|
402 |
}).sort(function(a,b) { |
|
403 |
return a.start - b.start; |
|
404 |
}); |
|
405 |
}) |
|
406 |
|
|
407 |
dwr.engine.setTimeout(60000); |
|
408 |
TopicsBean._path = "http://159.217.144.101:8050/sia-solr/dwr"; |
|
409 |
|
|
410 |
loadFromTopicsBean("getTopicsNumber",false,false,function(topic_count) { |
|
411 |
for (var i = 0; i < topic_count; i++) { |
14
|
412 |
data.topics.push({ index: i, words: [ { word: "(no label)", weight: 1 }] }); |
5
|
413 |
} |
1
|
414 |
}); |
5
|
415 |
|
6
|
416 |
loadFromTopicsBean("getTopWords","topwords",[200]); |
5
|
417 |
|
1
|
418 |
}); |