Twitchy Canvas Particles

<!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="https://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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://code.jquery.com/jquery-2.1.1.min.js

https://d3js.org/d3.v3.min.js