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.
<!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.rawgit.com/eesur/eesur-d3-dorlingmap/master/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>{
"ALB":[20,41],
"DZA":[3,28],
"ASM":[-170,-14.3333],
"AND":[1.6,42.5],
"AGO":[18.5,-12.5],
"AIA":[-63.1667,18.25],
"ATA":[0,-90],
"ATG":[-61.8,17.05],
"ARG":[-64,-34],
"ARM":[45,40],
"ABW":[-69.9667,12.5],
"AUS":[133,-27],
"AUT":[13.3333,47.3333],
"AZE":[47.5,40.5],
"BHS":[-76,24.25],
"BHR":[50.55,26],
"BGD":[90,24],
"BRB":[-59.5333,13.1667],
"BLR":[28,53],
"BEL":[4,50.8333],
"BLZ":[-88.75,17.25],
"BEN":[2.25,9.5],
"BMU":[-64.75,32.3333],
"BTN":[90.5,27.5],
"BOL":[-65,-17],
"BIH":[18,44],
"BWA":[24,-22],
"BVT":[3.4,-54.4333],
"BRA":[-55,-10],
"IOT":[71.5,-6],
"BRN":[114.6667,4.5],
"BGR":[25,43],
"BFA":[-2,13],
"BDI":[30,-3.5],
"KHM":[105,13],
"CMR":[12,6],
"CAN":[-95,60],
"CPV":[-24,16],
"CYM":[-80.5,19.5],
"CAF":[21,7],
"TCD":[19,15],
"CHL":[-71,-30],
"CHN":[105,35],
"CXR":[105.6667,-10.5],
"CCK":[96.8333,-12.5],
"COL":[-72,4],
"COM":[44.25,-12.1667],
"COG":[15,-1],
"COD":[25,0],
"COK":[-159.7667,-21.2333],
"CRI":[-84,10],
"CIV":[-5,8],
"HRV":[15.5,45.1667],
"CUB":[-80,21.5],
"CYP":[33,35],
"CZE":[15.5,49.75],
"DNK":[10,56],
"DJI":[43,11.5],
"DMA":[-61.3333,15.4167],
"DOM":[-70.6667,19],
"ECU":[-77.5,-2],
"EGY":[30,27],
"SLV":[-88.9167,13.8333],
"GNQ":[10,2],
"ERI":[39,15],
"EST":[26,59],
"ETH":[38,8],
"FLK":[-59,-51.75],
"FRO":[-7,62],
"FJI":[175,-18],
"FIN":[26,64],
"FRA":[2,46],
"GUF":[-53,4],
"PYF":[-140,-15],
"ATF":[67,-43],
"GAB":[11.75,-1],
"GMB":[-16.5667,13.4667],
"GEO":[43.5,42],
"DEU":[9,51],
"GHA":[-2,8],
"GIB":[-5.3667,36.1833],
"GRC":[22,39],
"GRL":[-40,72],
"GRD":[-61.6667,12.1167],
"GLP":[-61.5833,16.25],
"GUM":[144.7833,13.4667],
"GTM":[-90.25,15.5],
"GGY":[-2.56,49.5],
"GIN":[-10,11],
"GNB":[-15,12],
"GUY":[-59,5],
"HTI":[-72.4167,19],
"HMD":[72.5167,-53.1],
"VAT":[12.45,41.9],
"HND":[-86.5,15],
"HKG":[114.1667,22.25],
"HUN":[20,47],
"ISL":[-18,65],
"IND":[77,20],
"IDN":[120,-5],
"IRN":[53,32],
"IRQ":[44,33],
"IRL":[-8,53],
"IMN":[-4.55,54.23],
"ISR":[34.75,31.5],
"ITA":[12.8333,42.8333],
"JAM":[-77.5,18.25],
"JPN":[138,36],
"JEY":[-2.13,49.21],
"JOR":[36,31],
"KAZ":[68,48],
"KEN":[38,1],
"KIR":[173,1.4167],
"PRK":[127,40],
"KOR":[127.5,37],
"KWT":[47.6581,29.3375],
"KGZ":[75,41],
"LAO":[105,18],
"LVA":[25,57],
"LBN":[35.8333,33.8333],
"LSO":[28.5,-29.5],
"LBR":[-9.5,6.5],
"LBY":[17,25],
"LIE":[9.5333,47.1667],
"LTU":[24,56],
"LUX":[6.1667,49.75],
"MAC":[113.55,22.1667],
"MKD":[22,41.8333],
"MDG":[47,-20],
"MWI":[34,-13.5],
"MYS":[112.5,2.5],
"MDV":[73,3.25],
"MLI":[-4,17],
"MLT":[14.5833,35.8333],
"MHL":[168,9],
"MTQ":[-61,14.6667],
"MRT":[-12,20],
"MUS":[57.55,-20.2833],
"MYT":[45.1667,-12.8333],
"MEX":[-102,23],
"FSM":[158.25,6.9167],
"MDA":[29,47],
"MCO":[7.4,43.7333],
"MNG":[105,46],
"MNE":[19,42],
"MSR":[-62.2,16.75],
"MAR":[-5,32],
"MOZ":[35,-18.25],
"MMR":[98,22],
"NAM":[17,-22],
"NRU":[166.9167,-0.5333],
"NPL":[84,28],
"NLD":[5.75,52.5],
"ANT":[-68.75,12.25],
"NCL":[165.5,-21.5],
"NZL":[174,-41],
"NIC":[-85,13],
"NER":[8,16],
"NGA":[8,10],
"NIU":[-169.8667,-19.0333],
"NFK":[167.95,-29.0333],
"MNP":[145.75,15.2],
"NOR":[10,62],
"OMN":[57,21],
"PAK":[70,30],
"PLW":[134.5,7.5],
"PSE":[35.25,32],
"PAN":[-80,9],
"PNG":[147,-6],
"PRY":[-58,-23],
"PER":[-76,-10],
"PHL":[122,13],
"PCN":[-127.4,-24.7],
"POL":[20,52],
"PRT":[-8,39.5],
"PRI":[-66.5,18.25],
"QAT":[51.25,25.5],
"REU":[55.6,-21.1],
"ROU":[25,46],
"RUS":[100,60],
"RWA":[30,-2],
"SHN":[-5.7,-15.9333],
"KNA":[-62.75,17.3333],
"LCA":[-61.1333,13.8833],
"SPM":[-56.3333,46.8333],
"VCT":[-61.2,13.25],
"WSM":[-172.3333,-13.5833],
"SMR":[12.4167,43.7667],
"STP":[7,1],
"SAU":[45,25],
"SEN":[-14,14],
"SRB":[21,44],
"SYC":[55.6667,-4.5833],
"SLE":[-11.5,8.5],
"SGP":[103.8,1.3667],
"SVK":[19.5,48.6667],
"SVN":[15,46],
"SLB":[159,-8],
"SOM":[49,10],
"ZAF":[24,-29],
"SGS":[-37,-54.5],
"ESP":[-4,40],
"LKA":[81,7],
"SDN":[30,15],
"SUR":[-56,4],
"SJM":[20,78],
"SWZ":[31.5,-26.5],
"SWE":[15,62],
"CHE":[8,47],
"SYR":[38,35],
"TWN":[121,23.5],
"TJK":[71,39],
"TZA":[35,-6],
"THA":[100,15],
"TLS":[125.5167,-8.55],
"TGO":[1.1667,8],
"TKL":[-172,-9],
"TON":[-175,-20],
"TTO":[-61,11],
"TUN":[9,34],
"TUR":[35,39],
"TKM":[60,40],
"TCA":[-71.5833,21.75],
"TUV":[178,-8],
"UGA":[32,1],
"UKR":[32,49],
"ARE":[54,24],
"GBR":[-2,54],
"USA":[-97,38],
"UMI":[166.6,19.2833],
"URY":[-56,-33],
"UZB":[64,41],
"VUT":[167,-16],
"VEN":[-66,8],
"VNM":[106,16],
"VGB":[-64.5,18.5],
"VIR":[-64.8333,18.3333],
"WLF":[-176.2,-13.3],
"ESH":[-13,24.5],
"YEM":[48,15],
"ZMB":[30,-15],
"ZWE":[30,-20],
"AFG":[65,33]
}[
{
"country" : "China",
"alias" : "CHN",
"continent" : "Asia",
"value" : 1484040,
"pct" : 0.20039608217314242,
"area_value" : 200,
"range_value": 60
},
{
"country" : "United States of America",
"alias" : "USA",
"continent" : "North America",
"value" : 1265064,
"pct" : 0.17082684381706978,
"area_value" : 170,
"range_value": 600
},
{
"country" : "Japan",
"alias" : "JPN",
"continent" : "Asia",
"value" : 660489,
"pct" : 0.08918857168166401,
"area_value" : 89,
"range_value": 200
},
{
"country" : "Russian Federation",
"alias" : "RUS",
"continent" : "Europe",
"value" : 440581,
"pct" : 0.05949348149640526,
"area_value" : 59,
"range_value": 90
},
{
"country" : "Germany",
"alias" : "DEU",
"continent" : "Europe",
"value" : 360310,
"pct" : 0.048654155122372,
"area_value" : 48,
"range_value": 300
},
{
"country" : "Republic of Korea",
"alias" : "KOR",
"continent" : "Asia",
"value" : 321842,
"pct" : 0.04345966138296036,
"area_value" : 43,
"range_value": 400
},
{
"country" : "France",
"alias" : "FRA",
"continent" : "Europe",
"value" : 265177,
"pct" : 0.03580795118893519,
"area_value" : 35,
"range_value": 200
},
{
"country" : "United Kingdom of Great Britain and Northern Ireland",
"alias" : "GBR",
"continent" : "Europe",
"value" : 259347,
"pct" : 0.03502070208576451,
"area_value" : 35,
"range_value": 60
},
{
"country" : "India",
"alias" : "IND",
"continent" : "Asia",
"value" : 192819,
"pct" : 0.026037150055620566,
"area_value" : 26,
"range_value": 600
},
{
"country" : "Canada",
"alias" : "CAN",
"continent" : "North America",
"value" : 156550,
"pct" : 0.0211395964153294,
"area_value" : 21,
"range_value": 300
},
{
"country" : "Brazil",
"alias" : "BRA",
"continent" : "South America",
"value" : 138653,
"pct" : 0.01872289020616204,
"area_value" : 18,
"range_value": 100
},
{
"country" : "Spain",
"alias" : "ESP",
"continent" : "Europe",
"value" : 123225,
"pct" : 0.016639583317016707,
"area_value" : 16,
"range_value": 900
},
{
"country" : "Italy",
"alias" : "ITA",
"continent" : "Europe",
"value" : 117973,
"pct" : 0.015930383953405656,
"area_value" : 15,
"range_value": 89
},
{
"country" : "Australia",
"alias" : "AUS",
"continent" : "Oceania",
"value" : 92649,
"pct" : 0.01251077910114247,
"area_value" : 12,
"range_value": 50
},
{
"country" : "Turkey",
"alias" : "TUR",
"continent" : "Asia",
"value" : 89075,
"pct" : 0.012028167043727028,
"area_value" : 12,
"range_value": 800
},
{
"country" : "Netherlands",
"alias" : "NLD",
"continent" : "Europe",
"value" : 72325,
"pct" : 0.009766345006315548,
"area_value" : 9,
"range_value": 600
},
{
"country" : "Poland",
"alias" : "POL",
"continent" : "Europe",
"value" : 71472,
"pct" : 0.009651160875096921,
"area_value" : 9,
"range_value": 430
},
{
"country" : "Israel",
"alias" : "ISR",
"continent" : "Asia",
"value" : 63728,
"pct" : 0.008605456405979636,
"area_value" : 8,
"range_value": 600
},
{
"country" : "Sweden",
"alias" : "SWE",
"continent" : "Europe",
"value" : 62294,
"pct" : 0.008411817432746917,
"area_value" : 8,
"range_value": 300
},
{
"country" : "Iran (Islamic Republic of)",
"alias" : "IRN",
"continent" : "Asia",
"value" : 54813,
"pct" : 0.007401626945470779,
"area_value" : 7,
"range_value": 450
},
{
"country" : "Ukraine",
"alias" : "UKR",
"continent" : "Europe",
"value" : 52626,
"pct" : 0.007106307256168157,
"area_value" : 7,
"range_value": 60,
"range_value": 783
},
{
"country" : "Malaysia",
"alias" : "MYS",
"continent" : "Asia",
"value" : 52052,
"pct" : 0.0070287976532144745,
"area_value" : 7,
"range_value": 540
},
{
"country" : "Argentina",
"alias" : "ARG",
"continent" : "South America",
"value" : 51598,
"pct" : 0.006967492148439261,
"area_value" : 6,
"range_value": 190
},
{
"country" : "Egypt",
"alias" : "EGY",
"continent" : "Africa",
"value" : 47652,
"pct" : 0.006434647386670563,
"area_value" : 6,
"range_value": 600
},
{
"country" : "Mexico",
"alias" : "MEX",
"continent" : "North America",
"value" : 46125,
"pct" : 0.006228450237349528,
"area_value" : 6,
"range_value": 350
},
{
"country" : "Belgium",
"alias" : "BEL",
"continent" : "Europe",
"value" : 44649,
"pct" : 0.0060291398297543436,
"area_value" : 6,
"range_value": 240
},
{
"country" : "Portugal",
"alias" : "PRT",
"continent" : "Europe",
"value" : 43321,
"pct" : 0.005849814476579272,
"area_value" : 5,
"range_value": 300
},
{
"country" : "Denmark",
"alias" : "DNK",
"continent" : "Europe",
"value" : 40858,
"pct" : 0.005517225361466168,
"area_value" : 5,
"range_value": 600
},
{
"country" : "Austria",
"alias" : "AUT",
"continent" : "Europe",
"value" : 39923,
"pct" : 0.005390968429825587,
"area_value" : 5,
"range_value": 60
},
{
"country" : "Finland",
"alias" : "FIN",
"continent" : "Europe",
"value" : 39196,
"pct" : 0.0052927986016943545,
"area_value" : 5,
"range_value": 120
},
{
"country" : "Thailand",
"alias" : "THA",
"continent" : "Asia",
"value" : 36360,
"pct" : 0.004909841748076506,
"area_value" : 4,
"range_value": 120
},
{
"country" : "Switzerland",
"alias" : "CHE",
"continent" : "Europe",
"value" : 35950,
"pct" : 0.004854477745966732,
"area_value" : 4,
"range_value": 120
},
{
"country" : "Czech Republic",
"alias" : "CZE",
"continent" : "Europe",
"value" : 34271,
"pct" : 0.004627755405619635,
"area_value" : 4,
"range_value": 120
},
{
"country" : "Singapore",
"alias" : "SGP",
"continent" : "Asia",
"value" : 34141,
"pct" : 0.004610200965926292,
"area_value" : 4,
"range_value": 120
},
{
"country" : "Pakistan",
"alias" : "PAK",
"continent" : "Asia",
"value" : 30244,
"pct" : 0.004083972877580469,
"area_value" : 4,
"range_value": 120
},
{
"country" : "Greece",
"alias" : "GRC",
"continent" : "Europe",
"value" : 29055,
"pct" : 0.003923417271462126,
"area_value" : 3,
"range_value": 120
},
{
"country" : "Norway",
"alias" : "NOR",
"continent" : "Europe",
"value" : 28343,
"pct" : 0.0038272729556032017,
"area_value" : 3,
"range_value": 120
},
{
"country" : "Morocco",
"alias" : "MAR",
"continent" : "Africa",
"value" : 27714,
"pct" : 0.00374233647431772,
"area_value" : 3,
"range_value": 120
},
{
"country" : "Hungary",
"alias" : "HUN",
"continent" : "Europe",
"value" : 25038,
"pct" : 0.0033809850849378315,
"area_value" : 3,
"range_value": 120
},
{
"country" : "South Africa",
"alias" : "ZAF",
"continent" : "Africa",
"value" : 21383,
"pct" : 0.002887435261251923,
"area_value" : 2,
"range_value": 620
},
{
"country" : "Indonesia",
"alias" : "IND",
"continent" : "Asia",
"value" : 21349,
"pct" : 0.0028828441001013567,
"area_value" : 2,
"range_value": 420
},
{
"country" : "China, Hong Kong Special Administrative Region",
"alias" : "HKG",
"continent" : "Asia",
"value" : 21236,
"pct" : 0.002867585240983297,
"area_value" : 2,
"range_value": 120
},
{
"country" : "Romania",
"alias" : "ROU",
"continent" : "Europe",
"value" : 18704,
"pct" : 0.0025256787694175734,
"area_value" : 2,
"range_value": 120
},
{
"country" : "New Zealand",
"alias" : "NZL",
"continent" : "Oceania",
"value" : 16300,
"pct" : 0.002201056669242218,
"area_value" : 2,
"range_value": 120
},
{
"country" : "Ireland",
"alias" : "IRL",
"continent" : "Europe",
"value" : 15732,
"pct" : 0.0021243572711974585,
"area_value" : 2,
"range_value": 120
},
{
"country" : "Tunisia",
"alias" : "TUN",
"continent" : "Africa",
"value" : 15159,
"pct" : 0.0020469827023952628,
"area_value" : 2,
"range_value": 120
},
{
"country" : "Uzbekistan",
"alias" : "UZB",
"continent" : "Asia",
"value" : 15029,
"pct" : 0.00202942826270192,
"area_value" : 2,
"range_value": 120
},
{
"country" : "Slovakia",
"alias" : "SVK",
"continent" : "Europe",
"value" : 14727,
"pct" : 0.0019886479489527697,
"area_value" : 1,
"range_value": 120
},
{
"country" : "Iraq",
"alias" : "IRQ",
"continent" : "Asia",
"value" : 13559,
"pct" : 0.0018309280600156586,
"area_value" : 1,
"range_value": 120
},
{
"country" : "Kazakhstan",
"alias" : "KAZ",
"continent" : "Asia",
"value" : 12552,
"pct" : 0.001694948669467995,
"area_value" : 1,
"range_value": 120
},
{
"country" : "Serbia",
"alias" : "SRB",
"continent" : "Europe",
"value" : 12342,
"pct" : 0.0016665914976556721,
"area_value" : 1,
"range_value": 120
},
{
"country" : "Bulgaria",
"alias" : "BGR",
"continent" : "Europe",
"value" : 12275,
"pct" : 0.0016575442095060262,
"area_value" : 1,
"range_value": 120
},
{
"country" : "Viet Nam",
"alias" : "VNM",
"continent" : "Asia",
"value" : 9328,
"pct" : 0.0012595985650730927,
"area_value" : 1,
"range_value": 120
},
{
"country" : "Kenya",
"alias" : "KEN",
"continent" : "Africa",
"value" : 9305,
"pct" : 0.0012564927795888857,
"area_value" : 1,
"range_value": 120
},
{
"country" : "Jordan",
"alias" : "JOR",
"continent" : "Asia",
"value" : 9090,
"pct" : 0.0012274604370191265,
"area_value" : 1,
"range_value": 120
},
{
"country" : "Slovenia",
"alias" : "SVN",
"continent" : "Europe",
"value" : 8707,
"pct" : 0.0011757423569995088,
"area_value" : 1,
"range_value": 120
},
{
"country" : "Venezuela (Bolivarian Republic of)",
"alias" : "VEN",
"continent" : "South America",
"value" : 8686,
"pct" : 0.0011729066398182765,
"area_value" : 1,
"range_value": 120
},
{
"country" : "Lithuania",
"alias" : "LTU",
"continent" : "Europe",
"value" : 8557,
"pct" : 0.001155487234276421,
"area_value" : 1,
"range_value": 120
},
{
"country" : "Colombia",
"alias" : "COL",
"continent" : "South America",
"value" : 7702,
"pct" : 0.0010400330347548198,
"area_value" : 1,
"range_value": 120
}
]