Hexbins!

//Function to call when you mouseover a node
function mouseover(d) {
    var el = d3.select(this)
        .transition()
        .duration(10)
        .style("fill-opacity", 0.3);
}

//Mouseout function
function mouseout(d) {
    var el = d3.select(this)
        .transition()
        .duration(500)
        .style("fill-opacity", 1);
};

////////////////////////////////////////////////////////////////
var color = d3.scaleLinear()
    .domain([0, 200000])
    .range(["#FF9E97", "#115035"])

var panel = d3.select("#figure").append("svg")
    .attr("width", "100%" )
    .attr("height", "100%" )
    .append("g")
    // .attr("transform", "translate(30, 0)")

panel.append("rect")
    .attr("width", "100%")
    .attr("height", "100%")
    .style('opacity', 0.7)
    .style('fill', '#FF9E97');

////////////////////////////////////////////////////////////////   
//The number of columns and rows of the heatmap
var radius = 15;
var MapColumns = width / radius;
var MapRows = height / radius;
var hexbin = d3.hexbin().radius(radius);

var points = [];
for (var i = 0; i < MapRows; i++) {
    for (var j = 0; j < MapColumns; j++) {
        points.push([radius * j * 1.75, radius * i * 1.5]);
    }//for j
}//for i

panel.selectAll(".hex")
    .data(points)
    .enter().append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("class", "mesh")
    .attr("width", width)
    .attr("height", height);

panel.append("g")
    .attr("clip-path", "url(#clip)")
    .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, i) { return color(d.y * d.x); })
    .on("mouseover", mouseover)
    .on("mouseout", mouseout);

panel.append("rect")
    .attr("width", width)
    .attr("height", height)
    .style("stroke", "black")
    .style('fill', 'none');