A sunburst (radial partition layout) built with D3, featuring interactive distortion based on InterRing: when you click on a node, it expands to fill 80% of the parent arc. Clicking on the root node resets all distortions.
-
-
Save erichoco/6724119 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "impression", | |
| "data": [ | |
| { | |
| "name": "google", | |
| "children": [ | |
| { "name": "drive", "size": 1000 }, | |
| { "name": "play", "size": 1000 }, | |
| { "name": "gmail", "size": 1000 } | |
| ] | |
| }, | |
| { | |
| "name": "apple", | |
| "children": [ | |
| { "name": "iphone", "size": 1000 }, | |
| { "name": "mac", "size": 1000 } | |
| ] | |
| }, | |
| { | |
| "name": "MS", | |
| "children": [ | |
| { "name": "hotmail", "size": 1000 }, | |
| { "name": "Windoes", "size": 1000 } | |
| ] | |
| }, | |
| { | |
| "name": "Facebook", | |
| "children": [ | |
| { "name": "timeline", "size": 1000 }, | |
| { "name": "messanger", "size": 1000 } | |
| ] | |
| } | |
| ] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
| <title>Sunburst with Distortion</title> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <style type="text/css"> | |
| path { | |
| stroke: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var w = 960, | |
| h = 500, | |
| r = 230, | |
| color = d3.scale.category20c(); | |
| var partition = d3.layout.partition() | |
| .size([2 * Math.PI, r]) | |
| .value(function(d) { return d.size; }); | |
| var arc = d3.svg.arc() | |
| .startAngle(function(d) { return d.x; }) | |
| .endAngle(function(d) { return d.x + d.dx; }) | |
| .innerRadius(function(d) { return d.y; }) | |
| .outerRadius(function(d) { return d.y + d.dy; }); | |
| var svg = d3.select("body").append("svg:svg") | |
| .attr("width", w) | |
| .attr("height", h) | |
| .append("svg:g") | |
| .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")"); | |
| d3.json("readme.json", function(root) { | |
| console.log(root); | |
| path = svg.data([root]).selectAll("path") | |
| .data(partition.nodes) | |
| .enter().append("svg:path") | |
| .attr("d", arc) | |
| .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) | |
| .on("click", magnify) | |
| .each(stash); | |
| }); | |
| // Distort the specified node to 80% of its parent. | |
| function magnify(node) { | |
| if (parent = node.parent) { | |
| var parent, | |
| x = parent.x, | |
| k = .8; | |
| parent.children.forEach(function(sibling) { | |
| x += reposition(sibling, x, sibling === node | |
| ? parent.dx * k / node.value | |
| : parent.dx * (1 - k) / (parent.value - node.value)); | |
| }); | |
| } else { | |
| reposition(node, 0, node.dx / node.value); | |
| } | |
| path.transition() | |
| .duration(750) | |
| .attrTween("d", arcTween); | |
| } | |
| // Recursively reposition the node at position x with scale k. | |
| function reposition(node, x, k) { | |
| node.x = x; | |
| if (node.children && (n = node.children.length)) { | |
| var i = -1, n; | |
| while (++i < n) x += reposition(node.children[i], x, k); | |
| } | |
| return node.dx = node.value * k; | |
| } | |
| // 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); | |
| }; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment