Sunburst

Sunburst design by John Stasko. Data courtesy Jeff Heer.

Source Code

 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 }
Copyright © 2011 Mike Bostock
Fork me on GitHub