Population change map of Europe, by NUTS 3 region.
This is an example based on eurostat-map.js library, Nuts2json, d3js and Eurostat statistical data API.
license: EUPL-1.1 | |
height: 780 | |
scrolling: no | |
border: no |
Population change map of Europe, by NUTS 3 region.
This is an example based on eurostat-map.js library, Nuts2json, d3js and Eurostat statistical data API.
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://d3js.org/d3-queue.v3.min.js"></script> | |
<script src="https://d3js.org/topojson.v1.min.js"></script> | |
<script src="https://d3js.org/d3-color.v1.min.js"></script> | |
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script> | |
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.3/json-stat.js"></script> | |
<script src="https://cdn.jsdelivr.net/gh/eurostat/eurostat.js@0.9.15/js/eurostat-lib.js"></script> | |
<script src="https://cdn.jsdelivr.net/gh/eurostat/eurostat.js@0.9.15/js/eurostat-map.js"></script> | |
<script src="https://cdn.jsdelivr.net/gh/eurostat/eurostat.js@0.9.15/js/eurostat-tooltip.js"></script> | |
<svg id="map"></svg> | |
<script> | |
//load parameters from URL | |
var opts = EstLib.getURLParameters(); | |
EstLib.map() | |
.scale("60M") | |
.width(900) | |
.nutsLvl(3).datasetCode("demo_r_gind3").filters({ indic_de:"GROWRT", time : 2016 }) | |
.colorFun(d3.interpolateRdYlBu) | |
.classifMethod("threshold") | |
.threshold([-15,-10,-6,-4,-2,0,2,4,6,10,15]) | |
.drawCoastalMargin(false) | |
.seaFillStyle("#333") | |
.nutsbnStroke({0:"#777",1:"#777",2:"#777",3:"#777",oth:"#444",co:"none"}) | |
.cntbnStroke({def:"#777", co:"none"}) | |
.drawGraticule(false) | |
.unitText("‰") | |
.tooltipShowFlags("long") | |
.bottomTextFill("white") | |
.legendTitleText("Population change from 2015 to 2016 (in ‰)") | |
.legendBoxWidth(200) | |
.legendBoxHeight(320) | |
.legendLabelDecNb(0) | |
.legendLabelDelimiter("to") | |
.set(opts) | |
.build(); | |
</script> |