Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active February 9, 2016 01:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mbostock/31ec1817b2be2660c453 to your computer and use it in GitHub Desktop.
Save mbostock/31ec1817b2be2660c453 to your computer and use it in GitHub Desktop.
Pie Padding II
license: gpl-3.0

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="//d3js.org/d3.v3.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment