steveodom · November 5, 2011 16:44
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Pie Multiples with Nesting</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;
 }

 svg {
  font: 10px sans-serif;
 }

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

 // Load the flight data asynchronously.
 //d3.csv("flights.csv", function(flights) {
 
  flights = [{key: "Damon", 
              values: [{degree: "MBA", count: 6, color: 0},{degree: "BBA", count: 3, color: 1}, {degree: "BBS", count: 2, color: 6}]},
             {key: "Steve", 
              values: [{degree: "MBA", count: 6, color: 9},{degree: "BBA", count: 3, color: 10}, {degree: "BBS", count: 2, color: 6}]} 
            ]
  // Define the margin, radius, and color scale. 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();
      //z = d3.scale.ordinal().range()
      z = [
  "#3182bd", "#6baed6", "#9ecae1", "#c6dbef",
  "#e6550d", "#fd8d3c", "#fdae6b", "#fdd0a2",
  "#31a354", "#74c476", "#a1d99b", "#c7e9c0",
  "#756bb1", "#9e9ac8", "#bcbddc", "#dadaeb",
  "#636363", "#969696", "#bdbdbd", "#d9d9d9"
 ];
 console.info(z)
 console.info(z[1])
  // Define a pie layout: the pie angle encodes the count of flights. Since our
  // data is stored in CSV, the counts are strings which we coerce to numbers.
  var pie = d3.layout.pie()
      .value(function(d) { console.info("WHATSSS");return +d.count; })
      .sort(function(a, b) { return b.count - a.count; });

  // Define an arc generator. Note the radius is specified here, not the layout.
  var arc = d3.svg.arc()
      .innerRadius(r / 2)
      .outerRadius(r);

 
 console.info(flights)
  // Insert an svg element (with margin) for each airport in our dataset. A
  // child g element translates the origin to the pie center.
  var svg = d3.select("body").selectAll("div")
      .data(flights)
    .enter().append("div") // http://code.google.com/p/chromium/issues/detail?id=98951
      .style("display", "inline-block")
      .style("width", (r + m) * 2 + "px")
      .style("height", (r + m) * 2 + "px")
    .append("svg:svg")
      .attr("width", (r + m) * 2)
      .attr("height", (r + m) * 2)
    .append("svg:g")
      .attr("transform", "translate(" + (r + m) + "," + (r + m) + ")");

  // Add a label for the airport. The `key` comes from the nest operator.
  svg.append("svg:text")
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      .text(function(d) { return d.key; });

  // Pass the nested per-airport values to the pie layout. The layout computes
  // the angles for each arc. Another g element will hold the arc and its label.
  var g = svg.selectAll("g")
      .data(function(d) { return pie(d.values); })
    .enter().append("svg:g");

  // Add a colored arc path, with a mouseover title showing the count.
  g.append("svg:path")
      .attr("d", arc)
      .style("fill", function(d) { console.info(d.data.degree + ":" + d.data.color + ":" + z[d.data.color]); return z[d.data.color]; })
    .append("svg:title")
      .text(function(d) { return d.data.degree + ": " + d.data.count; });

  // Add a label to the larger arcs, translated to the arc centroid and rotated.
  g.filter(function(d) { return d.endAngle - d.startAngle > .2; }).append("svg:text")
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + angle(d) + ")"; })
      .text(function(d) { return d.data.degree; });

  // Computes the label angle of an arc, converting from radians to degrees.
  function angle(d) {
    var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
    return a > 90 ? a - 180 : a;
  }
 //});
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>Pie Multiples with Nesting</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;
	}

	svg {
	font: 10px sans-serif;
	}

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

	// Load the flight data asynchronously.
	//d3.csv("flights.csv", function(flights) {

	flights = [{key: "Damon",
	values: [{degree: "MBA", count: 6, color: 0},{degree: "BBA", count: 3, color: 1}, {degree: "BBS", count: 2, color: 6}]},
	{key: "Steve",
	values: [{degree: "MBA", count: 6, color: 9},{degree: "BBA", count: 3, color: 10}, {degree: "BBS", count: 2, color: 6}]}
	]
	// Define the margin, radius, and color scale. 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();
	//z = d3.scale.ordinal().range()
	z = [
	"#3182bd", "#6baed6", "#9ecae1", "#c6dbef",
	"#e6550d", "#fd8d3c", "#fdae6b", "#fdd0a2",
	"#31a354", "#74c476", "#a1d99b", "#c7e9c0",
	"#756bb1", "#9e9ac8", "#bcbddc", "#dadaeb",
	"#636363", "#969696", "#bdbdbd", "#d9d9d9"
	];
	console.info(z)
	console.info(z[1])
	// Define a pie layout: the pie angle encodes the count of flights. Since our
	// data is stored in CSV, the counts are strings which we coerce to numbers.
	var pie = d3.layout.pie()
	.value(function(d) { console.info("WHATSSS");return +d.count; })
	.sort(function(a, b) { return b.count - a.count; });

	// Define an arc generator. Note the radius is specified here, not the layout.
	var arc = d3.svg.arc()
	.innerRadius(r / 2)
	.outerRadius(r);


	console.info(flights)
	// Insert an svg element (with margin) for each airport in our dataset. A
	// child g element translates the origin to the pie center.
	var svg = d3.select("body").selectAll("div")
	.data(flights)
	.enter().append("div") // http://code.google.com/p/chromium/issues/detail?id=98951
	.style("display", "inline-block")
	.style("width", (r + m) * 2 + "px")
	.style("height", (r + m) * 2 + "px")
	.append("svg:svg")
	.attr("width", (r + m) * 2)
	.attr("height", (r + m) * 2)
	.append("svg:g")
	.attr("transform", "translate(" + (r + m) + "," + (r + m) + ")");

	// Add a label for the airport. The `key` comes from the nest operator.
	svg.append("svg:text")
	.attr("dy", ".35em")
	.attr("text-anchor", "middle")
	.text(function(d) { return d.key; });

	// Pass the nested per-airport values to the pie layout. The layout computes
	// the angles for each arc. Another g element will hold the arc and its label.
	var g = svg.selectAll("g")
	.data(function(d) { return pie(d.values); })
	.enter().append("svg:g");

	// Add a colored arc path, with a mouseover title showing the count.
	g.append("svg:path")
	.attr("d", arc)
	.style("fill", function(d) { console.info(d.data.degree + ":" + d.data.color + ":" + z[d.data.color]); return z[d.data.color]; })
	.append("svg:title")
	.text(function(d) { return d.data.degree + ": " + d.data.count; });

	// Add a label to the larger arcs, translated to the arc centroid and rotated.
	g.filter(function(d) { return d.endAngle - d.startAngle > .2; }).append("svg:text")
	.attr("dy", ".35em")
	.attr("text-anchor", "middle")
	.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + angle(d) + ")"; })
	.text(function(d) { return d.data.degree; });

	// Computes the label angle of an arc, converting from radians to degrees.
	function angle(d) {
	var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
	return a > 90 ? a - 180 : a;
	}
	//});
	</script>
	</body>
	</html>