Built with blockbuilder.org
forked from mashehu's block: fresh block
Last active
October 16, 2017 15:54
-
-
Save denisemauldin/6cc7333c550a00c0529f51da4b88a969 to your computer and use it in GitHub Desktop.
packed circle with tooltips
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: mit |
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; | |
| } | |
| </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); | |
| var tooltip = d3.select("body") | |
| .append("div") | |
| .style("position", "absolute") | |
| .style("z-index", "10") | |
| .style("visibility", "hidden") | |
| d3.json("new.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(); }) | |
| .on("mouseover", function(d){return tooltip.text(d.data.name).style("visibility", "visible");}) | |
| .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");}) | |
| .on("mouseout", function(){return tooltip.style("visibility", "hidden");}); | |
| 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; }); | |
| } | |
| function hovered(hover) { | |
| return function(d) { | |
| d3.selectAll(d.ancestors().map(function(d) {})); | |
| }; | |
| } | |
| }); | |
| </script> |
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": "countries_hits", | |
| "children": [ | |
| { | |
| "name": "CN", | |
| "size": 151685, | |
| "children": [ | |
| { | |
| "name": "Rule1", | |
| "size": 86036 | |
| }, | |
| { | |
| "name": "Rule2", | |
| "size": 30016 | |
| }, | |
| { | |
| "name": "Rule3", | |
| "size": 25680 | |
| }, | |
| { | |
| "name": "Rule4", | |
| "size": 4389 | |
| }, | |
| { | |
| "name": "Rule5", | |
| "size": 3189 | |
| }, | |
| { | |
| "name": "Rule6", | |
| "size": 2768 | |
| }, | |
| { | |
| "name": "Rule7", | |
| "size": 830 | |
| }, | |
| { | |
| "name": "Rule8", | |
| "size": 612 | |
| }, | |
| { | |
| "name": "Rule9", | |
| "size": 395 | |
| }, | |
| { | |
| "name": "Rule10", | |
| "size": 254 | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "uncat", | |
| "size": 8075, | |
| "children": [ | |
| { | |
| "name": "Rule11", | |
| "size": 4371 | |
| }, | |
| { | |
| "name": "Rule12", | |
| "size": 2459 | |
| }, | |
| { | |
| "name": "Rule13", | |
| "size": 1492 | |
| }, | |
| { | |
| "name": "Rule14", | |
| "size": 156 | |
| }, | |
| { | |
| "name": "Rule15", | |
| "size": 18 | |
| }, | |
| { | |
| "name": "Rule16", | |
| "size": 9 | |
| }, | |
| { | |
| "name": "Rule17", | |
| "size": 5 | |
| }, | |
| { | |
| "name": "Rule18", | |
| "size": 4 | |
| }, | |
| { | |
| "name": "Rule19", | |
| "size": 3 | |
| }, | |
| { | |
| "name": "Rule20", | |
| "size": 3 | |
| } | |
| ] | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment