d3

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>d3.js ~ Sunburst</title> <script type="text/javascript" src="../d3.js?1.12.0"></script> <style type="text/css"> @import url("../style.css?1.10.0"); @import url("../syntax.css?1.6.0"); </style> </head> <body> <div class="body"> <div class="content"> <div class="topbar"> <a href="../">Overview</a> <a href="../ex/">Examples</a> <a href="../api/">Documentation</a> <a href="http://github.com/mbostock/d3/archives/master">Download</a> </div> <div class="sidebar"> <h1>d3.js</h1> </div> <h1 id='sunburst'>Sunburst</h1> <div class='gallery' id='chart'> <button class='first' id='size'> Size </button><button class='last active' id='count'> Count </button> </div><link href='button.css' rel='stylesheet' type='text/css' /><script src='../d3.layout.js?1.12.0' type='text/javascript'> </script><script src='sunburst.js' type='text/javascript'> </script> Sunburst design by <a href='http://www.cc.gatech.edu/gvu/ii/sunburst/'>John Stasko</a>. Data courtesy <a href='http://flare.prefuse.org/'>Jeff Heer</a>. <h3 id='source_code'>Source Code</h3> <div class='highlight'><pre><code class='js'> 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 .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; }) 16 .value(function(d) { return 1; }); 17 18 var arc = d3.svg.arc() 19 .startAngle(function(d) { return d.x; }) 20 .endAngle(function(d) { return d.x + d.dx; }) 21 .innerRadius(function(d) { return Math.sqrt(d.y); }) 22 .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); }); 23 24 d3.json("flare.json", function(json) { 25 vis.data(d3.entries(json)).selectAll("path") 26 .data(partition) 27 .enter().append("svg:path") 28 .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring 29 .attr("d", arc) 30 .attr("stroke", "#fff") 31 .attr("fill", function(d) { return color((d.children ? d : d.parent).data.key); }) 32 .attr("fill-rule", "evenodd"); 33 34 d3.select("#size").on("click", function() { 35 vis.selectAll("path") 36 .data(repartition(function(d) { return d.value; })) 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 vis.selectAll("path") 47 .data(repartition(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 // Compute a new partition, stashing the old value for transition. 58 function repartition(value) { 59 return function(d) { 60 var olds = partition(d), 61 news = partition.value(value)(d); 62 news.forEach(function(d, i) { 63 d.prev = olds[i]; 64 }); 65 return news; 66 }; 67 } 68 69 // Interpolate the arcs in data space. 70 function arcTween(a) { 71 var i = d3.interpolate({x: a.prev.x, dx: a.prev.dx}, a); 72 return function(t) { 73 return arc(i(t)); 74 }; 75 } </code></pre> </div> </div> <div class="foot">Copyright © 2011 <a href="http://bost.ocks.org/mike">Mike Bostock</a></div> </div> </div> <a href="http://github.com/mbostock/d3"><img style="position:absolute;top:0;right:0;border:0;" width="149" height="149" src="../forkme.png" alt="Fork me on GitHub" /></a> </body> </html>