<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example raphael</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="Ldt-output" name="Ldt-output" style="position:absolute;left:600px;" ></div>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type="text/javascript" src="raphael-min.js"></script>
<div>
<!--
<script type='text/javascript' src='http://www.cybunk.com/irinumberOfTweet/FC/src/js/LdtPlayer.js'></script>
<div id="player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed" class="iri_player_embed"/>
<script type="text/javascript">
var config = {
metadata:{
format:'cinelab',
src:'http://www.iri.centrepompidou.fr//dev/ldt/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02',
load:'jsonp'},
gui:{
width:650,
height:480,
mode:'video',
container:'player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed',
debug:false,
css:'http://www.iri.centrepompidou.fr//dev/ldt/static/ldt/css/LdtPlayer.css'},
player:{
type:'jwplayer',
src:'http://www.iri.centrepompidou.fr//dev/ldt/static/ldt/swf/player.swf'}
};
__IriSP.init(config);
</script>
</div>
-->
<div id="charttimeline">ici</div>
<script type="text/javascript">
// v1 ::
// - config
// - organisation classe
// - zoom
// - rollover !!
// - legend !!
// - seek !!
//
/*
1 | 1D973D > vert > ++ > OK
2 | C5A62D > orange > ?? > Q
3 | CE0A15 > rouge > -- > KO
4 | 036AAE > bleu > == > REF
5 | 585858 > gris > NQ > ""
*/
cinelabToChart= function (){
}
chartTimeline = function (){
}
chartTimeline = function (config){
this.config = config;
}
chartTimeline.prototype.create function(){
}
// configuration
var config = {
target:"charttimeline",
x:8,
y:438,
width:650,
height:200,
heightmax:50
}
// Make and define the Raphael area
var paper = Raphael(document.getElementById(config.target),config.width, config.height);
// variable
var yCoef = 2; // coef for height of 1 tweet
var frameSize = 5; // frame size
var lineSize = 650; // timeline width
var nbrframes = lineSize/frameSize; // frame numbers
var numberOfTweet = 400;
var duration = 4299820 ;
frameLenght = lineSize/frameSize;
var timeline;
var tweets = new Array();
var element = new Array();
var cluster = new Array();
var frames = new Array(frameLenght);
var slices = new Array();
var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858");
var traceNum = 0;
function trace(msg,value){
traceNum += 1;
$("<div>"+traceNum+" - "+msg+" : "+value+"</div>").appendTo("#Ldt-output");
}
function qualificationTrans(value){
if(value == "Q"){
return 2;
}else if(value =="REF"){
return 4;
}else if(value =="OK"){
return 1;
}else if(value =="KO"){
return 3;
}else if(value ==""){
return 5;
}
}
var k=0;
$.ajax({
dataType: "json",
url:"metadata.json",
success : function(json){
trace("load","");
$.each(json.annotations, function(i,item) {
var MyTime = Math.floor(item.begin/duration*lineSize);
var Myframe = Math.floor(MyTime/lineSize*frameLenght);
if (item.content['polemics'] != undefined) {
if (item.content['polemics'][0] != null) {
for(var j=0; j<item.content['polemics'].length; j++){
tweets[k] = {
id:i,
qualification:qualificationTrans(item.content['polemics'][j]),
yIndicator:MyTime,
yframe:Myframe
}
trace("t","y = "+tweets[k].yIndicator+" | yf = "+tweets[k].yframe+" | q = "+tweets[k].qualification);
k+=1;
}
}else{
//trace("k = ",i);
tweets[k] = {
id:i,
qualification:qualificationTrans(""),
yIndicator:MyTime,
yframe:Myframe
}
k+=1;
}
} else {
//trace("tweet qualification = ","null");
}
});
trace("======= ",k);
DrawTweets ();
}
});
slice = function(){
var id;
var values;
var elements;
}
slice = function(id,values){
}
// Random value for tweet simulations
/*
for(var i=0; i<numberOfTweet; i++) {
var MyTime = Math.floor(Math.random()*500);
var Myframe = Math.floor(MyTime/lineSize*frameLenght);
tweets[i] = {
id:i,
qualification:Math.floor(Math.random()*6),
yIndicator:MyTime,
yframe:Myframe
}
//trace("t","y = "+tweets[i].yIndicator+" | f = "+tweets[i].yframe+" | q = "+tweets[i].qualification);
// ajout dans cluster
}*/
// tweet classement
function DrawTweets (){
numberOfTweet = tweets.length;
//alert(numberOfTweet);
for(var i=0; i<nbrframes; i++) {
for(var j=0; j<numberOfTweet; j++) {
if (i==tweets[j].yframe){
var k = tweets[j].qualification;
//trace("add in "+i,k);
// cr�er un tableau pour les cluster
if(frames[i]==undefined){
frames[i] = new Array();
}
// asign� le comptage au cluster
if(frames[i][k]==undefined){
frames[i][k]=1;
}else{
frames[i][k]+=1;
}
}
}
}
var max = 0;
var padding = 50;
var height = 50;
for(var i=0; i<nbrframes; i++) {
var moy = 0;
for (var j=1; j<6; j++){
if (frames[i]!=undefined){
if (frames[i][j]!=undefined){
moy += frames[i][j]
}
}
}
//trace("frame "+i,moy);
if (moy>max){max=moy;}
}
trace("frame max =",max);
trace("===================","=====================");
for(var i=0; i<nbrframes; i++) {
var addEheight = 0;
for (var j=6; j>0; j--){
if (frames[i]!=undefined){
if (frames[i][j]!=undefined){
var Eheight = frames[i][j]*5;
paper.rect(i*frameSize, padding-Eheight-addEheight, 4, Eheight).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]});
addEheight +=Eheight;
}
}
}
}
}
</script>
</body>
</html>