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.02, 12.01, 9, 3], 
  4 //Layer 2 
  5 [ 
  6 [1, 4, 7], 
  7 [6, 5, 1], 
  8 [2, 3], 
  9 [4, 4, 4] 
 10 ] 
 11 ]; 
 12  //Preprocessed Raw Data 
 13 var c = pv.Scale.linear(0, 0.2, 0.4, 0.6, 0.8, 1).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=0; return 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=0; return c(sum1);}) 
 57 .strokeStyle("white") 
 58 .lineWidth(4) 
 59 .root.render(); 

No comments:

Post a Comment