plmrry/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="2: circles canvas">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<script>
  var width = 1000;
  var height = 500;

  var canvas = d3.select("body").append("main")
    .style({ width: "90%", margin: "0 auto", display: "block" })
    .append("canvas")
    .attr({ width: width + "px", height: height })
    .style({
  //     border: "1px solid black",
      width: width + "px", height: height,
      margin: "0 auto", display: "block"
    });

  var context = canvas.node().getContext("2d");

  var fragment = new DocumentFragment();

  var mean = 1e3, deviation = mean / 10;
  var random = d3.random.normal(mean, deviation);

  function getData(n) {
    return d3.range(n).map(function(d, i) {
      return {
        id: i, foo: random(), bar: random(), baz: random()
      };
    });
  }

  var n = Math.floor(random());
  var data = getData(n);

  var x = d3.scale.linear().range([0, width]);
  var y = d3.scale.linear().range([0, height]);
  var r = d3.scale.linear().range([1, 30]).clamp(true);

  var fooExtent = d3.extent(data, function(d) { return d.foo; });
  var barExtent = d3.extent(data, function(d) { return d.bar; });
  var bazExtent = d3.extent(data, function(d) { return d.baz; });

  x.domain(fooExtent);
  y.domain(barExtent);
  r.domain(bazExtent);

  function update() {
    var people = d3.select(fragment).selectAll(".person")
      .data(data, function(d) { return d.id; });

    people.enter().append("div").classed("person", true)
      .attr("data-color", "#0f0")
      .attr("data-foo", function(d) { return d.foo; })
      .attr("data-bar", function(d) { return d.bar; })
      .attr("data-baz", function(d) { return d.baz; })
  //     .transition().duration(300)
      .attr("data-color", "#000");

    people.transition().duration(300)
      .attr("data-foo", function(d) { return d.foo; })
      .attr("data-bar", function(d) { return d.bar; })
      .attr("data-baz", function(d) { return d.baz; });

    people.exit()
  //     .transition().duration(300)
  //     .attr("data-color", "#f00")
      .remove();
  }

  update();
  window.setInterval(function() {
    n = Math.floor(random());
    data = getData(n);
    update();
  }, 500);

  var zoom = d3.behavior.zoom()
    .x(x).y(y)
    .scale(0.54)
    .translate([150, 200]);

  canvas.call(zoom);

  d3.timer(draw);

  function draw() {
    context.clearRect(0, 0, width, height);
    context.globalAlpha = 0.05;
    d3.select(fragment).selectAll(".person").each(function(d) {
      var thiz = d3.select(this);
      context.beginPath();

      var foo = thiz.attr("data-foo");
      var bar = thiz.attr("data-bar");
      var baz = thiz.attr("data-baz");

      var cx = x(foo), cy = y(bar);
      context.moveTo(cx, cy);

      context.arc(cx, cy, r(baz), 0, 2 * Math.PI);
      context.fillStyle = thiz.attr("data-color");
      context.fill();
    });
  }
</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="2: circles canvas">
	<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<script>
	var width = 1000;
	var height = 500;

	var canvas = d3.select("body").append("main")
	.style({ width: "90%", margin: "0 auto", display: "block" })
	.append("canvas")
	.attr({ width: width + "px", height: height })
	.style({
	// border: "1px solid black",
	width: width + "px", height: height,
	margin: "0 auto", display: "block"
	});

	var context = canvas.node().getContext("2d");

	var fragment = new DocumentFragment();

	var mean = 1e3, deviation = mean / 10;
	var random = d3.random.normal(mean, deviation);

	function getData(n) {
	return d3.range(n).map(function(d, i) {
	return {
	id: i, foo: random(), bar: random(), baz: random()
	};
	});
	}

	var n = Math.floor(random());
	var data = getData(n);

	var x = d3.scale.linear().range([0, width]);
	var y = d3.scale.linear().range([0, height]);
	var r = d3.scale.linear().range([1, 30]).clamp(true);

	var fooExtent = d3.extent(data, function(d) { return d.foo; });
	var barExtent = d3.extent(data, function(d) { return d.bar; });
	var bazExtent = d3.extent(data, function(d) { return d.baz; });

	x.domain(fooExtent);
	y.domain(barExtent);
	r.domain(bazExtent);

	function update() {
	var people = d3.select(fragment).selectAll(".person")
	.data(data, function(d) { return d.id; });

	people.enter().append("div").classed("person", true)
	.attr("data-color", "#0f0")
	.attr("data-foo", function(d) { return d.foo; })
	.attr("data-bar", function(d) { return d.bar; })
	.attr("data-baz", function(d) { return d.baz; })
	// .transition().duration(300)
	.attr("data-color", "#000");

	people.transition().duration(300)
	.attr("data-foo", function(d) { return d.foo; })
	.attr("data-bar", function(d) { return d.bar; })
	.attr("data-baz", function(d) { return d.baz; });

	people.exit()
	// .transition().duration(300)
	// .attr("data-color", "#f00")
	.remove();
	}

	update();
	window.setInterval(function() {
	n = Math.floor(random());
	data = getData(n);
	update();
	}, 500);

	var zoom = d3.behavior.zoom()
	.x(x).y(y)
	.scale(0.54)
	.translate([150, 200]);

	canvas.call(zoom);

	d3.timer(draw);

	function draw() {
	context.clearRect(0, 0, width, height);
	context.globalAlpha = 0.05;
	d3.select(fragment).selectAll(".person").each(function(d) {
	var thiz = d3.select(this);
	context.beginPath();

	var foo = thiz.attr("data-foo");
	var bar = thiz.attr("data-bar");
	var baz = thiz.attr("data-baz");

	var cx = x(foo), cy = y(bar);
	context.moveTo(cx, cy);

	context.arc(cx, cy, r(baz), 0, 2 * Math.PI);
	context.fillStyle = thiz.attr("data-color");
	context.fill();
	});
	}
	</script>
	</body>
	</html>