70 vsWidth = config.movieCount * (config.columnWidth + config.columnSpacing); |
71 vsWidth = config.movieCount * (config.columnWidth + config.columnSpacing); |
71 |
72 |
72 $("#data-viz").css('height', vsHeight); |
73 $("#data-viz").css('height', vsHeight); |
73 $('.posters').css('width', vsWidth); |
74 $('.posters').css('width', vsWidth); |
74 |
75 |
|
76 var timeAtPause = 0, paused = true; |
|
77 |
|
78 function currentVizTime() { |
|
79 if (paused) { |
|
80 return timeAtPause; |
|
81 } else { |
|
82 return new Date().valueOf() - timeStart; |
|
83 } |
|
84 } |
|
85 |
|
86 function vizTimeToOriginalTime(t) { |
|
87 return originalStart + t / timeScale; |
|
88 } |
|
89 |
|
90 function originalTimeToVizTime(t) { |
|
91 return (t - originalStart) * timeScale; |
|
92 } |
|
93 |
|
94 function play() { |
|
95 if (!paused) { |
|
96 return; |
|
97 } |
|
98 timeStart = new Date().valueOf() - timeAtPause; |
|
99 paused = false; |
|
100 $(".play-pause").removeClass("play").addClass("pause").text("Pause"); |
|
101 } |
|
102 |
|
103 function pause() { |
|
104 if (paused) { |
|
105 return; |
|
106 } |
|
107 timeAtPause = currentVizTime(); |
|
108 paused = true; |
|
109 $(".play-pause").removeClass("pause").addClass("play").text("Lecture"); |
|
110 } |
|
111 |
|
112 $(".play-pause").click(function() { |
|
113 if (paused) { |
|
114 play(); |
|
115 } else { |
|
116 pause(); |
|
117 } |
|
118 }); |
|
119 |
75 function startViz() { |
120 function startViz() { |
|
121 |
|
122 timeAtPause = 0; |
76 |
123 |
77 opinions.sort(function(a,b) { |
124 opinions.sort(function(a,b) { |
78 return a._timestamp > b._timestamp; |
125 return a._timestamp > b._timestamp; |
79 }); |
126 }); |
80 $("#data-viz").html("").css("text-align","left"); |
127 $("#data-viz").html("").css("text-align","left"); |
131 }); |
178 }); |
132 |
179 |
133 return res; |
180 return res; |
134 }, |
181 }, |
135 stream : { |
182 stream : { |
136 provider : "tokens", |
183 provider : "direct" |
137 refresh: config.refreshRate, |
184 } |
138 now : 0 |
|
139 }, |
|
140 tokens: opinions.map(function(opinion) { |
|
141 return { |
|
142 category: opinion._column, |
|
143 datetime: opinion.datetime, |
|
144 timestamp: opinion._timestamp, |
|
145 movie: opinion._movie, |
|
146 colorId: opinion._colorId, |
|
147 fillStyle: opinion._color, |
|
148 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" )), |
|
149 username: opinion.actor.user.userName, |
|
150 actiontype: opinion.action.type, |
|
151 actionvalue: opinion.action.value, |
|
152 content: ( opinion.action.type === "userreview" ? opinion.content.$ : (opinion.action.type === "wanttosee" ? "veut voir ce film." : "" ) ), |
|
153 size: 30, |
|
154 texture: { |
|
155 src: "iri/img/logo-iri.png" |
|
156 }, |
|
157 strokeStyle: "rgba(255,255,255,.2)", |
|
158 t: Math.floor((opinion._timestamp - originalStart) * timeScale / config.refreshRate), |
|
159 shape:{ |
|
160 type:'box', |
|
161 width: config.columnWidth / 2 - 1, |
|
162 height: config.tokenHeight / 2 |
|
163 }, |
|
164 callback:{ |
|
165 mouseover: function(token) { |
|
166 if (token !== lastShownToken) { |
|
167 var h = "Il y a ", |
|
168 deltaT = Date.now() - token.attr("timestamp"), |
|
169 deltaH = Math.round(deltaT / HOURS); |
|
170 if (deltaH) { |
|
171 h += deltaH + " heure"; |
|
172 if (deltaH > 1) { |
|
173 h += "s"; |
|
174 } |
|
175 } else { |
|
176 var deltaM = Math.round(deltaT / MINUTES); |
|
177 h += deltaM + " minute"; |
|
178 if (deltaM > 1) { |
|
179 h += "s"; |
|
180 } |
|
181 } |
|
182 commentDiv.find(".comment-content").removeClass("userreview wanttosee rate").addClass(token.attr("actiontype")); |
|
183 commentDiv.find(".stars-rating").attr("className","stars-rating rate-"+token.attr("actionvalue")); |
|
184 commentDiv.find(".review-content").text(token.attr("content")); |
|
185 commentDiv.find(".date").text(h); |
|
186 commentDiv.find(".avatar img").attr("src", token.attr("avatar")); |
|
187 commentDiv.find(".username").text(token.attr("username")); |
|
188 commentDiv.show(); |
|
189 lastShownToken = token; |
|
190 } |
|
191 }, |
|
192 mouseout: function(token) { |
|
193 lastShownToken = null; |
|
194 setTimeout(function() { |
|
195 if (!lastShownToken) { |
|
196 commentDiv.hide(); |
|
197 } |
|
198 }, 200); |
|
199 }, |
|
200 suspension: function(token) { |
|
201 var currentT = config.refreshRate * token.attr("t"); |
|
202 deltaT = Date.now() - currentT; |
|
203 setTimeout(function() { |
|
204 token.flocculate(); |
|
205 barChart.strata.update(barChart); |
|
206 }, 8000); |
|
207 } |
|
208 } |
|
209 } |
|
210 }) |
|
211 }, |
185 }, |
212 sedimentation: { |
186 sedimentation: { |
213 token: { |
187 token: { |
214 size: { |
188 size: { |
215 original:12, |
189 original:12, |
226 } |
200 } |
227 } |
201 } |
228 } |
202 } |
229 } |
203 } |
230 |
204 |
|
205 function onTokenMouseover(token) { |
|
206 //if (token !== lastShownToken) { |
|
207 var h = "Il y a ", |
|
208 deltaT = Date.now() - token.attr("timestamp"), |
|
209 deltaH = Math.round(deltaT / HOURS); |
|
210 if (deltaH) { |
|
211 h += deltaH + " heure"; |
|
212 if (deltaH > 1) { |
|
213 h += "s"; |
|
214 } |
|
215 } else { |
|
216 var deltaM = Math.round(deltaT / MINUTES); |
|
217 h += deltaM + " minute"; |
|
218 if (deltaM > 1) { |
|
219 h += "s"; |
|
220 } |
|
221 } |
|
222 commentDiv.find(".comment-content").removeClass("userreview wanttosee rate").addClass(token.attr("actiontype")); |
|
223 commentDiv.find(".stars-rating").attr("className","stars-rating rate-"+token.attr("actionvalue")); |
|
224 commentDiv.find(".review-content").text(token.attr("content")); |
|
225 commentDiv.find(".date").text(h); |
|
226 commentDiv.find(".avatar img").attr("src", token.attr("avatar")); |
|
227 commentDiv.find(".username").text(token.attr("username")); |
|
228 commentDiv.show(); |
|
229 lastShownToken = token; |
|
230 //} |
|
231 } |
|
232 |
|
233 function onTokenMouseout(token) { |
|
234 /* lastShownToken = null; |
|
235 setTimeout(function() { |
|
236 if (!lastShownToken) { */ |
|
237 commentDiv.hide(); /* |
|
238 } |
|
239 }, 200); */ |
|
240 } |
|
241 |
231 console.log(barChartSettings); |
242 console.log(barChartSettings); |
232 |
243 |
233 var barChart = $("#data-viz").vs(barChartSettings).data('visualSedimentation'); |
244 var barChart = $("#data-viz").vs(barChartSettings).data('visualSedimentation'); |
234 |
245 |
235 $(".timer-bar-value").width(0); |
246 $(".timer-bar-value").width(0); |
236 |
247 |
|
248 play(); |
|
249 |
237 clearInterval(clockInterval); |
250 clearInterval(clockInterval); |
238 deltaT = Date.now(); |
251 |
|
252 var lastTimestamp = 0; |
|
253 |
239 clockInterval = setInterval(function() { |
254 clockInterval = setInterval(function() { |
240 var t = Date.now() - deltaT, |
255 var vizT = currentVizTime(); |
241 w = $('.timer-bar').width() * Math.min(1, t / config.vizDuration); |
256 var originalT = vizTimeToOriginalTime(vizT), |
|
257 tokensToAdd = opinions.filter(function(o) { |
|
258 return o._timestamp > lastTimestamp && o._timestamp <= originalT |
|
259 }); |
|
260 lastTimestamp = originalT; |
|
261 |
|
262 tokensToAdd.forEach(function(opinion) { |
|
263 barChart.addToken({ |
|
264 category: opinion._column, |
|
265 datetime: opinion.datetime, |
|
266 timestamp: opinion._timestamp, |
|
267 viztime: originalTimeToVizTime(opinion._timestamp), |
|
268 movie: opinion._movie, |
|
269 colorId: opinion._colorId, |
|
270 fillStyle: opinion._color, |
|
271 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" )), |
|
272 username: opinion.actor.user.userName, |
|
273 actiontype: opinion.action.type, |
|
274 actionvalue: opinion.action.value, |
|
275 content: ( opinion.action.type === "userreview" ? opinion.content.$ : (opinion.action.type === "wanttosee" ? "veut voir ce film." : "" ) ), |
|
276 size: 30, |
|
277 texture: { |
|
278 src: "iri/img/logo-iri.png" |
|
279 }, |
|
280 strokeStyle: "rgba(255,255,255,.2)", |
|
281 shape:{ |
|
282 type:'box', |
|
283 width: config.columnWidth / 2 - 1, |
|
284 height: config.tokenHeight / 2 |
|
285 }, |
|
286 callback: { |
|
287 mouseover: onTokenMouseover, |
|
288 mouseout: onTokenMouseout |
|
289 } |
|
290 }) |
|
291 }); |
|
292 |
|
293 var deleteT = vizT - config.disappearAfter; |
|
294 |
|
295 barChart.selectAll("state",1) |
|
296 .filter(function(t) { |
|
297 return t.attr("viztime") <= deleteT; |
|
298 }).forEach(function(t) { |
|
299 t.flocculate(); |
|
300 }); |
|
301 |
|
302 if (deleteT > config.vizDuration) { |
|
303 pause(); |
|
304 } |
|
305 |
|
306 barChart.strata.update(barChart); |
|
307 |
|
308 var w = $('.timer-bar').width() * Math.min(1, vizT / config.vizDuration); |
242 $(".timer-bar-value").width(w); |
309 $(".timer-bar-value").width(w); |
243 }, 200); |
310 }, config.refreshRate); |
244 } |
311 } |
245 |
312 |
246 function loadMovie(movie) { |
313 function loadMovie(movie) { |
247 $.getJSON( |
314 $.getJSON( |
248 "http://api.allocine.fr/rest/v3/opinionlist", |
315 "http://api.allocine.fr/rest/v3/opinionlist", |