A quick test of d3-hierarchy’s new circle-packing layout.
forked from mbostock's block: Rainbow Pack
xxxxxxxxxx<meta charset="utf-8"><style>body { background: #333;}circle { stroke: #000; stroke-width: 1.5px;}</style><svg width="960" height="960"> <g transform="translate(480,480)"></g></svg><script src="//d3js.org/d3.v4.0.0-alpha.28.min.js"></script><script src="d3-hierarchy.min.js"></script><script>var color = d3.scaleRainbow() .domain([0, 2 * Math.PI]);var circles = d3.range(2000) .map(d3.randomUniform(8, 26)) .map(function(r) { return {r: Math.max(1, r)}; });d3_hierarchy.packCircles(circles);d3.select("g") .selectAll("circle") .data(circles .filter(function(d) { return -500 < d.x && d.x < 500 && -500 < d.y && d.y < 500; })) .enter().append("circle") .style("fill", function(d) { return color(Math.atan2(d.y, d.x)); }) .attr("cx", function(d) { return d.x / Math.sqrt(d.x * d.x + d.y * d.y) * 720; }) .attr("cy", function(d) { return d.y / Math.sqrt(d.x * d.x + d.y * d.y) * 720; }) .attr("r", function(d) { return d.r - 0.25; }) .transition() .ease(d3.easeCubicOut) .delay(function(d, i) { return Math.sqrt(i) * 250; }) .duration(1000) .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; });</script> https://d3js.org/d3.v4.0.0-alpha.28.min.js