Saturday, May 28, 2011

Protovis 2 Layer Wedges

This is my solution sample for question at Protovis's group question on wedge.

Hope it helps much on your adventure with Protovis !

Two Layers Wedge - Outer Laye'r Wedge are Divided Portions of ARelated Inner Layer Wedge


  1 var datacompound = [ 
  2 //Layer 1 
  3 [12.0212.0193], 
  4 //Layer 2 
  5
  6 [147], 
  7 [651], 
  8 [23], 
  9 [444
 10
 11 ]; 
 12  //Preprocessed Raw Data 
 13 var c = pv.Scale.linear(00.20.40.60.81).range("gold""olivedrab"
 14 "violet""#21004F""darkseagreen""lightseagreen"); 
 15 datacompound[0] = pv.normalize(datacompound[0]); 
 16 for(i=0; i<datacompound[1].length; i++) 
 17
 18 datacompound[1][i] = pv.normalize(datacompound[1][i]); 
 19 for(j=0;j<datacompound[1][i].length;j++) 
 20 datacompound[1][i][j] = datacompound[0][i]*datacompound[1][i][j]; 
 21
 22
 23
 24 datacompound[1] = pv.blend(datacompound[1]); 
 25 var sum1 = 0, sum2 = 0, offset1 = 0, offset2 = 0
 26 var startAngle = 0*Math.PI/180
 27  //Panel 
 28 vis = new pv.Panel() 
 29 .width(600
 30 .height(600
 31 .left(300
 32 .top(300
 33  //First Layer 
 34 .add(pv.Wedge) 
 35 .data(datacompound[0]) 
 36 .innerRadius(135
 37 .outerRadius(195
 38 .startAngle(function() {if(this.index>0
 39 offset1+=datacompound[0][this.index-1]*2*Math.PI; else offset1=startAngle; 
 40 return offset1;}) 
 41 .angle(function(d) d*2*Math.PI) 
 42 .fillStyle(function(d) {if(this.index>0
 43 sum1+=datacompound[0][this.index-1]; else sum1=0return c(sum1);}) 
 44 .strokeStyle("white"
 45 .lineWidth(4
 46  //Second Layer 
 47 .add(pv.Wedge) 
 48 .data(datacompound[1]) 
 49 .innerRadius(200
 50 .outerRadius(275
 51 .startAngle(function() {if(this.index>0
 52 offset1+=datacompound[1][this.index-1]*2*Math.PI; else offset1=startAngle; 
 53 return offset1;}) 
 54 .angle(function(d) d*2*Math.PI) 
 55 .fillStyle(function(d) {if(this.index>0
 56 sum1+=datacompound[1][this.index-1]; else sum1=0return c(sum1);}) 
 57 .strokeStyle("white"
 58 .lineWidth(4
 59 .root.render(); 

No comments:

Post a Comment