D3 test1

by amitaviv99

HTML

<div ng-app>
    <div ng-controller="D3miniSandCtrl">	
      <div id="vis">				</div>
      <button id="bar">bars</button>
      <button id="pie">pie	</button>
    </div>
</div>

CSS

html {
  background: #000;
}
svg {
  background: #ccc;
  border-radius: 3px;
}
path:nth-child(0) {
  fill: #3ebbb9;
}
path:nth-child(1) {
  fill: #57bf40;
}
path:nth-child(2) {
  fill: #c1bc44;
}
path:nth-child(3) {
  fill: #474bc2;
}
path:nth-child(4) {
  fill: #af4bc3;
}
path:nth-child(5) {
  fill: #3ebbb9;
}
path:nth-child(6) {
  fill: #57bf40;
}
path:nth-child(7) {
  fill: #c1bc44;
}
path:nth-child(8) {
  fill: #474bc2;
}
path:nth-child(9) {
  fill: #af4bc3;
}
path:nth-child(10) {
  fill: #3ebbb9;
}
path:nth-child(11) {
  fill: #57bf40;
}

JavaScript

var w = 540,
    h = 450,
    k = (4/3)*(Math.sqrt(2)-1),
    pi = Math.pi;
var pie = d3.layout.pie().value(function (d) {
         return d;
});
var d3arc = d3.svg.arc().outerRadius(170).innerRadius(170 / 4);
//var data = [[30,0], [35,30], [80,65],[50,145],[20,195],[70,205],[40,275],[45,315]];
//var data = [30, 35, 80, 65, 50, 20, 70, 10];
var data = [2.9, 3.9, 4.2, 4.3, 4.3, 5.4, 10.5, 11.6, 14.1, 14.7, 20.6];
var prepareData = function(data){
    var total = data.reduce(function(a, b) {
        return a + b;
    });
    var scale = 360/total;
    data.sort(d3.ascending);
    var sum=90, nd=[];
    for(var i=0; i<data.length; i++){
        var sd = data[i]*scale;
        nd.push([sd,sum]);
        sum+=sd;
    }
    return nd;
}

var rot2d = function(x,y,a) {
    var x1 = x * Math.cos(a) - y * Math.sin(a);
    var y1 = y * Math.cos(a) + x * Math.sin(a);
    return [x1,y1];
}

var makeBezierFromList = function(np) {
    if(np.length==6) {
        path = "C " + np.join(' ');
    } else {
        path = "M " + np.slice(0,2).join(' ') + " C " + np.slice(2).join(' ');
    }
    return path;    
}

//angle in radians
var computeArcPoints = function(r, a, startAngle){
    var x4 = r * Math.cos(a/2);
    var y4 = r * Math.sin(a/2);
    var x1 = x4;
    var y1 = -y4;

    var x2 = x1 + k * Math.tan(a/2) * y4;
    var y2 = y1 + k * Math.tan(a/2) * x4;
    var x3 = x2;
    var y3 = -y2;
    
    var p = [x1,y1, x2,y2, x3,y3, x4,y4];
    
    var rotate = -startAngle-(a/2);
    
    var np=[];
    for(var i=0; i<p.length; i+=2){
        var rp = rot2d(p[i], p[i+1], rotate);
        np.push(rp[0]);
        np.push(rp[1]);
    }
    
    return np;
}

var makeCompArc = function(radius, angle, startAngle, rev, slice0){
    var a = angle;
    var segments = Math.ceil(a/90);
    //var rev = false;
    if(rev) {
        startAngle=startAngle+a;
        a = -a;
    }
     a = a*(Math.PI/180); 
     startAngle = startAngle*(Math.PI/180); 
     var r = radius;
     
     var...