Pie Padding

This animation demonstrates the benefit of setting pie.padAngle directly: the relative areas of arcs are preserved. Setting arc.padAngle instead disproportionately affects small arcs, introducing bias.

<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="500"></canvas>
<script src="//d3js.org/d3.v4.0.0-alpha.4.min.js"></script>
<script>

var data = [1, 1, 2, 3, 5, 8, 13, 21];

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d");

var width = canvas.width,
    height = canvas.height,
    outerRadius = height / 2 - 30,
    innerRadius = outerRadius / 3;

var arc = d3.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius)
    .context(context);

var pie = d3.pie();

var ease = d3.easeCubicInOut,
    duration = 2500;

d3.timer(function(elapsed) {
  var t = ease(1 - Math.abs((elapsed % duration) / duration - 0.5) * 2),
      arcs = pie.padAngle(0.06 * t)(data);

context.save();
  context.clearRect(0, 0, width, height);
  context.translate(width / 2, height / 2);

context.beginPath();
  arcs.forEach(arc.padAngle(0));
  context.lineWidth = 1;
  context.strokeStyle = "#777";
  context.stroke();

context.beginPath();
  arcs.forEach(arc.padAngle(0.06 * t));
  context.fillStyle = "#ccc";
  context.fill();
  context.lineWidth = 1.5;
  context.lineJoin = "round";
  context.strokeStyle = "#000";
  context.stroke();

context.restore();
});

</script>

https://d3js.org/d3.v4.0.0-alpha.4.min.js