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 }