D3 test1

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 percents = [2.9, 3.9, 4.2, 4.3, 4.3, 5.4, 10.5, 11.6, 14.1, 14.7, 24.2].sort(d3.ascending);

var donutOuterRadius = 50;
var donutInnerRadius = 40;
var d3arc = d3.svg.arc().outerRadius(donutOuterRadius).innerRadius(donutInnerRadius);

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 = 4;//Math.ceil(Math.abs(a/(pi/2)));
  
    //var rev = false;
    if(rev) {
        startAngle=startAngle+a;
        a = -a;
    }
  
     var r = radius;
     
     var segmentA = a/segments;
     
    var fullPath=[];
    for(var i=segments-1; i>=0; i--) {
        var p = computeArcPoints(r, segmentA, startAngle+(i*segmentA));
        if(i<segments-1 || slice0) p = p.slice(2);
        var path = makeBezierFromList(p);
        fullPath.push(path)
    }
    fullPath.join(' ');
     
    return fullPath;
}

var makeBezierDoubleLine = function(radius, angle, hole, startAngle){
...