1 var w = 960,

     2     h = 700,

     3     r = Math.min(w, h) / 2,

     4     color = d3.scale.category20c();

     5 

     6 var vis = d3.select("#chart").append("svg:svg")

     7     .attr("width", w)

     8     .attr("height", h)

     9   .append("svg:g")

    10     .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

    11 

    12 var partition = d3.layout.partition()

    13     .sort(null)

    14     .size([2 * Math.PI, r * r])

    15     .value(function(d) { return 1; });

    16 

    17 var arc = d3.svg.arc()

    18     .startAngle(function(d) { return d.x; })

    19     .endAngle(function(d) { return d.x + d.dx; })

    20     .innerRadius(function(d) { return Math.sqrt(d.y); })

    21     .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

    22 

    23 d3.json("../data/flare.json", function(json) {

    24   var path = vis.data([json]).selectAll("path")

    25       .data(partition.nodes)

    26     .enter().append("svg:path")

    27       .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring

    28       .attr("d", arc)

    29       .attr("fill-rule", "evenodd")

    30       .style("stroke", "#fff")

    31       .style("fill", function(d) { return color((d.children ? d : d.parent).name); })

    32       .each(stash);

    33 

    34   d3.select("#size").on("click", function() {

    35     path

    36         .data(partition.value(function(d) { return d.size; }))

    37       .transition()

    38         .duration(1500)

    39         .attrTween("d", arcTween);

    40 

    41     d3.select("#size").classed("active", true);

    42     d3.select("#count").classed("active", false);

    43   });

    44 

    45   d3.select("#count").on("click", function() {

    46     path

    47         .data(partition.value(function(d) { return 1; }))

    48       .transition()

    49         .duration(1500)

    50         .attrTween("d", arcTween);

    51 

    52     d3.select("#size").classed("active", false);

    53     d3.select("#count").classed("active", true);

    54   });

    55 });

    56 

    57 // Stash the old values for transition.

    58 function stash(d) {

    59   d.x0 = d.x;

    60   d.dx0 = d.dx;

    61 }

    62 

    63 // Interpolate the arcs in data space.

    64 function arcTween(a) {

    65   var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);

    66   return function(t) {

    67     var b = i(t);

    68     a.x0 = b.x;

    69     a.dx0 = b.dx;

    70     return arc(b);

    71   };

    72 }