Rainbow Pack

A quick test of d3-hierarchy’s new circle-packing layout.

forked from mbostock's block: Rainbow Pack

<!DOCTYPE html>
<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