hexagons map

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Hexagons Test</title>
    <script type="text/javascript" src="https://hperantunes01.appspot.com/static/js/d3/d3.min.js"></script>
    <script type="text/javascript" src="https://hperantunes01.appspot.com/static/js/d3/d3.behavior.min.js"></script>
    <style type="text/css">
svg {
    border: solid 1px #aaa;
    background: #eee;
}

path {
    fill: lightsteelblue;
    stroke: #000;
    stroke-width: .5px;
}
    </style>
  </head>
  <body>
    <script type="text/javascript">

var w = 960,
    h = 500,
    padding = 50;
    
var diameter = 50;

var svg = d3.select("body")
    .append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .attr("pointer-events", "all");

svg.call(d3.behavior.zoom().on("zoom", move));
    
svg.append("svg:line")
    .attr("stroke", "red")
    .attr("x1", 0 + padding)
    .attr("y1", 0 + padding)
    .attr("x2", w - padding)
    .attr("y2", 0 + padding);
    
svg.append("svg:line")
    .attr("stroke", "red")
    .attr("x1", 0 + padding)
    .attr("y1", h - padding)
    .attr("x2", w - padding)
    .attr("y2", h - padding);

svg.append("svg:line")
    .attr("stroke", "red")
    .attr("x1", 0 + padding)
    .attr("y1", 0 + padding)
    .attr("x2", 0 + padding)
    .attr("y2", h - padding);

svg.append("svg:line")
    .attr("stroke", "red")
    .attr("x1", w - padding)
    .attr("y1", 0 + padding)
    .attr("x2", w - padding)
    .attr("y2", h - padding);
    
render();

function mouseover(d, i) {
    d3.select(this)
        .style("fill", "red");
}

function mouseout(d, i) {
    d3.select(this)
        .style("fill", "lightsteelblue");
}

function click(d, i) {
    d.customName = Date.now();
    console.log("click", d, i);
    d3.select(this)
        .style("fill", "yellow");
}

function removeClicked() {
    svg.selectAll("path")
        .filter(function(d) { 
            return d.customName != 'test'; 
        })
        .remove();
}

function render() {
    var grid = svg.selectAll("path")
        .data(
            data.filter(function(d) { return d.visible; }), 
            function(d) { return d.id; }
        );

grid.enter()
        .sort(function(a, b) { return a.id - b.id; })
        .append("svg:path")
        .attr("d", function(d) {
            return "M" + hex(d.centroid, diameter).join("L") + "Z";
        })
        .on("mouseover", mouseover)
        .on("mouseout", mouseout)
        .on("click", click);
    
    grid.exit().remove();
}

</script>
  </body>
</html>

Modified http://hperantunes01.appspot.com/static/js/d3/d3.min.js to a secure url

Modified http://hperantunes01.appspot.com/static/js/d3/d3.behavior.min.js to a secure url

https://hperantunes01.appspot.com/static/js/d3/d3.min.js

https://hperantunes01.appspot.com/static/js/d3/d3.behavior.min.js