just another inlet to tributary

_.md

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 chart_group = d3.select("svg");

var width = 400;
    
var height = 400;

var outerRadius = Math.min(width, height) / 3,
    innerRadius = outerRadius * 0.6,
    data = d3.range(2).reverse(),
    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 vertical =  1 * (100 / 180);

console.log("vertical",vertical,sum)

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


var data = [1.84,1,3,4,5];
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 = (d / sum) * 100;
      		var p1 = scale(percentage);
      		var r1 = p1 * (Math.PI / 180 )
     	    
		  arc.startAngle(sumRadiant)
          .endAngle(sumRadiant+r1) 
        
          sumRadiant += r1;
              
        return arc();
    });