(function() {
  var apothem, bins, color, dots, height, hexagons, hexbin, points, radius, svg, upper_left, upper_right, width;

  width = 480;

  height = 500;

  points = d3.range(2000).map(function() {
    return {
      x: d3.random.normal(width / 3, 90)(),
      y: d3.random.normal(height / 3, 90)()
    };
  }).concat(d3.range(1000).map(function() {
    return {
      x: d3.random.normal(2 * width / 3, 70)(),
      y: d3.random.normal(2 * height / 3, 70)()
    };
  }));

  svg = d3.select('svg');

  upper_left = svg.append('g').attr('id', 'dots').attr('clip-path', 'url(#square_window)');

  upper_right = svg.append('g').attr('id', 'bins').attr('clip-path', 'url(#square_window)').attr('transform', "translate(" + width + ",0)");

  svg.append('line').attr({
    "class": 'separator',
    x1: width,
    x2: width,
    y1: 0,
    y2: height
  });

  dots = d3.select('#dots').selectAll('.dot').data(points);

  dots.enter().append('circle').attr({
    "class": 'dot',
    r: 1,
    cx: function(p) {
      return p.x;
    },
    cy: function(p) {
      return p.y;
    }
  });

  radius = 16;

  apothem = Math.sqrt(3) / 2 * radius;

  hexbin = d3.hexbin().size([width, height]).radius(radius).x(function(d) {
    return d.x;
  }).y(function(d) {
    return d.y;
  });

  bins = hexbin(points);

  color = d3.scale.linear().domain([
    0, d3.max(bins, function(b) {
      return b.length;
    })
  ]).range(['white', '#333']).interpolate(d3.interpolateHcl);

  hexagons = d3.select('#bins').selectAll('.hexagon').data(bins);

  hexagons.enter().append('path').attr('class', 'hexagon').attr('d', function(d) {
    return hexbin.hexagon(radius);
  }).attr('transform', function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  }).attr('fill', function(d) {
    return color(d.length);
  });

}).call(this);