Arc Tween Percent Rings

Percent Circles

a factory that creates a vertically stacked series of rings reflecting percents.

forked from rcrocker13's block: Arc Tween

forked from headwinds's block: Arc Tween Percent Rings

<!DOCTYPE html>
<meta charset="utf-8">
<body align=center>
  <div class=dropdown></div><br>
  <style>
    text {
			font-family: Georgia, Arial, sans-serif;
      font-size: 15px;
      fill: black;
    }
    
    .gold {
      fill: gold;
    }
    
    .blue {
      fill: blue;
    }
    
    .red {
      fill: red;
    }
    .d3-tip {
   font-family: 'Raleway', sans-serif;
   font-size: .8em;
   line-height: 1;
   padding: 7px;
   background: black;
   color: lightgray;
   border-radius: 20px;
}
  </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js">  </script>

function updateviz(key) {
var width = 100,
    height = 150,
    τ = 2 * Math.PI; // https://tauday.com/tau-manifesto

// 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(30)
    .outerRadius(45)
    .startAngle(0);

// 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.

data.forEach(function(d,i) {
        d.id = d.name;
        d.percent = d.value;
});
  
var rings = data;

var d3Rings = []; 
  
var convertPercentToAngle = (percent) => { return ( percent / 100 ) * τ };    
  
var createRings = function(){  
  
  _.each(rings, function(ring,index){
    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("align", "center")

var d3Ring = svg
                .append("g")
                  .attr("transform", "translate(" + 45 + "," + 45 + ")")
                  .attr("id",ring.id);
    // background
    d3Ring
    .append("path")
    .datum({endAngle: τ})
    .style("fill", "#ddd")
    .attr("d", arc); 
    
    
    // foreground
    var foreground = d3Ring
    .append("path")
    .datum({endAngle: 0})
    .style("fill", color(ring))
		.style("stroke", "none")
		.style("stroke-width", "0px")
		.style("opacity", 1)
    .attr("d", arc);
    
    // text
    d3Ring
  	.append("text")
  	.attr("x", -22)
    .attr("y", 8) 
    .text(ring.percent + "%")
		//.attr("class", ring.id);
    	
        svg
  	.append("text")
  	.attr("x", 25)
    .attr("y", 110) 
    .text(ring.name)
    .style("font-size", "12px")

var angle = convertPercentToAngle(ring.percent);
    
    foreground
    .transition()
      .duration(10)
		//	.delay(500 * index)
      .call(arcTween, angle);
    
    d3Rings.push(d3Ring);
  
  });  
}

createRings();
  
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);
    };
  });
}
}

</script>

Modified http://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js