enjalot/.block

## .block
license: gpl-3.0
height: 960

## README.md

      
    Raw
  

              README.md
            
          
    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)

  
## index.html
<!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("rect")
  .data(circles)
  .enter().append("rect")
    .style("fill", function(d) { return color(d.angle = Math.atan2(d.y, d.x)); })
    .attr("x", function(d) { return d.r/2 + Math.cos(d.angle) * (size / Math.SQRT2 + 30); })
    .attr("y", function(d) { return d.r/2 + Math.sin(d.angle) * (size / Math.SQRT2 + 30); })
    .attr("width", function(d) { return d.r - 0.25; })
    .attr("height", 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) * 5; })
    .duration(1000)
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; });

</script>
	<!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("rect")
	.data(circles)
	.enter().append("rect")
	.style("fill", function(d) { return color(d.angle = Math.atan2(d.y, d.x)); })
	.attr("x", function(d) { return d.r/2 + Math.cos(d.angle) * (size / Math.SQRT2 + 30); })
	.attr("y", function(d) { return d.r/2 + Math.sin(d.angle) * (size / Math.SQRT2 + 30); })
	.attr("width", function(d) { return d.r - 0.25; })
	.attr("height", 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) * 5; })
	.duration(1000)
	.attr("x", function(d) { return d.x; })
	.attr("y", function(d) { return d.y; });

	</script>