Old school D3 from simpler times

All examples By author By category About

eesur

Full window Github gist

d3js | hexagon world map built from canvas map

Hexagonal world map, that draws based hexagons on the generated canvas map (comment out display: hidden, in css, to see the canvas rendering)

Reference sources:

Rendering a map as canvas
Hexbin Heightmap based from Heightmap

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body {
        background: #000;
    }
    canvas {
      display: none;
    }
</style>

<link href="//npmcdn.com/basscss@8.0.1/css/basscss.min.css" rel="stylesheet">

<link href="//s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css" rel="stylesheet">

<section id="vis"></section>

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//cdn.jsdelivr.net/gh/mbostock/7833311/raw/27d0f5623105fd8815e1a42b80cbd4d27d292d53/d3.hexbin.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js" charset="utf-8"></script>

<script src="script-compiled.js" charset="utf-8"></script>

<script>
    // call chart 
    let chart = hexmap();

// apply chart to DOM
    d3.select('#vis')
       .call(chart);
</script>

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body {
        background: #000;
    }
    canvas {
      display: none;
    }
</style>
<!-- https://www.basscss.com/ -->
<link href="//npmcdn.com/basscss@8.0.1/css/basscss.min.css" rel="stylesheet">
<!-- https://clrs.cc/ -->
<link href="//s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css" rel="stylesheet">
​
<section id="vis"></section>
​
<!-- dependencies -->
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//cdn.jsdelivr.net/gh/mbostock/7833311/raw/27d0f5623105fd8815e1a42b80cbd4d27d292d53/d3.hexbin.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js" charset="utf-8"></script>
<!-- d3 code -->
<script src="script-compiled.js" charset="utf-8"></script>
​
<script>
    // call chart 
    let chart = hexmap();
​
    // apply chart to DOM
    d3.select('#vis')
       .call(chart);
</script>
​
​
    

Updated missing url //rawgit.com/mbostock/7833311/raw/27d0f5623105fd8815e1a42b80cbd4d27d292d53/d3.hexbin.min.js to //cdn.jsdelivr.net/gh/mbostock/7833311/raw/27d0f5623105fd8815e1a42b80cbd4d27d292d53/d3.hexbin.min.js

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

https://rawgit.com/mbostock/7833311/raw/27d0f5623105fd8815e1a42b80cbd4d27d292d53/d3.hexbin.min.js

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

https://d3js.org/d3.geo.projection.v0.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js