barnabyc · October 11, 2012 21:48 · jsullivanlive · Oct 11, 2012
diff --git a/donut-halos.html b/donut-halos.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 }
      path          { stroke: #fff; stroke-width: 4px; }
      path.current  { opacity: 0.75 }
      path.past     { opacity: 0.3  }
      path.current:hover { opacity: 1    }
      path.past:hover    { opacity: 0.75 }
    </style>
  </head>
  <body>
    <script type="text/javascript">
 // Define the data as a two-dimensional array of hashes.
 // 2 segments per chart.
 // "Current" are the core values, "Past" are the halo values.
 var data = [
  [{name: 'new', current: 11975, past: 3916}, {name: 'repeat', current:  5871, past: 1868}],
  [{name: 'new', current: 10048, past: 3171}, {name: 'repeat', current:  1951, past:  760}],
  [{name: 'new', current: 16145, past: 6090}, {name: 'repeat', current: 14010, past: 1045}],
  [{name: 'new', current:  1013, past:  440}, {name: 'repeat', current:    90, past:  107}]
 ];

 // 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,
    newFill = "#3067ae",
    repeatFill = "#409200";

 var svgs = d3.select("body").selectAll("svg");

 // 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 = svgs.data(data)
            .enter()
              .append("svg:svg")
                .attr("class","core")
                .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.

 // Current arcs
 svg.selectAll("path").data(d3.layout.pie().value(function(d) { return d.current }))
      .enter()
        .append("svg:path")
          .attr("class", function(d){return "current "+d.data.name;})
          .attr("d", d3.svg.arc()
            .innerRadius(r / 2)
            .outerRadius(r * .85))
            .style("fill", function(d, i) {
              return d.data.name === 'new' ? newFill : repeatFill;
            });

 // Past arcs
 svg.selectAll("g").data(d3.layout.pie().value(function(d) { return d.past }))
      .enter()
        .append("svg:path")
          .attr("class", function(d){return "past "+d.data.name;})
          .attr("d", d3.svg.arc()
            .innerRadius(r / 1.15)
            .outerRadius(r))
            .style("fill", function(d, i) {
              return d.data.name === 'new' ? newFill : repeatFill;
            });

    </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 }
	path { stroke: #fff; stroke-width: 4px; }
	path.current { opacity: 0.75 }
	path.past { opacity: 0.3 }
	path.current:hover { opacity: 1 }
	path.past:hover { opacity: 0.75 }
	</style>
	</head>
	<body>
	<script type="text/javascript">
	// Define the data as a two-dimensional array of hashes.
	// 2 segments per chart.
	// "Current" are the core values, "Past" are the halo values.
	var data = [
	[{name: 'new', current: 11975, past: 3916}, {name: 'repeat', current: 5871, past: 1868}],
	[{name: 'new', current: 10048, past: 3171}, {name: 'repeat', current: 1951, past: 760}],
	[{name: 'new', current: 16145, past: 6090}, {name: 'repeat', current: 14010, past: 1045}],
	[{name: 'new', current: 1013, past: 440}, {name: 'repeat', current: 90, past: 107}]
	];

	// 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,
	newFill = "#3067ae",
	repeatFill = "#409200";

	var svgs = d3.select("body").selectAll("svg");

	// 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 = svgs.data(data)
	.enter()
	.append("svg:svg")
	.attr("class","core")
	.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.

	// Current arcs
	svg.selectAll("path").data(d3.layout.pie().value(function(d) { return d.current }))
	.enter()
	.append("svg:path")
	.attr("class", function(d){return "current "+d.data.name;})
	.attr("d", d3.svg.arc()
	.innerRadius(r / 2)
	.outerRadius(r * .85))
	.style("fill", function(d, i) {
	return d.data.name === 'new' ? newFill : repeatFill;
	});

	// Past arcs
	svg.selectAll("g").data(d3.layout.pie().value(function(d) { return d.past }))
	.enter()
	.append("svg:path")
	.attr("class", function(d){return "past "+d.data.name;})
	.attr("d", d3.svg.arc()
	.innerRadius(r / 1.15)
	.outerRadius(r))
	.style("fill", function(d, i) {
	return d.data.name === 'new' ? newFill : repeatFill;
	});

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