Arc Sentiment SVG

forked from mbostock's block: Arc Corners II

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.paths--straight {
  fill: none;
  stroke: transparent;
}

.paths--round {
  fill: #ccc;
  opacity: 0.5;
}
  
  
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var sentimentData = [{label: "positive", value:35, color:"#009900"}, {label: "negative", color:"#990000", value:10}, {label: "neutral", value:55, color:"#CCC"}];

/* 
I'm creating two arrays here because I have no idea how 
to update the length of each arc - hmmmm....

I'm thinking it has to do with arc(d) somewhere in here...

roundPath.data(arcs).attr("d", arc.cornerRadius(cornerRadius));
  
  maybe 
  
  roundPath.data(arcs).attr("d", function(d){return d.value});
*/  
  
let getSentimentValues = () => {
   return sentimentData.map( function(node){return node.value});
};
  
let getSentimentColor = () => {
   return sentimentData.map( function(node){return node.color});
};
  
let sentimentValues = getSentimentValues();
let sentimentColors = getSentimentColor();  
  
var width = 960,
    height = 500,
    outerRadius = height / 2 - 30,
    cornerRadius = 5;

var pie = d3.layout.pie();

var arc = d3.svg.arc()
    .outerRadius(outerRadius);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
 
let getFill = (i) => {
  return sentimentColors[i];
};  
  
var roundPath = svg.append("g")
    .attr("class", "path--round")
  .selectAll("path")
    .data(sentimentValues)
  .enter().append("path")
						.attr("opacity", 0.5)
						.attr("fill", function(d,i){return getFill(i)});

var ease = d3.ease("cubic-in-out"),
    duration = 2500;

d3.timer(function(elapsed) {
  
  var t = ease(1 - Math.abs((elapsed % duration) / duration - .5) * 2);
  
  let sentimentValues = sentimentData.map( function(node){return node.value});
  
  var arcs = pie.padAngle(t * .01)(sentimentValues);

arc.innerRadius(outerRadius / (2 - t));
 
  roundPath.data(arcs).attr("d", arc.cornerRadius(cornerRadius));
    
  if ( t > 0.8 ) return true; 
  
  //return true;
});

</script>

https://d3js.org/d3.v3.min.js