Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active April 23, 2020 23:35
Show Gist options
  • Save mbostock/b07f8ae91c5e9e45719c to your computer and use it in GitHub Desktop.
Save mbostock/b07f8ae91c5e9e45719c to your computer and use it in GitHub Desktop.
Download ZIP
Rainbow Pack
Raw
.block
license: gpl-3.0
height: 960
redirect: https://observablehq.com/@mbostock/rainbow-pack
Raw
README.md

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

Raw
index.html
<!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.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) * 10; })
.duration(1000)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment