Flower Shaped Pie Chart

Flower shape chart designed by setting the origin at the 6 O'Clock position and have the value of the arcs be positive (going left) and negative (going right). Initial code adapted from Mike Bostock's "Arc Tween (clock)".

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Flower Shape</title>
		<script src="https://d3js.org/d3.v3.min.js"></script>
  </head>

var svg = d3.select("#chartArea").append("svg:svg")
	    .attr("width", w + margin.left + margin.right)
	    .attr("height", h + margin.top + margin.bottom)
	  .append("svg:g")
	    .attr("transform", "translate(" + margin.left + "," +(margin.top + h/2)+ ")");

svg.append("text")
		.attr("id", "valueOutput")
		.attr("text-anchor", "middle")
		.attr("transform","translate(" + w / 2 + ",0)");

for(var i = 0; i < fields.length; i++)
    fields[i].previous = fields[i].value;
  
  d3.select('#valueOutput').html("Flower Chart?");
  
  var path = svg.selectAll("path")
      .data(fields.filter(function(d) { return d.value; }), function(d){return d.name; })
  
  path.enter().append("svg:path")
      .attr("transform", function(d, i) { return "translate(" + h/2 + ",0)"; })
    .transition()
      .attrTween("d", arcTween);
  
  function arcTween(b) {
	  var i = d3.interpolate({value: b.previous}, b);
	  return function(t) {
	    return arc(i(t));
	  };
  }
</script>
</html>

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