--- a/integ/iri/css/iri-buzz.css Mon Apr 29 18:52:17 2013 +0200
+++ b/integ/iri/css/iri-buzz.css Tue Apr 30 12:51:27 2013 +0200
@@ -12,8 +12,7 @@
a.rejouer{float:left;width: 92px; height: 32px; display: inline-block; text-align: center; line-height: 32px; font-size: 11px; font-weight: bold;text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75);-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75);box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; background: #1899e1;background: -moz-linear-gradient(top, #1899e1 0%, #126ae3 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1899e1), color-stop(100%,#126ae3));background: -webkit-linear-gradient(top, #1899e1 0%,#126ae3 100%);background: -o-linear-gradient(top, #1899e1 0%,#126ae3 100%);background: -ms-linear-gradient(top, #1899e1 0%,#126ae3 100%);background: linear-gradient(to bottom, #1899e1 0%,#126ae3 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1899e1', endColorstr='#126ae3',GradientType=0 );}
a.rejouer:hover{background: #126ae3;background: -moz-linear-gradient(top, #126ae3 0%, #1899e1 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#126ae3), color-stop(100%,#1899e1)); background: -webkit-linear-gradient(top, #126ae3 0%,#1899e1 100%);background: -o-linear-gradient(top, #126ae3 0%,#1899e1 100%); background: -ms-linear-gradient(top, #126ae3 0%,#1899e1 100%); background: linear-gradient(to bottom, #126ae3 0%,#1899e1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#126ae3', endColorstr='#1899e1',GradientType=0 );}
-.posters{ margin-left: 5px;}
-.posters li{float: left;width: 150px; height: 200px;overflow: hidden;margin-right: 10px;}
+.posters li{float: left;width: 150px; height: 200px;overflow: hidden;}
#data-viz{padding-top: 50px;line-height: 50px; text-align: center; color: #909090; font-weight: bold; font-size: 40px;}
--- a/integ/iri/js/iri-buzz.js Mon Apr 29 18:52:17 2013 +0200
+++ b/integ/iri/js/iri-buzz.js Tue Apr 30 12:51:27 2013 +0200
@@ -12,21 +12,41 @@
"2.5": 1, "3.0": 1, "3.5": 1,
"4.0": 2, "4.5": 2, "5.0": 2
},
- movieCount: 10,
+ movieCount: 15,
opinionsPerPage: 100,
- colors: [ "#c00000", "#ffd000", "#008000"],
- refreshRate: 50
+ colors: [ "#f62a43", "#f3c000", "#2d9252"],
+ refreshRate: 200,
+ columnSpacing: 40,
+ columnWidth: 150,
+ tokenHeight: 16
}
$(function() {
- var originalStart = new Date().valueOf() - config.originalDuration,
+ var originalStart = Date.now() - config.originalDuration,
timeScale = config.vizDuration / config.originalDuration,
movies,
moviesToLoad,
opinions = [],
- loadTime = new Date().valueOf(),
- clockInterval;
+ loadTime = Date.now(),
+ 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);
+ }
+ }
function resizeTimer() {
var w = Math.max(80, $(window).width() - 170),
@@ -47,7 +67,7 @@
$(window).resize(resizeTimer);
var vsHeight = $(window).height() - $('footer').height() - $('header').height() - 300,
- vsWidth = config.movieCount * 160;
+ vsWidth = config.movieCount * (config.columnWidth + config.columnSpacing);
$("#data-viz").css('height', vsHeight);
$('.posters').css('width', vsWidth);
@@ -64,7 +84,7 @@
width : vsWidth,
height : vsHeight,
chart : {
- spacer : 5,
+ spacer : config.columnSpacing / 2,
y: 100,
height: vsHeight - 100
},
@@ -79,8 +99,13 @@
if (typeof barChart === "undefined") {
var flocculated = [];
_(function() {
+ addPatterns();
_.range(3).map(function(colorId) {
- $(".layer_"+colorId).css("fill", config.colors[colorId]);
+ $(".layer_"+colorId).css({
+ fill: "url(#pattern_" +colorId + ")",
+ stroke: "#ffffff",
+ "stroke-opacity": .2
+ });
});
}).defer();
} else {
@@ -117,12 +142,16 @@
movie: opinion._movie,
colorId: opinion._colorId,
fillStyle: opinion._color,
- strokeStyle: "#555555",
+ size: 30,
+ texture: {
+ src: "iri/img/star-icon.png"
+ },
+ strokeStyle: "rgba(255,255,255,.2)",
t: Math.floor((opinion._timestamp - originalStart) * timeScale / config.refreshRate),
shape:{
type:'box',
- width:74,
- height:5
+ width: config.columnWidth / 2 - 1,
+ height: config.tokenHeight / 2
},
callback:{
suspension: function(token) {
@@ -153,12 +182,15 @@
}
}
}
+
+ //console.log(barChartSettings);
+
barChart = $("#data-viz").vs(barChartSettings).data('visualSedimentation');
- var startOfViz = new Date();
+ var startOfViz = Date.now();
clearInterval(clockInterval);
$(".timer-bar-value").width(0);
clockInterval = setInterval(function() {
- $(".timer-bar-value").width($('.timer-bar').width() * Math.min(1, (new Date() - startOfViz) / config.vizDuration));
+ $(".timer-bar-value").width($('.timer-bar').width() * Math.min(1, (Date.now() - startOfViz) / config.vizDuration));
},
100);
}
@@ -185,7 +217,7 @@
tokens.forEach(function(a) {
a._colorId = config.colorIds[a.action.value];
a._color = config.colors[a._colorId];
- a._timestamp = new Date(a.datetime).valueOf();
+ a._timestamp = Date.parse(a.datetime + tzSuffix) - tzDelta;
a._movie = movie.id;
a._column = movie.column;
});
@@ -204,7 +236,7 @@
console.log("Page " + movie.opinionPage + " of '" + movie.title + "' -- total : " + movie.opinions.length + " opinions loaded");
moviesToLoad--;
if (!moviesToLoad) {
- console.log("**** Everything is loaded, in " + (new Date().valueOf() - loadTime) / 1000 + " seconds");
+ console.log("**** Everything is loaded, in " + (Date.now() - loadTime) / 1000 + " seconds");
startViz();
}
}
@@ -224,6 +256,9 @@
function(d) {
$("#data-viz").html("Chargement des flux d'opinions<br />");
console.log("Movie List Loaded");
+ tzDelta = .5 * HOURS * Math.round((Date.parse(d.feed.updated) - loadTime) / (.5 * HOURS));
+ tzSuffix = d.feed.updated.replace(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/,'');
+
movies = d.feed.movie.map(function(movie, i) {
return {
id: movie.code,
@@ -237,7 +272,9 @@
moviesToLoad = movies.length;
movies.forEach(loadMovie);
$('.posters').html(movies.map(function(movie) {
- return '<li><img width="150" height="200" src="'
+ return '<li style=" margin: 0 '
+ + Math.floor(config.columnSpacing / 2)
+ + 'px"><img width="150" height="200" src="'
+ movie.poster
+ '" alt="'
+ movie.title
@@ -247,7 +284,7 @@
);
function refreshtoken() {
- return Math.floor(0x100000000 * Math.random()).toString(16) + "-" + (new Date().valueOf() % 0x100000000).toString(16);
+ return Math.floor(0x100000000 * Math.random()).toString(16) + "-" + (Date.now() % 0x100000000).toString(16);
}
$(".rejouer").click(function() {