--- a/js/startscreen-fake.js Fri Feb 15 12:23:01 2013 +0100
+++ b/js/startscreen-fake.js Fri Feb 15 18:34:43 2013 +0100
@@ -1,9 +1,6 @@
-PATH_MODE = false;
-
$(function() {
- var colorset_pastel = ["#FBB4AE", "#B3CDE3", "#CCEBC5", "#DECBE4", "#FED9A6", "#E5D8BD", "#FDDAEC"];
- var colorset_vivid = ["#E41A1C", "#377EB8", "#4DAF4A", "#984EA3", "#FF7F00", "#A65628", "#F781BF"];
+ var colorset = ["#E41A1C", "#377EB8", "#4DAF4A", "#984EA3", "#FF7F00", "#A65628", "#F781BF"];
$(".topics-block").draggable({axis:"y"})
@@ -25,7 +22,7 @@
$(".duration").text(secsToString(data.duration));
- $(".topwords-block").on("click", "li", function() {
+ $(".topwords-list").on("click", "li", function() {
var el = $(this).toggleClass("selected");
wordFilter();
});
@@ -56,38 +53,52 @@
return b.score - a.score;
});
- var selectedWords = [];
-
function wordFilter() {
- var selectedLis = $(".topwords-block li.selected");
- selectedWords = [];
+ var selectedLis = $(".topwords-list li.selected"),
+ searchString = $(".keyword-search").val() || "",
+ useSearchString = (searchString.length > 1),
+ selectedWords = [];
selectedLis.each(function() {
selectedWords.push($(this).text().trim());
});
- console.log(selectedWords);
- if (selectedWords.length) {
- showTopics(data.topics.filter(function(topic) {
+ if (selectedWords.length || useSearchString) {
+ var topiclist = data.topics.filter(function(topic) {
+ var found = false,
+ relevance = 0;
var foundWords = selectedWords.map(function() { return false });
topic.words.forEach(function(topicword) {
selectedWords.forEach(function(selectedword, k) {
- if (!foundWords[k] && selectedword === topicword.word) {
- foundWords[k] = true;
+ if (selectedword === topicword.word) {
+ found = true;
+ relevance += (.5 + topicword.weight);
}
- })
+ });
+ if (useSearchString && topicword.word.search(searchString) !== -1) {
+ found = true;
+ relevance += (.5 + topicword.weight);
+ }
});
- return foundWords.reduce(function(mem, w) { return mem && w}, true);
+ topic.relevance = relevance;
+ return found;
}).sort(function(a,b) {
- return b.score - a.score;
- }));
+ return b.relevance - a.relevance;
+ });
} else {
- showTopics(sortedTopics);
+ var topiclist = sortedTopics;
}
- }
-
- function showTopics(topiclist) {
- var topicHtmls = ["", "", ""],
- globwords = {},
- topwords = [];
+ var topicHtmls = ["", "", ""];
+ if (useSearchString) {
+ var searchStringRx = new RegExp('(' + searchString.replace(/(\W)/g,'\\$1') + ')', "gim");
+ $(".topwords-list li").each(function() {
+ var el = $(this);
+ el.html(el.text().replace(searchStringRx,'<span class="highlight">$1</span>'));
+ });
+ } else {
+ $(".topwords-list li").each(function() {
+ var el = $(this);
+ el.text(el.text());
+ });
+ }
topiclist.forEach(function(topic,i) {
var wordsToShow = topic.words.slice(0,5),
max = wordsToShow[0].weight,
@@ -95,24 +106,23 @@
scale = 10 / (max - min);
var li = '<li class="shadow-block topic" data-topic-id="'
+ topic.index
- + '" data-viz-color="'
- + Raphael.hsl(topic.index / data.topics.length, .8, .5) //colorset_vivid[topic.index % colorset_vivid.length] //colorset_vivid[i % colorset_vivid.length]
- + '"" data-li-color="'
- + Raphael.hsl(topic.index / data.topics.length, .7, .8) //colorset_pastel[topic.index % colorset_pastel.length] //colorset_pastel[i % colorset_pastel.length]
+ + '" data-timestamp="'
+ + new Date().valueOf()
+ '"><ul class="topic-words">'
+ wordsToShow.reduce(function(memwords, word) {
return memwords
+ '<li style="font-size: '
+ ( 10 + scale * (word.weight - min) )
- + 'px;">'
- + word.word
+ + 'px;"'
+ + ( selectedWords.indexOf(word.word) == -1 ? '' : ' class="selected"')
+ + '>'
+ + ( useSearchString
+ ? word.word.replace(searchStringRx,'<span class="highlight">$1</span>')
+ : word.word )
+ '</li>';
},"")
+ '</ul></li>';
topicHtmls[i % 3] += li;
- topic.words.forEach(function(word) {
- globwords[word.word] = word.weight + (globwords[word.word] || 0)
- });
});
var tb = $(".topics-block");
tb.html(topicHtmls.reduce(function(mem,html) {
@@ -120,124 +130,105 @@
},""));
tb.css("top",0);
- for (var w in globwords) {
- topwords.push({
- word : w,
- weight : globwords[w]
- });
- }
- topwords.sort(function(a, b) {
- return b.weight - a.weight;
- });
-
- var wordsToShow = topwords.slice(0,30),
- max = wordsToShow[0].weight,
- min = Math.min(wordsToShow[wordsToShow.length - 1].weight, max - .01),
- scale = 10 / (max - min);
-
- $(".topwords-block").html(wordsToShow.reduce(function(mem, d) {
- return mem
- + '<li style="font-size: '
- + ( 10 + scale * (d.weight - min) )
- + 'px;"'
- + (selectedWords.indexOf(d.word) !== -1 ? ' class="selected"' : '')
- + '>'
- + d.word
- + '</li>'
- },""));
-
showTopicViz();
}
+ var topwords = [], globwords = {};
+
+ data.topics.forEach(function(topic) {
+ topic.words.forEach(function(word) {
+ globwords[word.word] = word.weight + (globwords[word.word] || 0)
+ });
+ })
+
+ for (var w in globwords) {
+ topwords.push({
+ word : w,
+ weight : globwords[w]
+ });
+ }
+ topwords.sort(function(a, b) {
+ return b.weight - a.weight;
+ });
+
+ $(".keyword-search").autocomplete({
+ source: topwords.map(function(w) { return w.word })
+ }).on("keyup change paste", wordFilter);
+
+ var wordsToShow = topwords.slice(0,40),
+ max = wordsToShow[0].weight,
+ min = Math.min(wordsToShow[wordsToShow.length - 1].weight, max - .01),
+ scale = 10 / (max - min);
+
+ $(".topwords-list").html(wordsToShow.reduce(function(mem, d) {
+ return mem
+ + '<li style="font-size: '
+ + ( 10 + scale * (d.weight - min) )
+ + 'px;">'
+ + d.word
+ + '</li>'
+ },""));
+
function showTopicViz() {
var selectedBlocks = $(".topic.selected, .topic.hover"),
- sbl = selectedBlocks.length;
- if (!sbl) {
- selectedBlocks = $(".topic");
+ sbl = selectedBlocks.length,
+ topicBlocks = $(".topic");
+ if (!sbl && topicBlocks.length !== data.topics.length) {
+ topicBlocks.each(function() {
+
+ })
+ selectedBlocks = topicBlocks;
sbl = selectedBlocks.length;
}
- if (sbl) {
- $(".topic").css("background","");
- selectedBlocks.each(function() {
- var el = $(this);
- el.css("background",el.attr("data-li-color"));
- });
- } else {
- $(".topic").each(function() {
- var el = $(this);
- el.css("background",el.attr("data-li-color"));
- });
- }
- var topicsAndColors = selectedBlocks.map(function() {
+ var topicsAndColors = [];
+ selectedBlocks.map(function() {
var el = $(this),
- topicid = parseInt(el.attr("data-topic-id")),
- vizcolor = el.attr("data-viz-color");
- return {
- topic: data.topics[topicid],
+ topicid = parseInt(el.attr("data-topic-id"));
+ topicsAndColors.push({
+ "$": el,
+ timestamp: parseInt(el.attr("data-timestamp")),
+ hovered: el.hasClass("hover"),
id: topicid,
- color: vizcolor
- };
- });
- if (PATH_MODE) {
- topicpaths.forEach(function(p) {
- p.hide();
- });
- topicsAndColors.each(function(j, t) {
- var p = topicpaths[t.id];
- p.attr({
- stroke: t.color,
- fill: t.color,
- "fill-opacity": .25
- });
- p.show();
+ topic: data.topics[topicid]
});
- if (sbl > 1 && sbl < data.topics.length) {
- var d = "M0,0L" + data.segments.map(function(mmso, i) {
- var tweets = 0;
- for (var j = 0; j < sbl; j++) {
- tweets += topicsAndColors[j].topic.scores[i]
- }
- x = xscale * tweets / mmso.duration;
- return x
- + ","
- + yscale * (mmso.start + mmso.duration / 3)
- + "L"
- + x
- + ","
- + yscale * (mmso.start + 2 * mmso.duration / 3);
- }).join("L") + "L0,"+(yscale * data.duration);
- sumpatha.attr({ path: d });
- sumpathb.attr({ path: d });
- sumpatha.show();
- sumpathb.show();
+ });
+ topicsAndColors.sort(function(a,b) {
+ return (a.hovered
+ ? 1
+ : ( b.hovered
+ ? -1
+ : ( a.timestamp - b.timestamp ) || ( a.id - b.id )
+ )
+ )
+ });
+ topicBlocks.css("background","");
+ topicsAndColors.forEach(function(topic, i) {
+ topic.color = colorset[i % colorset.length];
+ topic.$.css("background", topic.color);
+ });
+
+ for (var i = 0; i < nmmso; i++) {
+ var opacity = 0,
+ rgb = [0,0,0];
+ topicsAndColors.forEach(function(topic) {
+ var c = Raphael.getRGB(topic.color),
+ o = topic.topic.weights[i];
+ rgb[0] += c.r * o;
+ rgb[1] += c.g * o;
+ rgb[2] += c.b * o;
+ opacity += o;
+ });
+ if (opacity) {
+ color = Raphael.rgb.apply(Raphael, rgb.map(function(c) {
+ return c/opacity;
+ }));
+ segmentrects[i].show();
+ segmentrects[i].attr({
+ fill: color,
+ opacity: .2 + .8 * opacity
+ });
} else {
- sumpatha.hide();
- sumpathb.hide();
- }
- } else {
- for (var i = 0; i < nmmso; i++) {
- var opacity = 0,
- rgb = [0,0,0];
- for (var j = 0; j < sbl; j++) {
- var c = Raphael.getRGB(topicsAndColors[j].color),
- o = topicsAndColors[j].topic.weights[i];
- rgb[0] += c.r * o;
- rgb[1] += c.g * o;
- rgb[2] += c.b * o;
- opacity += o;
- }
- if (opacity) {
- color = Raphael.rgb.apply(Raphael, rgb.map(function(c) {
- return c/opacity;
- }));
- segmentrects[i].show();
- segmentrects[i].attr({
- fill: color,
- opacity: .2 + .8 * opacity
- });
- } else {
- segmentrects[i].hide();
- }
+ segmentrects[i].hide();
}
}
@@ -247,42 +238,16 @@
paper = new Raphael(jqsvg[0]),
ph = jqsvg.height(),
pw = jqsvg.width(),
- yscale = ph / data.duration,
+ yscale = (ph - 20) / data.duration,
mx = Math.max.apply(Math, data.segments.map(function(s) { return s.tweet_rate})),
- xscale = (pw - 10)/mx;
+ xscale = (pw - 50)/mx;
+ console.log(mx);
- if (PATH_MODE) {
- var sumpatha = paper.path();
- sumpatha.attr({
- fill: "#f0f0f0",
- stroke: "none"
- });
- var topicpaths = data.topics.map(function(topic) {
- var d = "M0,0L" + topic.scores.map(function(s, i) {
- var mmso = data.segments[i],
- x = xscale * s / mmso.duration;
- return x
- + ","
- + yscale * (mmso.start + mmso.duration / 3)
- + "L"
- + x
- + ","
- + yscale * (mmso.start + 2 * mmso.duration / 3);
- }).join("L") + "L0,"+(yscale * data.duration);
- return paper.path(d);
- });
- var sumpathb = paper.path();
- sumpathb.attr({
- stroke: "#666666",
- "stroke-width": 2
- });
- } else {
- var segmentrects = data.segments.map(function(mmso) {
- var rect = paper.rect(0, yscale * mmso.start, pw - 50, yscale * mmso.duration);
- rect.attr({stroke: "none"});
- return rect;
- });
- }
+ var segmentrects = data.segments.map(function(mmso) {
+ var rect = paper.rect(0, yscale * mmso.start, pw - 50, yscale * mmso.duration);
+ rect.attr({stroke: "none"});
+ return rect;
+ });
var d = "M" + data.segments.map(function(s) {
var x = xscale * s.tweet_rate;
@@ -295,8 +260,15 @@
+ yscale * (s.start + 2 * s.duration / 3);
}).join("L");
- paper.path(d);
-
+ paper.path(d).attr({
+ "stroke-width": 4,
+ "stroke": "#000000",
+ opacity: .5
+ });
+ paper.path(d).attr({
+ "stroke-width": 1,
+ "stroke": "#ffffff"
+ });
for (var i=0; i < data.duration; i += 1800) {
var y = yscale * i;
@@ -304,26 +276,45 @@
stroke: "#666"
});
paper.text(pw - 2, y + 6, secsToString(i)).attr({
- "text-anchor": "end"
+ "text-anchor": "end",
+ "fill": "#ffffff"
});
}
- paper.text(pw-2, ph-6, secsToString(data.duration)).attr({
- "text-anchor": "end"
+ paper.text(pw-2, ph-14, secsToString(data.duration)).attr({
+ "text-anchor": "end",
+ "fill": "#ffffff"
+ });
+ paper.path("M0," + (ph-20) + "L" + pw + "," + (ph-20)).attr({
+ stroke: "#666"
+ });
+
+ var x = xscale * 1000 / 60;
+ paper.path("M" + x + ",0L" + x + "," + (ph - 10)).attr({
+ stroke: "#666"
+ });
+
+ paper.text(x-2, ph - 14,"1000 tweets/minute").attr({
+ "text-anchor": "end",
+ "fill": "#ffffff"
});
wordFilter();
$(".topics-block").on("mouseenter", ".topic", function() {
- var topicid = parseInt($(this).attr("data-topic-id")),
- color = $(this).attr("data-viz-color"),
- topic = data.topics[topicid];
- $(this).addClass("hover");
- showTopicViz();
+ var el = $(this);
+ if (!el.hasClass("selected")) {
+ el.addClass("hover");
+ showTopicViz();
+ }
}).on("mouseleave", ".topic", function() {
$(this).removeClass("hover");
showTopicViz();
}).on("click", ".topic", function() {
+ var el = $(this);
$(this).toggleClass("selected");
+ if (el.hasClass("selected")) {
+ el.attr("data-timestamp", new Date().valueOf())
+ }
showTopicViz();
});