| license: mit |
Built with blockbuilder.org
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| </head> | |
| <body> | |
| <input type="button" id="adddata" name="Add Data" value="Add Data" /> | |
| <input type="button" id="samesize" name="Same Size" value="Same Size" /> | |
| <input type="button" id="diffsize" name="Diff Size" value="Diff Size" /> | |
| <br> | |
| Choose circle size: | |
| Min: | |
| <input id="circlemin" type="range" min="100" max="5000000" step="10000" value="100"> | |
| Max: | |
| <input id="circlemax" type="range" min="100" max="5000000" step="10000" value="5000000"> | |
| <br> | |
| <div id="vis"></div> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <script type="text/javascript" src="v3.js"></script> | |
| </body> | |
| </html> |
| var data = { | |
| "name": "Root", | |
| "id": 0, | |
| "children": [ | |
| { | |
| "name": "Leaf", | |
| "size": 2098629, | |
| "id": 1, | |
| }, | |
| { | |
| "name": "Leaf", | |
| "size": 104720, | |
| "id": 2 | |
| }, | |
| { | |
| "name": "Leaf", | |
| "size": 5430, | |
| "id": 3, | |
| }, | |
| { | |
| "name": "Leaf", | |
| "size": 102096, | |
| "id" : 4 | |
| }, | |
| { | |
| "name": "Leaf", | |
| "size": 986974, | |
| "id": 5 | |
| }, | |
| { | |
| "name": "Leaf", | |
| "size": 59735, | |
| "id": 6 | |
| }, | |
| { | |
| "name": "Leaf", | |
| "size": 1902, | |
| "id": 7 | |
| }, | |
| ] | |
| }; | |
| var diameter = 500, | |
| format = d3.format(",d"), | |
| diffsize = true, | |
| circleMin = 100, | |
| circleMax = 5000000; | |
| var svg = d3.select("#vis").append("svg") | |
| .attr("width", diameter) | |
| .attr("height", diameter); | |
| var pack = d3.layout.pack() | |
| .size([diameter - 4, diameter - 4]) | |
| .sort( function(a, b) { | |
| return -(a.value - b.value); | |
| }) | |
| .value(function(d) { | |
| if (diffsize) { | |
| return d.size; | |
| } else { | |
| return 1000; | |
| } | |
| }); | |
| var vis, titles, circles; | |
| // Munch some data into the children array | |
| function updateData() { | |
| data.children.push({ | |
| "name": "Leaf", | |
| "synthetic": true, | |
| "size": Math.floor(Math.random() * circleMax) + circleMin, | |
| "id": Math.floor(Math.random() * 1000) | |
| }); | |
| return data; | |
| }; | |
| // Visualization render | |
| function render(data) { | |
| var packedNodes = pack.nodes(data); | |
| visSelection = svg.selectAll("g.node") | |
| .data(packedNodes.splice(1, packedNodes.length), function(d) { | |
| return d.id; | |
| }); | |
| vis = visSelection.enter() | |
| .append("g") | |
| .classed("node", true); | |
| visSelection.selectAll("circle") | |
| .style("fill", function(d) { return !d.children ? "white" : "beige"; }) | |
| circles = vis.append("circle") | |
| .attr("fill", "yellow") | |
| .attr("stroke", "black") | |
| .attr("r", 0); | |
| visSelection.selectAll("circle") | |
| .transition().duration(500) | |
| .attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }) | |
| .attr("r", function(d) { return d.r; }); | |
| } | |
| // wire up button | |
| d3.select("#adddata").on("click", function() { | |
| data = updateData(); | |
| render(data); | |
| }); | |
| d3.select("#samesize").on("click", function() { | |
| diffsize = false; | |
| render(data); | |
| }); | |
| d3.select("#diffsize").on("click", function() { | |
| diffsize = true; | |
| render(data); | |
| }); | |
| d3.select("#circlemin").on("change", function() { | |
| circleMin = parseInt(this.value, 10); | |
| }) | |
| d3.select("#circlemax").on("change", function() { | |
| circleMax = parseInt(this.value, 10); | |
| }) | |
| render(data); |