jmgimeno/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Multiple Pie Charts</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.4.5"></script>
    <style type="text/css">

body {
  text-align: center;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

// 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 `d.name`. 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:svg element (with margin) for each row in our dataset. A
// child svg:g element translates the origin to the pie center.
var svg = d3.select("body").selectAll("svg")
    .data(data)
  .enter().append("svg:svg")
    .attr("width", (r + m) * 2)
    .attr("height", (r + m) * 2)
  .append("svg:g")
    .attr("transform", "translate(" + (r + m) + "," + (r + m) + ")");

// The data for each svg: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.
svg.selectAll("path")
    .data(d3.layout.pie().sort(null))
  .enter().append("svg:path")
    .attr("d", d3.svg.arc()
    .outerRadius(r))
    .style("fill", function(d, i) { return z(i); });

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>Multiple Pie Charts</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.4.5"></script>
	<style type="text/css">

	body {
	text-align: center;
	}

	</style>
	</head>
	<body>
	<script type="text/javascript">

	// 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 `d.name`. 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:svg element (with margin) for each row in our dataset. A
	// child svg:g element translates the origin to the pie center.
	var svg = d3.select("body").selectAll("svg")
	.data(data)
	.enter().append("svg:svg")
	.attr("width", (r + m) * 2)
	.attr("height", (r + m) * 2)
	.append("svg:g")
	.attr("transform", "translate(" + (r + m) + "," + (r + m) + ")");

	// The data for each svg: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.
	svg.selectAll("path")
	.data(d3.layout.pie().sort(null))
	.enter().append("svg:path")
	.attr("d", d3.svg.arc()
	.outerRadius(r))
	.style("fill", function(d, i) { return z(i); });

	</script>
	</body>
	</html>