--- a/client/annotviz/app/js/annotstimeline.js	Tue Jan 20 18:38:18 2015 +0100
+++ b/client/annotviz/app/js/annotstimeline.js	Wed Jan 21 12:14:16 2015 +0100
@@ -15,7 +15,10 @@
     logger: undefined,
     intervalWidth: 10,
     intervalHeight: 5,
-    maxCellHeight: 20,
+    maxCellHeight: 200,
+    radius: 300,
+    circleX:500,
+    circleY:500
 };
 
 
@@ -37,21 +40,30 @@
     this.intervalHeight = opts.intervalHeight;
     this.intervalWidth = opts.intervalWidth;
     this.maxCellHeight = opts.maxCellHeight;
-    this.intervalDuration = (this.intervalWidth * this.duration / this.width);
     this.annotCategories = opts.annotCategories;
     
+    this.circleX = opts.circleX;
+    this.circleY = opts.circleY;
+    this.radius = opts.radius;
+    this.perimeter = 2*Math.PI* this.radius;
+    this.intervalDuration = (this.intervalWidth * this.duration / this.perimeter);
+    
+    var totalIndex = Math.floor(this.perimeter/this.intervalWidth);
+    	
     this.cells = []
-    for (var i=0; i<(this.width/this.intervalWidth) ; i++){
+    for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){
     	this.cells[i] = [];
-    	this.cells[i].x = i * this.intervalWidth;
     	this.cells[i].totalAnnots = 0;
     	this.cells[i].graphics = new PIXI.Graphics();
+    	this.cells[i].graphics.position.x = this.circleX + this.radius * Math.sin(i*(360/totalIndex)*(Math.PI/180));
+    	this.cells[i].graphics.position.y = this.circleY - this.radius * Math.cos(i*(360/totalIndex)*(Math.PI/180));
+    	this.cells[i].graphics.rotation = (i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180);
     	this.container.addChild(this.cells[i].graphics);
     	this.cells[i].categories = {};
     	
     	for (var category in this.annotCategories[0].colors){
     		this.cells[i].categories[category] = {
-				"count": 0,
+				"count": 1,
 				"color": this.annotCategories[0].colors[category]
     		};
     	}
@@ -59,13 +71,13 @@
     
     var ws = opts.ws;
     var stageView = opts.stageView;
-    // draw temp line to locate the middle of the container
+
     var graphics = new PIXI.Graphics();
-    graphics.beginFill(0x000000)
-    	.lineStyle(1, 0x000000)
-    	.moveTo(this.container.x, (this.height/2))
-    	.lineTo(this.width, (this.height/2))
-    	.endFill();
+    graphics.lineStyle(1, 0x000000)
+    	.drawCircle(this.circleX, this.circleY, this.radius)
+    	.moveTo(this.circleX, this.circleY)
+    	.lineTo(this.circleX, this.circleY - this.radius - this.maxCellHeight - 30)
+    	.endFill()
     this.container.addChild(graphics);
     
     stageView.registerComponent(this);
@@ -83,14 +95,14 @@
 	    	var i = Math.floor((Date.parse(data.ts)-this.timeBegin)/(1000*this.intervalDuration));
 			this.cells[i].categories[annotCode].count += 1;
 			this.cells[i].totalAnnots +=1;
-			this.redrawCell(this.cells[i]);
+			this.redrawCell(this.cells[i], i);
     	}
     };
     
     //Draw the cellule
     this.redrawCell = function(cell){
-    	var x = cell.x; 
-    	var y = this.height/2;
+    	var x = 0; 
+    	var y = 0;
     	cell.graphics.clear();
     	
     	//Check if total height is higher than Max Cell Height
@@ -103,7 +115,7 @@
     	for (var i=0; i< this.annotCategories[0].order.length; i++){
     		var currentCode = this.annotCategories[0].order[i];
 			cell.graphics.beginFill(cell.categories[currentCode].color.replace("#", "0x"))
-    			.drawRect(x, y, this.intervalWidth, -cell.categories[currentCode].count * heightStep)
+    			.drawRect(0, y, this.intervalWidth, -cell.categories[currentCode].count * heightStep)
     			.endFill();
     		y -= cell.categories[currentCode].count*heightStep;
     	}
@@ -118,6 +130,9 @@
     };
     
     this.start = function() {
+    	for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){
+    		this.redrawCell(this.cells[i]);
+    	}
     };
     
     this.refresh = function() {