D3 Examples - 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.
xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<title>D3 | Dorling map using force layout</title>
​
<meta charset="utf-8">
​
​
<!-- CSS  -->
<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>
<!-- END CSS -->
​
​
<body>
    <main class="clearfix p1 mb4 max-width-4 mx-auto">
​
        <div id="dorling-map" class="relative">
            <h1 class="message"></h1>
            <ul class="list-reset max-width-4 mx-auto pt2 absolute top-0 left-0 z2">
                <li class="js-info-1 h3"></li>
                <li class="js-info-2 h4"></li>
                <li class="js-info-3 h4"></li>
            </ul>
        </div>
​
    </main>
​
<!-- dependencies -->
<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>
​
<!-- d3 code -->
<script src="https://cdn.jsdelivr.net/gh/eesur/eesur-d3-dorlingmap/dist/thed3-bundle.js" charset="utf-8"></script>
​
<!-- render code -->
<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>
    