d3js | dorling map with force and voronoi

.block

license: mit

README.md

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

dorling-coordinates.json

{
"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]
}

dorling-countries.json

[
{
      "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
    }
]

index.html

<!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>

thumbnail.png