hexagons test

<!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://cdn.jsdelivr.net/npm/d3@12.10.3/d3.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/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,
    p = 50;
    
var diameter = 50;

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

update();

// yeah, I'll use ticks later...
svg.append("svg:line")
    .attr("stroke", "red")
    .attr("x1", 0 + p)
    .attr("y1", 0 + p)
    .attr("x2", w - p)
    .attr("y2", 0 + p);
      
svg.append("svg:line")
    .attr("stroke", "red")
    .attr("x1", 0 + p)
    .attr("y1", h - p)
    .attr("x2", w - p)
    .attr("y2", h - p);
      
svg.append("svg:line")
    .attr("stroke", "red")
    .attr("x1", 0 + p)
    .attr("y1", 0 + p)
    .attr("x2", 0 + p)
    .attr("y2", h - p);
      
svg.append("svg:line")
    .attr("stroke", "red")
    .attr("x1", w - p)
    .attr("y1", 0 + p)
    .attr("x2", w - p)
    .attr("y2", h - p);

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

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

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

function move() {
    svg.selectAll("path")
        .attr("transform",
            "translate(" + d3.event.translate + ")"
            + "scale(" + d3.event.scale + ")");
}

function hex(center, diameter, tilted) {
    if (center == null || center.length != 2) throw new Error("center must be an array [x, y]");
    if (diameter == null) diameter = 0;
    if (tilted == null) tilted = false;
    var a = diameter / 2, 
        b = (Math.sqrt(3) * a) / 2,
        x = center[0],
        y = center[1];
    return tilted ? 
        [[x - a / 2, y - b], [x - a, y], [x - a / 2, y + b], [x + a / 2, y + b], [x + a, y], [x + a / 2, y - b]] : 
        [[x - b, y - a / 2], [x - b, y + a / 2], [x, y + a], [x + b, y + a / 2], [x + b, y - a / 2], [x, y - a]];
};

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

Modified http://mbostock.github.com/d3/d3.min.js to a secure url

Modified http://mbostock.github.com/d3/d3.behavior.min.js to a secure url

https://mbostock.github.com/d3/d3.min.js

https://mbostock.github.com/d3/d3.behavior.min.js