d3.js donut chart test

d3donut.js

var donutVal = 85;
    
    
    var donutFull = 100 - donutVal;
    var d3_category_socialmedia = ["#0054a6", "#dbdbdb"];
    
    
    if(donutVal < 50) {
    	donutVal = -donutVal;
    	donutFull = -donutFull;
    }
    
	
var w = 400,
    h = 400,
    r = Math.min(w, h) / 2,
    data = [donutVal, donutFull];//d3.range(10).map(Math.random).sort(d3.descending),
    color = d3.scale.ordinal().range(d3_category_socialmedia),
    arc = d3.svg.arc().outerRadius(r),
    donut = d3.layout.pie();
    
var vis = d3.select("body").append("svg")
    .data([data])
    .attr('class', 'somechart')
    .attr("width", w)
    .attr("height", h);

vis.append("g").attr("class", "chartBG").attr("transform", "translate(" + r + "," + r + ")").append("path")
	.attr("fill", "#dbdbdb")
	.attr("d", 'M0,200A200,200 0 1,1 0,-200A200,200 0 1,1 0,200M0,120A120,120 0 1,0 0,-120A120,120 0 1,0 0,120Z');


var arcs = vis.selectAll("g.arc")
    .data(donut)
  .enter().append("g")
    .attr("class", "arc")
    .attr("transform", "translate(" + r + "," + r + ")");
    



var paths = arcs.append("path")
    .attr("fill", function(d, i) {return color(i); });




paths.transition()
    .duration(1000)
    .attrTween("d", tweenPie);

function tweenPie(b) {
  b.innerRadius = r * .6;
  var i = d3.interpolate({startAngle: 0, endAngle: -0}, b);
  return function(t) {
    return arc(i(t));
  };
}



// Labels
var center_group = vis.append("svg:g")
  .attr("class", "center_group")
  .attr("transform", "translate(" + (w/2) + "," + (h/2) + ")");

var totalLabel = center_group.append("svg:text")
  .attr("class", "label")
  .attr("dy", -15)
  .attr("text-anchor", "middle") // text-align: right
  .text("TOTAL");

//TOTAL TRAFFIC VALUE
var totalValue = center_group.append("svg:text")
  .attr("class", "total")
  .attr("dy", 7)
  .attr("text-anchor", "middle") // text-align: right
  .text("Waiting...");

//UNITS LABEL
var totalUnits = center_group.append("svg:text")
  .attr("class", "units")
  .attr("dy", 21)
  .attr("text-anchor", "middle") // text-align: right
  .text("kb");


totalValue.text(function(){return '50';});
totalUnits.text(function(){return '%';});