Built with blockbuilder.org
Last active
March 17, 2017 17:13
-
-
Save shobhitg/a2a9777adc9e5ad43ef9e58c3afbaf35 to your computer and use it in GitHub Desktop.
d3-bubble-mock
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
| license: mit |
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var dataObj = {"appProfileName":["WebAppProfile","VMware related applications","Miscellaneous applications","DBAppProfile"],"appProfileSize":[0,2,11,0],"appProfileId":["52044cae-a853-4556-85b2-82b129bd7c6e","300fa0fd-5f9a-44b1-9073-ca7c28fff745","e61ed446-484a-4ffb-9a8e-994f97259205","0f02440d-cbf3-4e2c-b301-296d088c05fd"],"sessionId":"971b7e35-4c2b-4a35-9f97-96fda6a46519"}; | |
| var size = dataObj.appProfileId.length; | |
| var data = []; | |
| while(size--) data[size] = {}; | |
| dataObj.appProfileId.forEach(function(d, i) { | |
| data[i]['id'] = d; | |
| }) | |
| dataObj.appProfileName.forEach(function(d, i) { | |
| data[i]['name'] = d; | |
| }) | |
| dataObj.appProfileSize.forEach(function(d, i) { | |
| data[i]['value'] = d ? d : 3; | |
| }) | |
| var color = d3.scaleOrdinal(d3.schemeCategory20c); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", 800) | |
| .attr("height", 500) | |
| .attr("font-size", 12) | |
| .attr("text-anchor", "middle") | |
| var width = +svg.attr("width"), | |
| height = +svg.attr("height"); | |
| var root = d3.hierarchy({children: data}) | |
| .sum(function(d) { return d.value; }) | |
| .each(function(d) { | |
| d.id = d.data.id; | |
| d.color = Math.random()*10; | |
| d.name = d.data.name | |
| }); | |
| var pack = d3.pack() | |
| .size([width, height]) | |
| .padding(25); | |
| var node = svg.selectAll(".node") | |
| .data(pack(root).leaves()) | |
| .enter().append("g") | |
| .attr("class", "node") | |
| .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) | |
| .on("mouseover", function() { | |
| d3.select(this).selectAll('circle') | |
| .transition() | |
| .ease(d3.easeCubic) | |
| .duration(0) | |
| .style("stroke", function(d) { return 'green'; }) | |
| .attr("r", function(d){return d.r+2}); | |
| }) | |
| .on("mouseout", function() { | |
| d3.select(this).selectAll('circle') | |
| .transition() | |
| .ease(d3.easeCubic) | |
| .duration(100) | |
| .style("stroke", function(d) { return 'none'; }) | |
| .attr("r", function(d){return d.r}) | |
| }); | |
| node.append("circle") | |
| .attr("id", function(d) { return d.id; }) | |
| .attr("r", function(d) { return d.r; }) | |
| .style("fill", function(d) { return color(d.color); }); | |
| node.append("clipPath") | |
| .attr("id", function(d) { return "clip-" + d.id; }) | |
| .append("use") | |
| .attr("xlink:href", function(d) { return "#" + d.id; }); | |
| node.append("text") | |
| .attr("clip-path", function(d) { return "url(#clip-" + d.id + ")"; }) | |
| .selectAll("tspan") | |
| .data(function(d) { return d.name.split(' '); }) | |
| .enter().append("tspan") | |
| .attr("x", 0) | |
| .attr("y", function(d, i, nodes) { return 12 + (i - nodes.length / 2 - 0.5) * 15; }) | |
| .text(function(d) { return d; }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment