Gave up on trying to roll my own hex map.
Shapes from https://github.com/EvanOdell/parlitools
Converted with http://mapshaper.org/
xxxxxxxxxx
<meta charset="utf-8">
<style>
body{
background: black;
}
div.tooltip {
top: -1000px;
position: absolute;
padding: 10px;
background: rgba(255, 255, 255, .90);
border: 1px solid lightgray;
pointer-events: none;
}
.tooltip-hidden{
opacity: 0;
}
</style>
<body>
<div id='graph'></div>
<div class='tooltip'></div>
</body>
<script src="d3v4.js"></script>
<script src="lodash.js"></script>
<script src="hex-bin.js"></script>
<script src='script.js'></script>