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>Example raphael</title> |
|
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
6 |
|
7 </head> |
|
8 <body> |
|
9 |
|
10 <div id="Ldt-output" name="Ldt-output" style="position:absolute;left:600px;" ></div> |
|
11 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> |
|
12 <script type="text/javascript" src="raphael-min.js"></script> |
|
13 |
|
14 <div> |
|
15 <!-- |
|
16 <script type='text/javascript' src='http://www.cybunk.com/irinumberOfTweet/FC/src/js/LdtPlayer.js'></script> |
|
17 <div id="player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed" class="iri_player_embed"/> |
|
18 <script type="text/javascript"> |
|
19 var config = { |
|
20 metadata:{ |
|
21 format:'cinelab', |
|
22 src:'http://www.iri.centrepompidou.fr//dev/ldt/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02', |
|
23 load:'jsonp'}, |
|
24 gui:{ |
|
25 width:650, |
|
26 height:480, |
|
27 mode:'video', |
|
28 container:'player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed', |
|
29 debug:false, |
|
30 css:'http://www.iri.centrepompidou.fr//dev/ldt/static/ldt/css/LdtPlayer.css'}, |
|
31 player:{ |
|
32 type:'jwplayer', |
|
33 src:'http://www.iri.centrepompidou.fr//dev/ldt/static/ldt/swf/player.swf'} |
|
34 }; |
|
35 __IriSP.init(config); |
|
36 </script> |
|
37 </div> |
|
38 --> |
|
39 |
|
40 <div id="charttimeline">ici</div> |
|
41 |
|
42 <script type="text/javascript"> |
|
43 |
|
44 // v1 :: |
|
45 // - config |
|
46 // - organisation classe |
|
47 // - zoom |
|
48 // - rollover !! |
|
49 // - legend !! |
|
50 // - seek !! |
|
51 // |
|
52 |
|
53 |
|
54 /* |
|
55 1 | 1D973D > vert > ++ > OK |
|
56 2 | C5A62D > orange > ?? > Q |
|
57 3 | CE0A15 > rouge > -- > KO |
|
58 4 | 036AAE > bleu > == > REF |
|
59 5 | 585858 > gris > NQ > "" |
|
60 */ |
|
61 |
|
62 |
|
63 cinelabToChart= function (){ |
|
64 } |
|
65 |
|
66 chartTimeline = function (){ |
|
67 |
|
68 } |
|
69 |
|
70 chartTimeline = function (config){ |
|
71 this.config = config; |
|
72 |
|
73 } |
|
74 chartTimeline.prototype.create function(){ |
|
75 } |
|
76 |
|
77 // configuration |
|
78 var config = { |
|
79 target:"charttimeline", |
|
80 x:8, |
|
81 y:438, |
|
82 width:650, |
|
83 height:200, |
|
84 heightmax:50 |
|
85 } |
|
86 // Make and define the Raphael area |
|
87 var paper = Raphael(document.getElementById(config.target),config.width, config.height); |
|
88 |
|
89 // variable |
|
90 var yCoef = 2; // coef for height of 1 tweet |
|
91 var frameSize = 5; // frame size |
|
92 var lineSize = 650; // timeline width |
|
93 var nbrframes = lineSize/frameSize; // frame numbers |
|
94 var numberOfTweet = 400; |
|
95 var duration = 4299820 ; |
|
96 |
|
97 frameLenght = lineSize/frameSize; |
|
98 var timeline; |
|
99 var tweets = new Array(); |
|
100 var element = new Array(); |
|
101 var cluster = new Array(); |
|
102 var frames = new Array(frameLenght); |
|
103 var slices = new Array(); |
|
104 var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858"); |
|
105 |
|
106 var traceNum = 0; |
|
107 function trace(msg,value){ |
|
108 traceNum += 1; |
|
109 $("<div>"+traceNum+" - "+msg+" : "+value+"</div>").appendTo("#Ldt-output"); |
|
110 } |
|
111 |
|
112 function qualificationTrans(value){ |
|
113 if(value == "Q"){ |
|
114 return 2; |
|
115 }else if(value =="REF"){ |
|
116 return 4; |
|
117 }else if(value =="OK"){ |
|
118 return 1; |
|
119 }else if(value =="KO"){ |
|
120 return 3; |
|
121 }else if(value ==""){ |
|
122 return 5; |
|
123 } |
|
124 } |
|
125 |
|
126 var k=0; |
|
127 |
|
128 $.ajax({ |
|
129 dataType: "json", |
|
130 url:"metadata.json", |
|
131 success : function(json){ |
|
132 trace("load",""); |
|
133 $.each(json.annotations, function(i,item) { |
|
134 |
|
135 var MyTime = Math.floor(item.begin/duration*lineSize); |
|
136 var Myframe = Math.floor(MyTime/lineSize*frameLenght); |
|
137 |
|
138 if (item.content['polemics'] != undefined) { |
|
139 |
|
140 if (item.content['polemics'][0] != null) { |
|
141 |
|
142 for(var j=0; j<item.content['polemics'].length; j++){ |
|
143 |
|
144 |
|
145 |
|
146 tweets[k] = { |
|
147 id:i, |
|
148 qualification:qualificationTrans(item.content['polemics'][j]), |
|
149 yIndicator:MyTime, |
|
150 yframe:Myframe |
|
151 } |
|
152 trace("t","y = "+tweets[k].yIndicator+" | yf = "+tweets[k].yframe+" | q = "+tweets[k].qualification); |
|
153 k+=1; |
|
154 } |
|
155 }else{ |
|
156 //trace("k = ",i); |
|
157 tweets[k] = { |
|
158 id:i, |
|
159 qualification:qualificationTrans(""), |
|
160 yIndicator:MyTime, |
|
161 yframe:Myframe |
|
162 } |
|
163 k+=1; |
|
164 } |
|
165 |
|
166 } else { |
|
167 //trace("tweet qualification = ","null"); |
|
168 } |
|
169 }); |
|
170 trace("======= ",k); |
|
171 DrawTweets (); |
|
172 |
|
173 } |
|
174 }); |
|
175 |
|
176 slice = function(){ |
|
177 var id; |
|
178 var values; |
|
179 var elements; |
|
180 } |
|
181 |
|
182 slice = function(id,values){ |
|
183 |
|
184 } |
|
185 |
|
186 |
|
187 // Random value for tweet simulations |
|
188 /* |
|
189 for(var i=0; i<numberOfTweet; i++) { |
|
190 var MyTime = Math.floor(Math.random()*500); |
|
191 var Myframe = Math.floor(MyTime/lineSize*frameLenght); |
|
192 |
|
193 tweets[i] = { |
|
194 id:i, |
|
195 qualification:Math.floor(Math.random()*6), |
|
196 yIndicator:MyTime, |
|
197 yframe:Myframe |
|
198 } |
|
199 //trace("t","y = "+tweets[i].yIndicator+" | f = "+tweets[i].yframe+" | q = "+tweets[i].qualification); |
|
200 // ajout dans cluster |
|
201 }*/ |
|
202 |
|
203 // tweet classement |
|
204 function DrawTweets (){ |
|
205 numberOfTweet = tweets.length; |
|
206 //alert(numberOfTweet); |
|
207 for(var i=0; i<nbrframes; i++) { |
|
208 for(var j=0; j<numberOfTweet; j++) { |
|
209 if (i==tweets[j].yframe){ |
|
210 |
|
211 var k = tweets[j].qualification; |
|
212 //trace("add in "+i,k); |
|
213 // créer un tableau pour les cluster |
|
214 if(frames[i]==undefined){ |
|
215 frames[i] = new Array(); |
|
216 } |
|
217 // asigné le comptage au cluster |
|
218 if(frames[i][k]==undefined){ |
|
219 frames[i][k]=1; |
|
220 }else{ |
|
221 frames[i][k]+=1; |
|
222 } |
|
223 } |
|
224 } |
|
225 |
|
226 } |
|
227 |
|
228 var max = 0; |
|
229 var padding = 50; |
|
230 var height = 50; |
|
231 |
|
232 for(var i=0; i<nbrframes; i++) { |
|
233 var moy = 0; |
|
234 for (var j=1; j<6; j++){ |
|
235 if (frames[i]!=undefined){ |
|
236 if (frames[i][j]!=undefined){ |
|
237 moy += frames[i][j] |
|
238 } |
|
239 } |
|
240 } |
|
241 //trace("frame "+i,moy); |
|
242 if (moy>max){max=moy;} |
|
243 } |
|
244 trace("frame max =",max); |
|
245 trace("===================","====================="); |
|
246 |
|
247 for(var i=0; i<nbrframes; i++) { |
|
248 var addEheight = 0; |
|
249 for (var j=6; j>0; j--){ |
|
250 if (frames[i]!=undefined){ |
|
251 if (frames[i][j]!=undefined){ |
|
252 var Eheight = frames[i][j]*5; |
|
253 paper.rect(i*frameSize, padding-Eheight-addEheight, 4, Eheight).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]}); |
|
254 addEheight +=Eheight; |
|
255 } |
|
256 } |
|
257 |
|
258 } |
|
259 } |
|
260 |
|
261 } |
|
262 |
|
263 </script> |
|
264 </body> |
|
265 </html> |
|