Click on any package to zoom in or out. See also this static circle packing example.
forked from mbostock's block: Zoomable Circle Packing
Created
September 20, 2017 09:02
-
-
Save AdrienLemaire/ce2d397421227b6869a3a61b5111d88d to your computer and use it in GitHub Desktop.
Zoomable Circle Packing
This file contains hidden or 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
| license: gpl-3.0 | |
| height: 960 |
This file contains hidden or 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": "flare", | |
| "children": [ | |
| { | |
| "name": "未来電子", | |
| "children": [ | |
| { | |
| "name": "Tech", | |
| "children": [ | |
| {"name": "ドリ", "size": 3938}, | |
| {"name": "久保田", "size": 3812} | |
| ] | |
| }, | |
| { | |
| "name": "Sales", | |
| "children": [ | |
| {"name": "福本", "size": 3534}, | |
| {"name": "黒田", "size": 5731}, | |
| {"name": "芹生", "size": 7840}, | |
| {"name": "西", "size": 5914} | |
| ] | |
| }, | |
| { | |
| "name": "Marketing", | |
| "children": [ | |
| {"name": "川崎", "size": 7074}, | |
| {"name": "岩崎", "size": 7074}, | |
| {"name": "岩崎", "size": 7074}, | |
| {"name": "岩崎", "size": 7074}, | |
| {"name": "岩崎", "size": 7074}, | |
| {"name": "岩崎", "size": 7074} | |
| ] | |
| }, | |
| { | |
| "name": "Design", | |
| "children": [ | |
| {"name": "アッシュ", "size": 7074}, | |
| {"name": "アッシュ", "size": 7074}, | |
| {"name": "アッシュ", "size": 7074}, | |
| {"name": "アッシュ", "size": 7074}, | |
| {"name": "アッシュ", "size": 7074} | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } |
This file contains hidden or 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> | |
| <meta charset="utf-8"> | |
| <style> | |
| .node { | |
| cursor: pointer; | |
| } | |
| .node:hover { | |
| stroke: #000; | |
| stroke-width: 1.5px; | |
| } | |
| .node--leaf { | |
| fill: white; | |
| } | |
| .label { | |
| font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| text-anchor: middle; | |
| text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff; | |
| } | |
| .label, | |
| .node--root, | |
| .node--leaf { | |
| pointer-events: none; | |
| } | |
| </style> | |
| <svg width="960" height="960"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var svg = d3.select("svg"), | |
| margin = 20, | |
| diameter = +svg.attr("width"), | |
| g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")"); | |
| var color = d3.scaleLinear() | |
| .domain([-1, 5]) | |
| .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"]) | |
| .interpolate(d3.interpolateHcl); | |
| var pack = d3.pack() | |
| .size([diameter - margin, diameter - margin]) | |
| .padding(2); | |
| d3.json("flare.json", function(error, root) { | |
| if (error) throw error; | |
| root = d3.hierarchy(root) | |
| .sum(function(d) { return d.size; }) | |
| .sort(function(a, b) { return b.value - a.value; }); | |
| var focus = root, | |
| nodes = pack(root).descendants(), | |
| view; | |
| var circle = g.selectAll("circle") | |
| .data(nodes) | |
| .enter().append("circle") | |
| .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) | |
| .style("fill", function(d) { return d.children ? color(d.depth) : null; }) | |
| .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); }); | |
| var text = g.selectAll("text") | |
| .data(nodes) | |
| .enter().append("text") | |
| .attr("class", "label") | |
| .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; }) | |
| .style("display", function(d) { return d.parent === root ? "inline" : "none"; }) | |
| .text(function(d) { return d.data.name; }); | |
| var node = g.selectAll("circle,text"); | |
| svg | |
| .style("background", color(-1)) | |
| .on("click", function() { zoom(root); }); | |
| zoomTo([root.x, root.y, root.r * 2 + margin]); | |
| function zoom(d) { | |
| var focus0 = focus; focus = d; | |
| var transition = d3.transition() | |
| .duration(d3.event.altKey ? 7500 : 750) | |
| .tween("zoom", function(d) { | |
| var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]); | |
| return function(t) { zoomTo(i(t)); }; | |
| }); | |
| transition.selectAll("text") | |
| .filter(function(d) { return d.parent === focus || this.style.display === "inline"; }) | |
| .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; }) | |
| .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; }) | |
| .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; }); | |
| } | |
| function zoomTo(v) { | |
| var k = diameter / v[2]; view = v; | |
| node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; }); | |
| circle.attr("r", function(d) { return d.r * k; }); | |
| } | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment