|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
2 <html xmlns="http://www.w3.org/1999/xhtml"> |
|
3 <head> |
|
4 <title>Polemical tweet timeline</title> |
|
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
6 <style type='text/css'> |
|
7 #tip{ |
|
8 position : absolute; |
|
9 padding : 3px; |
|
10 z-index: 1000000; |
|
11 max-width: 200px; |
|
12 } |
|
13 #tip { |
|
14 display: none; |
|
15 background: transparent url("../src/css/imgs/white_arrow_long.png"); |
|
16 font-size: 12px; |
|
17 height: 125px; |
|
18 width: 180px; |
|
19 padding: 10px; |
|
20 padding-left: 15px; |
|
21 padding-top: 15px; |
|
22 padding-right: 15px; |
|
23 color: black; |
|
24 z-index: 1000000; |
|
25 font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; |
|
26 overflow:hidden; |
|
27 } |
|
28 |
|
29 </style> |
|
30 </head> |
|
31 <body> |
|
32 |
|
33 <div id="output" name="Ldt-output" style="position:absolute;left:800px;" ></div> |
|
34 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> |
|
35 <script type="text/javascript" src="raphael-min.js"></script> |
|
36 |
|
37 <div> |
|
38 <!-- |
|
39 |
|
40 --> |
|
41 |
|
42 |
|
43 |
|
44 <script type='text/javascript' src='http://www.iri.centrepompidou.fr/dev/ldt/static/ldt/js/LdtPlayer.min.js'></script> |
|
45 |
|
46 <div id="player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed" class="iri_player_embed"/> |
|
47 <script type="text/javascript"> |
|
48 var config = { |
|
49 /*metadata:{ |
|
50 format:'cinelab', |
|
51 src:'metadata.json', |
|
52 load:'json'},*/ |
|
53 metadata:{ |
|
54 format:'cinelab', |
|
55 src:'http://www.iri.centrepompidou.fr//dev/ldt/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02', |
|
56 load:'jsonp'}, |
|
57 gui:{ |
|
58 width:650, |
|
59 height:480, |
|
60 mode:'video', |
|
61 container:'player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed', |
|
62 debug:false, |
|
63 css:'http://www.iri.centrepompidou.fr//dev/ldt/static/ldt/css/LdtPlayer.css'}, |
|
64 player:{ |
|
65 type:'jwplayer', |
|
66 src:'http://www.iri.centrepompidou.fr//dev/ldt/static/ldt/swf/player.swf'} |
|
67 }; |
|
68 __IriSP.init(config); |
|
69 </script> |
|
70 |
|
71 <div id="charttimeline" style="position:relative;display:block;"></div> |
|
72 <div id="tip"></div> |
|
73 <div id="output"></div> |
|
74 <script type="text/javascript"> |
|
75 |
|
76 // CHART TIMELINE / VERSION PROTOTYPE :: |
|
77 // - config |
|
78 // - organisation classe |
|
79 // !!!- rollover !! |
|
80 // !!!!- legend !! |
|
81 // - time cursor |
|
82 // - seek !! |
|
83 |
|
84 /* |
|
85 1 | 1D973D > vert > ++ > OK |
|
86 2 | C5A62D > orange > ?? > Q |
|
87 3 | CE0A15 > rouge > -- > KO |
|
88 4 | 036AAE > bleu > == > REF |
|
89 5 | 585858 > gris > NQ > "" |
|
90 */ |
|
91 |
|
92 |
|
93 // configuration |
|
94 var config = { |
|
95 target:"charttimeline", |
|
96 x:8, |
|
97 y:418, |
|
98 width:650, |
|
99 height:70, |
|
100 heightmax:70 |
|
101 } |
|
102 // Make and define the Raphael area |
|
103 //var paper = Raphael(document.getElementById(config.target),config.width, config.height); |
|
104 |
|
105 var over = false; |
|
106 var tip = $("#tip").hide(); |
|
107 var tipText = ""; |
|
108 var tipColor = "#efefef"; |
|
109 |
|
110 function ChartTimeLine (){ |
|
111 |
|
112 var paper = Raphael(config.x,config.y,config.width, config.height); |
|
113 paper.rect(0,20,config.width,config.heightmax-20).attr({fill:"#fff","stroke-width":0.1,opacity: 0.1}); |
|
114 paper.rect(0,20,config.width,1).attr({fill:"#fff",stroke: "none"}); |
|
115 paper.rect(0,20,config.width,1).attr({fill:"#fff",stroke: "none"}); |
|
116 paper.rect(0,20,1,1).attr({fill:"#fff",stroke: "none"}); |
|
117 |
|
118 // variable |
|
119 |
|
120 var yCoef = 2; // coef for height of 1 tweet |
|
121 var frameSize = 5; // frame size |
|
122 var margin = 1; // marge between frame |
|
123 var lineSize = 650; // timeline pixel width |
|
124 var nbrframes = lineSize/frameSize; // frame numbers |
|
125 var numberOfTweet = 0; // number of tweet overide later |
|
126 var duration = 4299820 ; // timescale width |
|
127 var frameLenght =lineSize/frameSize;// frame timescale |
|
128 var timeline; |
|
129 var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858"); |
|
130 |
|
131 // array |
|
132 var tweets = new Array(); |
|
133 var element = new Array(); |
|
134 var cluster = new Array(); |
|
135 var frames = new Array(frameLenght); |
|
136 var slices = new Array(); |
|
137 |
|
138 |
|
139 // Classes ======================================================================= |
|
140 var Frames = function(){ |
|
141 |
|
142 var Myclusters; |
|
143 var x; |
|
144 var y; |
|
145 var width; |
|
146 var height; |
|
147 }; |
|
148 Frames = function(json){ |
|
149 // make my clusters |
|
150 // ou Frame vide |
|
151 }; |
|
152 Frames.prototype.draw = function(){ |
|
153 } |
|
154 Frames.prototype.zoom = function(){ |
|
155 } |
|
156 Frames.prototype.inside = function(){ |
|
157 } |
|
158 var Clusters = function(){ |
|
159 var Object; |
|
160 var yDist; |
|
161 var x; |
|
162 var y; |
|
163 var width; |
|
164 var height; |
|
165 }; |
|
166 Clusters = function(json){ |
|
167 // make my object |
|
168 }; |
|
169 var Tweet = function(){ |
|
170 } |
|
171 // Classes ======================================================================= |
|
172 |
|
173 |
|
174 |
|
175 |
|
176 // trace function |
|
177 var traceNum = 0; |
|
178 function trace(msg,value){ |
|
179 traceNum += 1; |
|
180 $("<div>"+traceNum+" - "+msg+" : "+value+"</div>").appendTo("#output"); |
|
181 } |
|
182 |
|
183 // Refactoring (parametere) ************************************************************ |
|
184 // color translastion |
|
185 function colorTranslation(value){ |
|
186 if(value == "Q"){ |
|
187 return 2; |
|
188 }else if(value =="REF"){ |
|
189 return 4; |
|
190 }else if(value =="OK"){ |
|
191 return 1; |
|
192 }else if(value =="KO"){ |
|
193 return 3; |
|
194 }else if(value ==""){ |
|
195 return 5; |
|
196 } |
|
197 } |
|
198 |
|
199 |
|
200 // Refactoring (parametere) ************************************************************ |
|
201 // load tweets send in parameters |
|
202 $.ajax({ |
|
203 dataType: "json", |
|
204 url:"metadata.json", |
|
205 success : function(json){ |
|
206 trace("load",""); |
|
207 $.each(json.annotations, function(i,item) { |
|
208 |
|
209 var MyTime = Math.floor(item.begin/duration*lineSize); |
|
210 var Myframe = Math.floor(MyTime/lineSize*frameLenght); |
|
211 |
|
212 if (item.content['polemics'] != undefined) { |
|
213 if (item.content['polemics'][0] != null) { |
|
214 |
|
215 for(var j=0; j<item.content['polemics'].length; j++){ |
|
216 |
|
217 tweets[numberOfTweet] = { |
|
218 id:i, |
|
219 qualification:colorTranslation(item.content['polemics'][j]), |
|
220 yIndicator:MyTime, |
|
221 yframe:Myframe, |
|
222 title:item.content['title'], |
|
223 timeframe:item.begin |
|
224 } |
|
225 numberOfTweet+=1; |
|
226 } |
|
227 }else{ |
|
228 //trace("k = ",i); |
|
229 tweets[numberOfTweet] = { |
|
230 id:i, |
|
231 qualification:colorTranslation(""), |
|
232 yIndicator:MyTime, |
|
233 yframe:Myframe, |
|
234 title:item.content['title'], |
|
235 timeframe:item.begin |
|
236 } |
|
237 numberOfTweet+=1; |
|
238 } |
|
239 |
|
240 } else { |
|
241 //trace("tweet qualification = ","null"); |
|
242 } |
|
243 }); |
|
244 trace("======= ",numberOfTweet); |
|
245 DrawTweets (); |
|
246 |
|
247 } |
|
248 }); |
|
249 |
|
250 |
|
251 |
|
252 // tweet Drawing (in raphael) |
|
253 function DrawTweets (){ |
|
254 // GROUPES TWEET ============================================ |
|
255 // Count nbr of cluster and tweet in a frame an save int in "frames" |
|
256 numberOfTweet = tweets.length; |
|
257 for(var i=0; i<nbrframes; i++) { |
|
258 for(var j=0; j<numberOfTweet; j++) { |
|
259 |
|
260 if (i==tweets[j].yframe){ |
|
261 |
|
262 var k = tweets[j].qualification; |
|
263 |
|
264 // make array for frame cluster |
|
265 if(frames[i]==undefined){ |
|
266 frames[i] = {id:i, |
|
267 qualifVol:new Array(), |
|
268 mytweetsID:new Array() |
|
269 }; |
|
270 } |
|
271 // add my tweet to frame |
|
272 frames[i].mytweetsID.push(tweets[j]); |
|
273 |
|
274 // count opinion by frame |
|
275 if( frames[i].qualifVol[k] == undefined){ |
|
276 frames[i].qualifVol[k] = 1; |
|
277 }else{ |
|
278 frames[i].qualifVol[k] += 1; |
|
279 } |
|
280 |
|
281 } |
|
282 } |
|
283 } |
|
284 |
|
285 // GROUPES TWEET ============================================ |
|
286 // max of tweet by Frame |
|
287 var max = 0; |
|
288 for(var i=0; i<nbrframes; i++) { |
|
289 var moy = 0; |
|
290 for (var j=0; j<6; j++){ |
|
291 if (frames[i]!=undefined){ |
|
292 if (frames[i].qualifVol[j]!=undefined){ |
|
293 moy += frames[i].qualifVol[j] |
|
294 } |
|
295 } |
|
296 } |
|
297 //trace("frame "+i,moy); |
|
298 if (moy>max){max=moy;} |
|
299 } |
|
300 |
|
301 var tweetDrawed = new Array(); |
|
302 var TweetHeight = 5; |
|
303 // DRAW TWEETS ============================================ |
|
304 for(var i=0; i<nbrframes;i++) { |
|
305 var addEheight = 5; |
|
306 if (frames[i]!=undefined){ |
|
307 trace (i+" k=",frames[i].mytweetsID.length); |
|
308 // by type |
|
309 for (var j=6; j>-1; j--){ |
|
310 if (frames[i].qualifVol[j]!=undefined){ |
|
311 // show tweet by type |
|
312 for (var k=0; k<frames[i].mytweetsID.length; k++){ |
|
313 if (frames[i].mytweetsID[k].qualification==j){ |
|
314 e = paper.rect( i*frameSize, // x |
|
315 config.heightmax-addEheight, // y |
|
316 frameSize-margin, // width |
|
317 TweetHeight // height |
|
318 ).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]}); |
|
319 addEheight +=TweetHeight; |
|
320 e.time= frames[i].mytweetsID[k].timeframe; |
|
321 e.title= frames[i].mytweetsID[k].title; |
|
322 e.mouseover(function () { |
|
323 this.attr({stroke:"#fff","stroke-width":5}); |
|
324 this.toFront(); |
|
325 }).mouseout(function () { |
|
326 this.attr({stroke:"#00","stroke-width":0.1}); |
|
327 }).mousedown(function () { |
|
328 __IriSP.MyApiPlayer.seek(this.time/1000) |
|
329 }); |
|
330 $(e.node).attr('id', 't'+k+''); |
|
331 $(e.node).attr('title', frames[i].mytweetsID[k].title); |
|
332 $(e.node).attr('begin', frames[i].mytweetsID[k].timeframe); |
|
333 addTip(e.node, frames[i].mytweetsID[k].title,colors[j]); |
|
334 //frames[i].mytweetsID.pop(); |
|
335 } |
|
336 } |
|
337 } |
|
338 } |
|
339 } |
|
340 } |
|
341 |
|
342 |
|
343 } |
|
344 |
|
345 // AddTip ****************************************************************************** |
|
346 function addTip(node, txt,color){ |
|
347 $(node).mouseenter(function(){ |
|
348 tipText = txt; |
|
349 tip.fadeIn(0); |
|
350 tipColor = color; |
|
351 over = true; |
|
352 }).mouseleave(function(){ |
|
353 tip.fadeOut(0); |
|
354 over = false; |
|
355 }); |
|
356 } |
|
357 |
|
358 } |
|
359 |
|
360 $(document).mousemove(function(e){ |
|
361 if (over){ |
|
362 tip.css("left", e.pageX-106).css("top", e.pageY-160); |
|
363 tip.css("color", tipColor) |
|
364 tip.text(tipText); |
|
365 } |
|
366 }); |
|
367 |
|
368 |
|
369 |
|
370 //ChartTimeLine(); |
|
371 |
|
372 </script> |
|
373 |
|
374 |
|
375 </div> |
|
376 </body> |
|
377 </html> |