d3js | us hex map

flashing heatmap (random data updating, every five seconds)—testing out the very useful and awesome tilegrams

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body { 
        font-family: Consolas, monaco, monospace;
        background: #130C0E;
        font-weight: 400;
        color: #fff;
    }
    .wrap {
        width: 960px;
        margin: 20px auto;
    }
    #state { 
        padding-left: 20px; 
        font-weight: normal;
        letter-spacing: 1px;
    }
    .border:hover {
        cursor: pointer;
        opacity: 0.7;
    }
    .state-label {
        fill: #fff;
        fill-opacity: .9;
        letter-spacing: 1px;
        font-size: 18px;
        font-weight: 600;
        text-anchor: middle;
        pointer-events: none;
    }
</style>

<body>

<section class="wrap">
    <header>
        <h2 id='state'>US states heatmap vis, rollover to see random data :)</h2>
    </header>
    <div id='vis'>
        <svg></svg>
    </div>
</section>

<script src="script-compiled.js"></script>

setInterval(function() {
        // make it dance
        render()
    }, 5000)

d3.select(self.frameElement).style('height', '650px');
</script>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.13.0/d3-legend.min.js

https://cdn.jsdelivr.net/lodash/4.16.6/lodash.min.js