Pie Padding II

D3 3.5’s d3.layout.pie and d3.svg.arc support angular padding to separate adjacent arcs. Increasing the padAngle increases the separation between arcs, but preserves their relative area, which is necessary for accurate perception.

The sides of adjacent arcs are normally parallel. When the specified padding angle is large (relative to the angular width of each arc), the arcs are truncated into wedges. This may be avoided by increasing the inner radius.

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

path {
  fill: #ccc;
  stroke: #000;
  stroke-width: 1.5px;
  stroke-linejoin: round;
}

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

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

var width = 960,
    height = 500;

var outerRadius = height / 2 - 30,
    innerRadius = outerRadius / 3,
    cornerRadius = 10;

var pie = d3.layout.pie();

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.selectAll("path")
    .data(data)
  .enter().append("path");

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

d3.timer(function(elapsed) {
  var t = ease(1 - Math.abs((elapsed % duration) / duration - .5) * 2);

path
      .data(pie.padAngle(t * 2 * Math.PI / data.length)(data))
      .attr("d", arc);
});

</script>

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