Population density map with dot pattern.
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 density map with dot pattern.
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://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(); | |
//make map | |
EstLib.map() | |
.width(900) | |
.scale("60M") | |
.datasetCode("demo_r_d3dens") | |
.filters({ time : opts.time || 2016 }) | |
.classifMethod("threshold").threshold([35,50,80,100,140,180,300,500,1300]) | |
.filtersDefinitionFun(EstLib.getFillPatternDefinitionFun( { patternSize: 5, shape: "circle", bckColor: "white", symbColor: "black" } )) | |
.classToFillStyleCH(EstLib.getFillPatternLegend()) | |
.nutsbnStroke( {0:"#777", 1:"#777", 2:"#777", 3:"#777", oth:"#444", co:"#777"} ) | |
.nutsbnStrokeWidth({0:1, 1:0.2, 2:0.2, 3:0.2, oth:1, co:1}) | |
.nutsrgSelectionFillStyle("darkblue") | |
.cntrgFillStyle("white") | |
.cntbnStroke({def:"#777", co:"white"}) | |
.seaFillStyle("#e9e9e9") | |
.coastalMarginColor("#777") | |
.coastalMarginStdDev(10) | |
.coastalMarginWidth(5) | |
.graticuleStroke("#888") | |
.unitText("people/km²") | |
.tooltipShowFlags(false) | |
.legendTitleText("Population density (people/km²)") | |
.legendLabelDecNb(0) | |
.legendBoxHeight(260) | |
.legendBoxWidth(190) | |
.set(opts) | |
.build(); | |
</script> |