| license: gpl-3.0 |
A sunburst is similar to the treemap, except it uses a radial layout. The root node of the tree is at the center, with leaves on the circumference. The area (or angle, depending on implementation) of each arc corresponds to its value. Sunburst design by John Stasko. Data courtesy Jeff Heer.
forked from mbostock's block: Sunburst Partition
| [ | |
| {"name":"Active", "totalHours":180, "leftHours":25, "roles":[{"name":"Role1", "totalHours":90, "leftHours":25},{"name":"Role2", "totalHours":90, "leftHours":0}]}, | |
| {"name":"Cancel", "totalHours":150, "leftHours":42,"roles":[{"name":"Role3", "totalHours":90, "leftHours":25},{"name":"Role4", "totalHours":60, "leftHours":17}]}, | |
| {"name":"Arrive", "totalHours":250, "leftHours":10, "roles":[{"name":"Role5", "totalHours":90, "leftHours":10},{"name":"Role6", "totalHours":100, "leftHours":0},{"name":"Role7", "totalHours":60, "leftHours":0}]}, | |
| {"name":"Contract", "totalHours":300, "leftHours":120, "roles":[{"name":"Role8", "totalHours":90, "leftHours":0},{"name":"Role9", "totalHours":100, "leftHours":30},{"name":"Role7", "totalHours":110, "leftHours":90}]} | |
| ] |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| margin: auto; | |
| position: relative; | |
| width: 960px; | |
| } | |
| form { | |
| position: absolute; | |
| right: 10px; | |
| top: 10px; | |
| } | |
| </style> | |
| <form> | |
| <label><input type="radio" name="mode" value="size"> Size</label> | |
| <label><input type="radio" name="mode" value="count" checked> Count</label> | |
| </form> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 700, | |
| radius = Math.min(width, height) / 2, | |
| color = d3.scale.category20c(); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height * .52 + ")"); | |
| var partition = d3.layout.partition() | |
| .sort(null) | |
| .size([2 * Math.PI, radius * radius]) | |
| .value(function(d) { return 1; }); | |
| var arc = d3.svg.arc() | |
| .startAngle(function(d) { return d.x; }) | |
| .endAngle(function(d) { return d.x + d.dx; }) | |
| .innerRadius(function(d) { return Math.sqrt(d.y); }) | |
| .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); }); | |
| d3.json("flare.json", function(error, root) { | |
| if (error) throw error; | |
| var path = svg.datum(root).selectAll("path") | |
| .data(partition.nodes) | |
| .enter().append("path") | |
| .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring | |
| .attr("d", arc) | |
| .style("stroke", "#fff") | |
| .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) | |
| .style("fill-rule", "evenodd") | |
| .each(stash); | |
| d3.selectAll("input").on("change", function change() { | |
| var value = this.value === "count" | |
| ? function() { return 1; } | |
| : function(d) { return d.size; }; | |
| path | |
| .data(partition.value(value).nodes) | |
| .transition() | |
| .duration(1500) | |
| .attrTween("d", arcTween); | |
| }); | |
| }); | |
| // Stash the old values for transition. | |
| function stash(d) { | |
| d.x0 = d.x; | |
| d.dx0 = d.dx; | |
| } | |
| // Interpolate the arcs in data space. | |
| function arcTween(a) { | |
| var i = d3.interpolate({x: a.x0, dx: a.dx0}, a); | |
| return function(t) { | |
| var b = i(t); | |
| a.x0 = b.x; | |
| a.dx0 = b.dx; | |
| return arc(b); | |
| }; | |
| } | |
| d3.select(self.frameElement).style("height", height + "px"); | |
| </script> |