/gist:1356893

## gistfile1.txt
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Partition - Sunburst</title>
    <script type="text/javascript" src="../../d3.js"></script>
    <script type="text/javascript" src="../../d3.layout.js"></script>
    <style type="text/css">

path {
  stroke: #fff;
  fill-rule: evenodd;
}

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

var w = 960,
    h = 700,
    r = Math.min(w, h) / 2,
    x = d3.scale.linear().range([0, 2 * Math.PI]),
    y = d3.scale.sqrt().range([0, r]),
    color = d3.scale.category20c();

var vis = d3.select("#chart").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
  .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

var partition = d3.layout.partition()
    .value(function(d) { return d.size; });

var arc = d3.svg.arc()
    .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
    .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
    .innerRadius(function(d) { return Math.max(0, y(d.y)); })
    .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });

d3.json("../data/flare.json", function(json) {
  var path = vis.data([json]).selectAll("path")
      .data(partition.nodes)
    .enter().append("svg:path")
      .attr("d", arc)
      .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
      .on("click", click);

    path.append("svg:text")
      .attr("transform", function(d) { return "rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")"; })
      .attr("x", function(d) { return Math.sqrt(d.y); })
      .attr("dx", "6") // margin
      .attr("dy", ".35em") // vertical-align
      .text(function(d) { return d.data.key; });

  function click(d) {
    path.transition()
      .duration(750)
      .attrTween("d", arcTween(d));
  }
});

// Interpolate the scales!
function arcTween(d) {
  var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
      yd = d3.interpolate(y.domain(), [d.y, 1]),
      yr = d3.interpolate(y.range(), [d.y ? 20 : 0, r]);
  return function(d, i) {
    return i
        ? function(t) { return arc(d); }
        : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
  };
}

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Partition - Sunburst</title>
	<script type="text/javascript" src="../../d3.js"></script>
	<script type="text/javascript" src="../../d3.layout.js"></script>
	<style type="text/css">

	path {
	stroke: #fff;
	fill-rule: evenodd;
	}

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

	var w = 960,
	h = 700,
	r = Math.min(w, h) / 2,
	x = d3.scale.linear().range([0, 2 * Math.PI]),
	y = d3.scale.sqrt().range([0, r]),
	color = d3.scale.category20c();

	var vis = d3.select("#chart").append("svg:svg")
	.attr("width", w)
	.attr("height", h)
	.append("svg:g")
	.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

	var partition = d3.layout.partition()
	.value(function(d) { return d.size; });

	var arc = d3.svg.arc()
	.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
	.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
	.innerRadius(function(d) { return Math.max(0, y(d.y)); })
	.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });

	d3.json("../data/flare.json", function(json) {
	var path = vis.data([json]).selectAll("path")
	.data(partition.nodes)
	.enter().append("svg:path")
	.attr("d", arc)
	.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
	.on("click", click);

	path.append("svg:text")
	.attr("transform", function(d) { return "rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")"; })
	.attr("x", function(d) { return Math.sqrt(d.y); })
	.attr("dx", "6") // margin
	.attr("dy", ".35em") // vertical-align
	.text(function(d) { return d.data.key; });

	function click(d) {
	path.transition()
	.duration(750)
	.attrTween("d", arcTween(d));
	}
	});

	// Interpolate the scales!
	function arcTween(d) {
	var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
	yd = d3.interpolate(y.domain(), [d.y, 1]),
	yr = d3.interpolate(y.range(), [d.y ? 20 : 0, r]);
	return function(d, i) {
	return i
	? function(t) { return arc(d); }
	: function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
	};
	}

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