Tributary inlet

_.md

[ Launch: Tributary inlet ] 6082803 by BruceHubbard

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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 perc = 0.75, svg = d3.select("svg");

console.log(svg);

var pos = drawFilledArc(-360 * perc, 0, '#7bc375')
			.attr('transform', 'translate(200,200)');
var neg = drawFilledArc(0, 360 * (1-perc), '#f37346')
			.attr('transform', 'translate(500,200)');

function drawFilledArc(startAngle, endAngle, color) {
  
  var group = svg.append("g");
  
  var negArc = d3.svg.arc()
  		.innerRadius(50)
  		.outerRadius(73)
  		.startAngle(0)
  		.endAngle(2*Math.PI);
  
  group.append("path")
  	.attr("d", negArc)
  	.attr("fill", "#dadad0");  
  var arc = d3.svg.arc()
      .innerRadius(50)
      .outerRadius(73)
      .startAngle(startAngle * (Math.PI/180))
      .endAngle(endAngle * (Math.PI/180)) //converting from degs to radians
  ; //just radians
  
  group.append("path")
      .attr("d", arc)
      .attr("fill", color);
  
  return group;
}