just another inlet to tributary

_.md

Gist #4021856
Gist #4021514
Gist #4021405
Gist #4021391
Gist #4021353
Gist #3200444

config.json

{"endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.4723436642470308,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var width = 400;
var height = 400;
// Play with the values (Add new items or change the values)!!!!!
//
var data = [2.208,6,3,4,5,4,5,6,7]; 

//No need to change from here

var chart_group = d3.select("svg");

var outerRadius = Math.min(width, height) / 3,
    innerRadius = outerRadius * 0.6,
    color = d3.scale.category20(),
    donut = d3.layout.pie(),
    arc = d3.svg.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .startAngle(0)
            .endAngle(0)
            ;
var sum = d3.sum(data);

var scale = d3.scale.linear().domain([0, 100]).range([0,180]);

var sum = d3.sum(data);

var arcs = chart_group.selectAll("g.arc")
    .data(data)
  .enter()
    .append("svg:g")
    .attr("transform", "translate(" + ( outerRadius+111) + "," + ( outerRadius + 74 )+ ")");

var sumRadiant = -90 * (Math.PI / 180 );

arcs.append("svg:path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", function(d,i) {
      		var percentage_val = (d / sum) * 100;
      		var percentage_in_angle = scale(percentage_val);
      		var val_to_radiant = percentage_in_angle * (Math.PI / 180 )
		  arc.startAngle(sumRadiant)
          .endAngle(sumRadiant+val_to_radiant) 
        
          sumRadiant += val_to_radiant;
              
        return arc();
    });