--- a/integ/iri/js/iri-buzz.js Thu May 02 18:28:52 2013 +0200
+++ b/integ/iri/js/iri-buzz.js Fri May 03 16:15:55 2013 +0200
@@ -15,11 +15,14 @@
movieCount: 10,
opinionsPerPage: 100,
colors: [ "#f62a43", "#f3c000", "#2d9252"],
+ borderColors: [ "#f7788e", "#fdde83", "#3bb767" ],
+ stripeColors: [ "#c92238", "#c79e03", "#237844" ],
refreshRate: .25 * SECONDS,
columnSpacing: 40,
columnWidth: 150,
tokenHeight: 16,
- disappearAfter: 8 * SECONDS
+ fallSpeed: 4,
+ disappearAfter: 4 * SECONDS
}
$(function() {
@@ -33,21 +36,29 @@
clockInterval,
tzDelta = 0,
tzSuffix = 'Z';
-
- function addPatterns() {
- if (!$("pattern").length) {
- var xml = '<svg style="position: absolute;" width="1" height="1"><defs>'
- + config.colors.map(function(color, i) {
- return '<pattern id="pattern_'
- + i
- + '" x="0" y="0" width="3" height="3" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="3" height="3" fill="'
- + color
- + '" /><path d="M0 0L3 3" stroke="#333333" stroke-width=".3" opacity=".8" /></pattern>';
- }).join("")
- + '</defs></svg>';
- $("body").append(xml);
- }
- }
+
+
+ // Add Patterns
+ var xml = '<svg style="position: absolute;" width="1" height="1"><defs>'
+ + config.colors.map(function(color, i) {
+ return '<pattern id="pattern_'
+ + i
+ + '" x="0" y="0" width="3" height="3" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="3" height="3" fill="'
+ + color
+ + '" />'
+ + _.range(3).map(function(n) {
+ return '<rect x="'
+ + n
+ + '" y="'
+ + n
+ + '" width="1" height="1" fill="'
+ + config.stripeColors[i]
+ + '" />'
+ }).join("")
+ + '</pattern>';
+ }).join("")
+ + '</defs></svg>';
+ $("body").append(xml);
function resizeTimer() {
var w = Math.max(80, $(window).width() - 272),
@@ -125,7 +136,12 @@
return a._timestamp > b._timestamp;
});
$("#data-viz").html("").css("text-align","left");
- var lastShownToken = null;
+
+ var lastShownToken = null,
+ maxData = Math.max.apply(Math, movies.map(function(m) { return m.opinions.length; })),
+ aggrHeight = vsHeight - 80,
+ aggrScale = aggrHeight / maxData;
+
var barChartSettings = {
width : vsWidth,
height : vsHeight,
@@ -135,7 +151,7 @@
height: vsHeight
},
options : {
- layout: true
+ layout: false
},
data : {
model : movies.map(function(movie) {
@@ -144,31 +160,29 @@
};
}),
strata : function() {
-
if (typeof barChart === "undefined") {
var flocculated = [];
- _(function() {
- addPatterns();
- _.range(3).map(function(colorId) {
- $(".layer_"+colorId).css({
- fill: "url(#pattern_" +colorId + ")",
- stroke: "#ffffff",
- "stroke-opacity": .2
- });
+ _.range(3).map(function(colorId) {
+ $(".layer_"+colorId).css({
+ fill: "url(#pattern_" +colorId + ")",
+ stroke: config.borderColors[colorId]
});
- }).defer();
+ });
} else {
var flocculated = barChart.selectAll("state",2);
}
- var res = movies.map(function(movie) {
+ var res = movies.map(function(movie, i) {
var movieTokens = flocculated.filter(function(t) {
return t.attr("movie") === movie.id;
});
+ var movieHeight = aggrScale * movieTokens.length;
+ movie.poster$.find(".poster-overlay").css("top", -movieHeight);
return _.range(3).map(function(colorId) {
var stratumTokens = movieTokens.filter(function(t) {
return t.attr("colorId") === colorId;
}).length;
+ movie.poster$.find(".poster-" + colorId).text(stratumTokens);
return {
value: function() {
return stratumTokens
@@ -191,8 +205,8 @@
}
},
aggregation:{
- height: vsHeight - 80,
- maxData: Math.max.apply(Math, movies.map(function(m) { return m.opinions.length; }))
+ height: aggrHeight,
+ maxData: maxData
},
suspension:{
decay:{
@@ -203,7 +217,8 @@
}
function onTokenMouseover(token) {
- //if (token !== lastShownToken) {
+ if (token !== lastShownToken) {
+ $("body").css("cursor", "pointer");
var h = "Il y a ",
deltaT = Date.now() - token.attr("timestamp"),
deltaH = Math.round(deltaT / HOURS);
@@ -227,22 +242,25 @@
commentDiv.find(".username").text(token.attr("username"));
commentDiv.show();
lastShownToken = token;
- //}
+ }
}
function onTokenMouseout(token) {
- /* lastShownToken = null;
+ lastShownToken = null;
setTimeout(function() {
- if (!lastShownToken) { */
- commentDiv.hide(); /*
+ if (!lastShownToken) {
+ $("body").css("cursor", "");
+ commentDiv.hide();
}
- }, 200); */
+ }, 200);
}
console.log(barChartSettings);
var barChart = $("#data-viz").vs(barChartSettings).data('visualSedimentation');
+ barChart.world.SetGravity(new barChart.phy.b2Vec2(0,10 * config.fallSpeed));
+
$(".timer-bar-value").width(0);
play();
@@ -252,11 +270,18 @@
var lastTimestamp = 0;
clockInterval = setInterval(function() {
+
+ if (paused) {
+ return;
+ }
+
var vizT = currentVizTime();
+
var originalT = vizTimeToOriginalTime(vizT),
tokensToAdd = opinions.filter(function(o) {
return o._timestamp > lastTimestamp && o._timestamp <= originalT
});
+
lastTimestamp = originalT;
tokensToAdd.forEach(function(opinion) {
@@ -267,17 +292,17 @@
viztime: originalTimeToVizTime(opinion._timestamp),
movie: opinion._movie,
colorId: opinion._colorId,
- fillStyle: opinion._color,
+ fillStyle: config.colors[opinion._colorId],
avatar: (typeof opinion.actor.user.avatar === "undefined" ? "http://fr.web.img6.acsta.net/r_50_x/commons/emptymedia/AvatarAllocineMr.gif" : resizeAcPicture( opinion.actor.user.avatar, 50, "x" )),
username: opinion.actor.user.userName,
actiontype: opinion.action.type,
actionvalue: opinion.action.value,
- content: ( opinion.action.type === "userreview" ? opinion.content.$ : (opinion.action.type === "wanttosee" ? "veut voir ce film." : "" ) ),
+ content: ( opinion.action.type === "userreview" ? opinion.content.$ : (opinion.action.type === "wanttosee" ? "veut voir ce film." : "" ) ).replace(/[\n\r\s]+/mg,' ').replace(/(^.{320,340})[\s].+$/,'$1…'),
size: 30,
texture: {
src: "iri/img/logo-iri.png"
},
- strokeStyle: "rgba(255,255,255,.2)",
+ strokeStyle: config.borderColors[opinion._colorId],
shape:{
type:'box',
width: config.columnWidth / 2 - 1,
@@ -307,6 +332,7 @@
var w = $('.timer-bar').width() * Math.min(1, vizT / config.vizDuration);
$(".timer-bar-value").width(w);
+
}, config.refreshRate);
}
@@ -331,7 +357,6 @@
}
tokens.forEach(function(a) {
a._colorId = config.colorIds[a.action.value];
- a._color = config.colors[a._colorId];
a._timestamp = Date.parse(a.datetime + tzSuffix) - tzDelta;
a._movie = movie.id;
a._column = movie.column;
@@ -415,14 +440,21 @@
moviesToLoad = movies.length;
movies.forEach(loadMovie);
$('.posters').html(movies.map(function(movie) {
- return '<li style=" margin: 0 '
+ return '<li class="poster" style=" margin: 0 '
+ Math.floor(config.columnSpacing / 2)
+ 'px"><img width="150" height="200" src="'
+ resizeAcPicture(movie.poster,150,200)
+ '" alt="'
+ movie.title
- +'" /></li>';
+ + '" /><div class="poster-overlay"><div class="poster-datainfo">'
+ + '<ul class="poster-distribution"><li class="poster-2">0</li><li class="poster-1">0</li><li class="poster-0">0</li>'
+ + '</ul></div></div></li>';
}).join(""));
+
+ $(".poster")
+ .each(function(i) {
+ movies[i].poster$ = $(this);
+ });
}
);