Skip to content

Instantly share code, notes, and snippets.

Last active February 20, 2016 05:53
Show Gist options
  • Save mbostock/1305111 to your computer and use it in GitHub Desktop.
Save mbostock/1305111 to your computer and use it in GitHub Desktop.
Pie Multiples
license: gpl-3.0

An example of multiple pie (donut) charts created with D3. The data is represented as a two-dimensional array of numbers; each row in the array is mapped to a pie chart. Thus, each pie represents the relative value of a number (such as 1,013) within its rows. Note that in this dataset, the totals for each row are not equal.

<!DOCTYPE html>
<meta charset="utf-8">
body {
text-align: center;
<script src="//"></script>
// Define the data as a two-dimensional array of numbers. If you had other
// data to associate with each number, replace each number with an object, e.g.,
// `{key: "value"}`.
var data = [
[11975, 5871, 8916, 2868],
[ 1951, 10048, 2060, 6171],
[ 8010, 16145, 8090, 8045],
[ 1013, 990, 940, 6907]
// Define the margin, radius, and color scale. The color scale will be
// assigned by index, but if you define your data using objects, you could pass
// in a named field from the data object instead, such as ``. Colors
// are assigned lazily, so if you want deterministic behavior, define a domain
// for the color scale.
var m = 10,
r = 100,
z = d3.scale.category20c();
// Insert an svg element (with margin) for each row in our dataset. A child g
// element translates the origin to the pie center.
var svg ="body").selectAll("svg")
.attr("width", (r + m) * 2)
.attr("height", (r + m) * 2)
.attr("transform", "translate(" + (r + m) + "," + (r + m) + ")");
// The data for each svg element is a row of numbers (an array). We pass that to
// d3.layout.pie to compute the angles for each arc. These start and end angles
// are passed to d3.svg.arc to draw arcs! Note that the arc radius is specified
// on the arc, not the layout.
.attr("d", d3.svg.arc()
.innerRadius(r / 2)
.style("fill", function(d, i) { return z(i); });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment