D3 Examples - d3js | us hex map

xxxxxxxxxx
 
<!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>
​
<script type='text/javascript' src='//d3js.org/d3.v4.min.js'></script>
<script type='text/javascript' src='//d3js.org/topojson.v1.min.js'></script>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/d3-legend/2.13.0/d3-legend.min.js'></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/lodash/4.16.6/lodash.min.js'></script>
<script type='text/javascript' src='stateCodes.js'></script>
​
<body>
​
​
<!-- START required DOM structure -->
<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>
​
<!-- d3 code -->
<script src="script-compiled.js"></script>
​
<script>
    render()
​
    setInterval(function() {
        // make it dance
        render()
    }, 5000)
​
    d3.select(self.frameElement).style('height', '650px');
</script>   
​
​
​
    