var height = 500;
var width = 960;


var randomX = d3.random.normal(width / 2, 120);
var randomY = d3.random.normal(height / 2, 120);
var points = d3.range(1000).map(function() { return [randomX(), randomY()]; });

var color = d3.scale.linear()
    .domain([0, 20])
    .range(["white", "#6EA241"])
    .interpolate(d3.interpolateLab);

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)

svg.selectAll(".hexagon")
    .data(hexbin(points))
  .enter().append("path")
    .attr("class", "hexagon")
    .attr("d", hexbin.hexagon())
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .style("fill", function(d) { return color(d.length); })
    .each(function(d) {
      svg.append('text')
        .attr("x", d.x - 4*d.length.toString().length)
        .attr("y", d.y)
        .text(d.length);
    })


//Drawing original points
svg.selectAll('circle')
    .data(points)
  .enter().append('circle')
    .attr("cx", function(d) {return d[0]; })
    .attr("cy", function(d) {return d[1]; })
    .style('r', 2)
    .style('fill', 'maroon')
    .style('border-radius', 1)
    .style('stroke', 'orange')