index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>Hexagons Test</title>
        <script src="http://d3js.org/d3.v3.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>
        <div id="hexMap"></div>
        <script type="text/javascript">
            var w = 960;
            var h = 500;
            var radius = 10;

            var data = [];

            data.push({
                hex: [0,0],
                id: "12"
            });
            data.push({
                hex: [0,1],
                id: "13"
            });
            data.push({
                hex: [-1,0],
                id: "14"
            });
            data.push({
                hex: [-1,1],
                id: "15"
            });
            data.push({
                hex: [-1,2],
                id: "12"

            });
            data.push({
                hex: [1,-1],
                id: "16"
            });
            data.push({
                hex: [1,-1],
                id: "17"
            });
            data.push({
                hex: [1,0],
                id: "18"
            });
            data.push({
                hex: [1,1],
                id: "19"
            });

            var svg = d3.select("#hexMap")
                .append("svg:svg")
                .attr("width", w)
                .attr("height", h)
                .attr("pointer-events", "all")
                .attr("id","topLevelSVG")
                .append("g")
                .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
                .append("g")
                .attr("id","topLevelGroup")
                .attr("transform", "translate(" + [w/2, h/2] + ")");

            update();

            function update() {
                var elem =  svg.selectAll("g topLevelGroup")
                    .data(data.map(function(d) { return (
                        {
                            hex: hex(hexToPixel(d.hex[0],d.hex[1],radius), radius*2),
                            id: d.id
                        });
                    }));

                var hexes = elem
	                .enter()
                    .append("g")
                    .attr("id",function(d) { return d.id; });
                hexes
                    .append("path")
                    .attr("d", function(d) { return "M" + d.hex.join("L") + "Z"; })
                    .on("click", click)
                    .on("mouseover", mouseover)
                    .on("mouseout", mouseout);

                var text = hexes.append("text")
                          .text(function(d){return d.id});
            }

            function 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 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]];
            };

            function hexToPixel(aQ,aR,radius){
            //  hZ = 2/3 * pY / radius;
            //  pX = sqrt(3) * radius * ( hZ/2 + hX );
            //  pX = - sqrt(3) * radius * ( hZ/2 + hY );
            //  hX = (sqrt(3)/3 * pX - pY/3 ) / radius;
            //  hY = -(sqrt(3)/3 * pX + pY/3 ) / radius;

                //convert form cube to axial coordinates

                var hX = aQ;
                var hZ = aR;
                var hY = -hX-hZ;

                var pX = - Math.sqrt(3) * radius * ( hZ/2 + hY );
                var pY = 3/2 * radius * hZ;
                return [pX,pY];
            }

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


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