just another inlet to tributary

_.md

Gist #4021405
Gist #4021391
Gist #4021353
Gist #3200444

config.json

{"endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.5141263940520446,"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(102).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 scale = d3.scale.linear().domain([1, sum]).range([-10 * (Math.PI /180  ),111 * (Math.PI /180  )]);

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


var currentAngle = Math.PI * 3.072;
console.log("LOG:","arc()",arc(),data,sum);

arcs.append("svg:path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", function(d,i) {
        var angle = scale(d);
        console.log("LOG:","scale(d)",scale(d),d);
        //arc.
        arc
            .startAngle(currentAngle)
            .endAngle((currentAngle+angle))

        currentAngle += angle;
        return arc();
    });