(function() {
  var color, height, hexbin, points, radius, randomX, randomY, svg, width;

  svg = d3.select('svg');

  width = svg[0][0].getBoundingClientRect().width;

  height = svg[0][0].getBoundingClientRect().height;

  randomX = d3.random.normal(width / 2, 80);

  randomY = d3.random.normal(height / 2, 80);

  points = d3.range(2000).map(function() {
    return [randomX(), randomY()];
  });

  hexbin = d3.hexbin().size([width, height]).radius(20);

  radius = d3.scale.sqrt().domain([0, 60]).range([0, 20]);

  color = d3.scale.linear().domain([0, 20]).range(['white', 'steelblue']).interpolate(d3.interpolateLab);

  /*
  svg.selectAll('.hexagon')
      .data(hexbin(points))
    .enter().append('path')
      .attr('class', 'hexagon')
      .attr('d', (d) -> hexbin.hexagon(radius(d.length)))
      .attr('transform', (d) -> "translate(#{d.x},#{d.y})")
  */


  svg.selectAll('.bubble').data(hexbin(points)).enter().append('circle').attr('class', 'bubble').attr('r', function(d) {
    return radius(d.length) * Math.sqrt(3) / 2;
  }).attr('transform', function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });

  svg.selectAll('.point').data(points).enter().append('circle').attr('class', 'point').attr('cx', function(d) {
    return d[0];
  }).attr('cy', function(d) {
    return d[1];
  }).attr('r', 1);

}).call(this);