Old school D3 from simpler times

All examples By author By category About

DDDDDanica

Full window Github gist

Amazing pie

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
var data = [1, 1, 2, 3, 5, 8, 13, 21];

var width = 260,
    height = 300,
    oRadius = 100; //var holding value for the outer radius of the arc
var iRadius = 80; //var holding the value for the inner radius of the arc
var cRadius = 2; //var holding the value for the corner radius of the arc
    
var myArcMaker = d3.arc().outerRadius(oRadius).innerRadius(iRadius).cornerRadius(cRadius); //var that returns the values needed to create the arcs of the pie chart            
    // Feel free to change or delete any of the code you see in this editor!
   
    
    function arcTween(a) { //<-- a is the datum bound to each arc
    var startAngle = a.startAngle; //<-- keep reference to start angle
    var i = d3.interpolate(a.startAngle, a.endAngle); //<-- interpolate start to end
    return function(t) {
      return myArcMaker({ //<-- return arc at each iteration from start to interpolate end
        startAngle: startAngle,
        endAngle: i(t)
      });
    };
  }
var pie = d3.pie()
    .padAngle(.02);
    var color = d3.scaleOrdinal(d3.schemeCategory10);
    
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

let paths = svg.selectAll("path")
	.data(pie(data));
    
 console.log(paths);
paths.enter()
  .append("path")
    .style("fill", function(d, i) { 
      return color(i); })
.transition().duration(750).attrTween("d", arcTween); // redraw the arcs

</script>
</body>

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