Tributary inlet

_.md

[ Launch: Tributary inlet ] 6088551 by BruceHubbard

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"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.60,
    width = 600,
    height = 200,
    tau = 2 * Math.PI;

// An arc function with all values bound except the endAngle. So, to compute an
// SVG path string for a given angle, we pass an object with an endAngle
// property to the `arc` function, and it will return the corresponding string.
var arc = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(73);

// Create the SVG container, and apply a transform such that the origin is the
// center of the canvas. This way, we don't need to position arcs individually.
var svg = d3.select("svg").attr("width", width);

//draw the two gauges
var solved = drawDial(perc, '#7BC375')
		.attr("transform", "translate(100,100)");
var unsolved = drawDial(perc-1, "orange")
		.attr("transform", "translate(400,100)");


function drawDial(perc, color) {
  var group = svg.append("g");
  
  var background = group.append("path")
  .datum({startAngle: 0, endAngle: tau})
      .style("fill", "#ddd")
      .attr("d", arc);
  
  var foreground = group.append("path")
  .datum({startAngle: 0, endAngle: 0})
	.style("fill", color)
	.attr("d", arc)
		.transition()
			.duration(750)
			.call(arcTween, -1 * perc * tau);

  var text = group.append("text").text("Hellodfd")
				.attr("text-anchor", "middle")
				.attr("transform", "translate(0,0)");
  
  return group;
}
  
function arcTween(transition, newAngle) {

  transition.attrTween("d", function(d) {

    var interpolate = d3.interpolate(d.endAngle, newAngle);

    return function(t) {
      d.endAngle = interpolate(t);
      return arc(d);
    };
  });
}