A quick test of d3-hierarchy’s new circle-packing layout.
forked from mbostock's block: Rainbow Pack
forked from kerryrodden's block: Rainbow Pack (adapted for d3.unconf badge)
| license: gpl-3.0 | |
| height: 960 |
A quick test of d3-hierarchy’s new circle-packing layout.
forked from mbostock's block: Rainbow Pack
forked from kerryrodden's block: Rainbow Pack (adapted for d3.unconf badge)
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| margin: 0; | |
| background: #333; | |
| overflow: hidden; | |
| } | |
| circle { | |
| stroke: #000; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <svg width="1050" height="1500"><g transform="translate(525,750)"></g></svg> | |
| <script src="//d3js.org/d3.v4.0.0-alpha.35.min.js"></script> | |
| <script> | |
| var svg = d3.select("svg"), | |
| width = +svg.attr("width"), | |
| height = +svg.attr("height"), | |
| size = Math.max(width, height); | |
| var color = d3.scaleRainbow() | |
| .domain([0, 2 * Math.PI]); | |
| var circles = d3.packSiblings(d3.range(2000) | |
| .map(d3.randomUniform(8, 26)) | |
| .map(function(r) { return {r: r}; })) | |
| .filter(function(d) { return -500 < d.x && d.x < 500 && -500 < d.y && d.y < 500; }); | |
| svg | |
| .select("g") | |
| .selectAll("circle") | |
| .data(circles) | |
| .enter().append("circle") | |
| .style("fill", function(d) { return color(d.angle = Math.atan2(d.y, d.x)); }) | |
| .attr("cx", function(d) { return Math.cos(d.angle) * (size / Math.SQRT2 + 30); }) | |
| .attr("cy", function(d) { return Math.sin(d.angle) * (size / Math.SQRT2 + 30); }) | |
| .attr("r", function(d) { return d.r - 0.25; }) | |
| .transition() | |
| .ease(d3.easeCubicOut) | |
| .delay(function(d) { return Math.sqrt(d.x * d.x + d.y * d.y) * 8; }) | |
| .duration(1400) | |
| .attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }); | |
| </script> |
| �PNG | |