d3js | dorling map with force and voronoi

dorling map with force layout and voronoi grid

Chart maps countries utilising longitude and latitude co-ordinates applied with a force network. Voronoi grid applied to improve the chart's interactive experience in selecting countries and prevent jumping/flashing. Note: Grid is invisible in production.

View code on gitHub repo
Based on Aaron Bycoffe’s Block

forked from eesur's block: d3js | dorling map with force and voronoi

<!DOCTYPE html>
<html>
<head>
<title>D3 | Dorling map using force layout</title>

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<link href="https://npmcdn.com/basscss@8.0.1/css/basscss.min.css" rel="stylesheet">
<style>
    body {
        font-family: "Open Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: 500;
        line-height: 1.5;
        background-color: #ebebeb;
    }
    #dorling-map {
        width: 100%;
        height: 100%;
    }
/*// uncomment css to highlight continents */
/*    circle {
        stroke-width: 1;
        stroke: #eee;
    }*/
/*    circle.NorthAmerica {
        fill: #990000;
    }
    circle.SouthAmerica {
        fill: #fdd49e;
    }
    circle.Europe {
        fill: #fdbb84;
    }
    circle.Asia {
        fill: #fc8d59;
    }
    circle.Africa {
        fill: #e34a33;
    }
    circle.Oceania {
        fill: #b30000;
    }*/
    text {
      stroke: none;
      fill: #5c656e;
      font: 10px Monaco, 'Courier New', Courier, monospace;
    }
    #dorling-map text {
        font-weight: 600;
        font-size: 11px;
        letter-spacing: 1px;
        pointer-events: none;
        text-anchor: middle;
    }
    #dorling-map text {
        fill: #fff;
    }
    .legend {
        font-size: 12px;
        font-family: sans-serif;
      }

.legend path,
    .legend line {
        fill: none;
        stroke: #454545;
        shape-rendering: crispEdges;
        opacity: 1;
    }

.circle-legend line {
        stroke: #454545;
        shape-rendering: crispEdges;
    }

.circle-legend circle {
        stroke: #ccc;
        stroke-dasharray: 4, 2;
        fill: none;
    }
    #dorling-map .circle-legend text, #dorling-map .legend-gradient text{
        fill: #454545;
    }
    .axis path,
    .axis tick,
    .axis line {
        fill: none;
        stroke: #ccc;
    }

.axis text {
        font-size: 12px;
        fill: #AAAAAA;
        font-weight: 400;
    }
</style>

</main>

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js" charset="utf-8"></script>
<script src="https://d3js.org/d3-queue.v3.min.js"></script>

<script src="https://cdn.jsdelivr.net/gh/eesur/eesur-d3-dorlingmap/dist/thed3-bundle.js" charset="utf-8"></script>

<script>
    var chart = EESUR.initDorling()
        .id('#dorling-map')
        .keyCircleArea('area_value')
        .keyCircleColour('range_value') 
        .colourRange(['#deebf7','#9ecae1','#3182bd']) //optional
        .coordinatesData('dorling-coordinates.json')
        .dataJson('dorling-countries.json')
        // .svgWidth(800) // optional
        // .svgHeight(800) // optional
        .dev(true); //show the Voronoi grid

chart.render();

d3.select(self.frameElement).style('height', '800px');

</script>

</body>
</html>

Updated missing url https://cdn.rawgit.com/eesur/eesur-d3-dorlingmap/master/dist/thed3-bundle.js to https://cdn.jsdelivr.net/gh/eesur/eesur-d3-dorlingmap/dist/thed3-bundle.js

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

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

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

https://cdn.rawgit.com/eesur/eesur-d3-dorlingmap/master/dist/thed3-bundle.js