cpylua/d3circlepack.html

## d3circlepack.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="http://mbostock.github.io/d3/talk/20111116/style.css"/>
    <style type="text/css">

text {
  font-size: 11px;
  pointer-events: none;
}

text.parent {
  fill: #1f77b4;
}

circle {
  fill: #ccc;
  stroke: #999;
  pointer-events: all;
}

circle.parent {
  fill: #1f77b4;
  fill-opacity: .1;
  stroke: steelblue;
}

circle.parent:hover {
  stroke: #ff7f0e;
  stroke-width: .5px;
}

circle.child {
  pointer-events: none;
}

    </style>
  </head>
  <body>
    <h2>
      Flare code size<br>
      circle packing
    </h2>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script type="text/javascript">

var w = 974,
    h = 579,
    r = Math.min(w, h) - 20,
    x = d3.scale.linear().range([0, r]),
    y = d3.scale.linear().range([0, r]),
    node,
    root;

var pack = d3.layout.pack()
    .size([r, r])
    .value(function(d) { return d.size; })

var vis = d3.select("body").insert("svg:svg", "h2")
    .attr("width", w)
    .attr("height", h)
  .append("svg:g")
    .attr("transform", "translate(" + (w - r) / 2 + "," + (h - r) / 2 + ")");

d3.json("http://mbostock.github.io/d3/talk/20111116/flare.json", function(data) {
  node = root = data;

  var nodes = pack.nodes(root);

  vis.selectAll("circle")
      .data(nodes)
    .enter().append("svg:circle")
      .attr("class", function(d) { return d.children ? "parent" : "child"; })
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .attr("r", function(d) { return d.r; })
      .on("click", function(d) { return zoom(node == d ? root : d); });

  vis.selectAll("text")
      .data(nodes)
    .enter().append("svg:text")
      .attr("class", function(d) { return d.children ? "parent" : "child"; })
      .attr("x", function(d) { return d.x; })
      .attr("y", function(d) { return d.y; })
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      .style("opacity", function(d) { return d.r > 20 ? 1 : 0; })
      .text(function(d) { return d.name; });

  d3.select(window).on("click", function() { zoom(root); });
});

function zoom(d, i) {
  var k = r / d.r / 2;
  x.domain([d.x - d.r, d.x + d.r]);
  y.domain([d.y - d.r, d.y + d.r]);

  var t = vis.transition()
      .duration(d3.event.altKey ? 7500 : 750);

  t.selectAll("circle")
      .attr("cx", function(d) { return x(d.x); })
      .attr("cy", function(d) { return y(d.y); })
      .attr("r", function(d) { return k * d.r; });

  t.selectAll("text")
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return y(d.y); })
      .style("opacity", function(d) { return k * d.r > 20 ? 1 : 0; });

  node = d;
  d3.event.stopPropagation();
}

    </script>
  </body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<link type="text/css" rel="stylesheet" href="http://mbostock.github.io/d3/talk/20111116/style.css"/>
	<style type="text/css">

	text {
	font-size: 11px;
	pointer-events: none;
	}

	text.parent {
	fill: #1f77b4;
	}

	circle {
	fill: #ccc;
	stroke: #999;
	pointer-events: all;
	}

	circle.parent {
	fill: #1f77b4;
	fill-opacity: .1;
	stroke: steelblue;
	}

	circle.parent:hover {
	stroke: #ff7f0e;
	stroke-width: .5px;
	}

	circle.child {
	pointer-events: none;
	}

	</style>
	</head>
	<body>
	<h2>
	Flare code size<br>
	circle packing
	</h2>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script type="text/javascript">

	var w = 974,
	h = 579,
	r = Math.min(w, h) - 20,
	x = d3.scale.linear().range([0, r]),
	y = d3.scale.linear().range([0, r]),
	node,
	root;

	var pack = d3.layout.pack()
	.size([r, r])
	.value(function(d) { return d.size; })

	var vis = d3.select("body").insert("svg:svg", "h2")
	.attr("width", w)
	.attr("height", h)
	.append("svg:g")
	.attr("transform", "translate(" + (w - r) / 2 + "," + (h - r) / 2 + ")");

	d3.json("http://mbostock.github.io/d3/talk/20111116/flare.json", function(data) {
	node = root = data;

	var nodes = pack.nodes(root);

	vis.selectAll("circle")
	.data(nodes)
	.enter().append("svg:circle")
	.attr("class", function(d) { return d.children ? "parent" : "child"; })
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; })
	.attr("r", function(d) { return d.r; })
	.on("click", function(d) { return zoom(node == d ? root : d); });

	vis.selectAll("text")
	.data(nodes)
	.enter().append("svg:text")
	.attr("class", function(d) { return d.children ? "parent" : "child"; })
	.attr("x", function(d) { return d.x; })
	.attr("y", function(d) { return d.y; })
	.attr("dy", ".35em")
	.attr("text-anchor", "middle")
	.style("opacity", function(d) { return d.r > 20 ? 1 : 0; })
	.text(function(d) { return d.name; });

	d3.select(window).on("click", function() { zoom(root); });
	});

	function zoom(d, i) {
	var k = r / d.r / 2;
	x.domain([d.x - d.r, d.x + d.r]);
	y.domain([d.y - d.r, d.y + d.r]);

	var t = vis.transition()
	.duration(d3.event.altKey ? 7500 : 750);

	t.selectAll("circle")
	.attr("cx", function(d) { return x(d.x); })
	.attr("cy", function(d) { return y(d.y); })
	.attr("r", function(d) { return k * d.r; });

	t.selectAll("text")
	.attr("x", function(d) { return x(d.x); })
	.attr("y", function(d) { return y(d.y); })
	.style("opacity", function(d) { return k * d.r > 20 ? 1 : 0; });

	node = d;
	d3.event.stopPropagation();
	}

	</script>
	</body>
	</html>