Dot pattern map

.block

license: EUPL-1.1
height: 780
scrolling: no
border: no

README.md

Population density map with dot pattern.

This is an example based on eurostat-map.js library, Nuts2json, d3js and Eurostat statistical data API.

index.html

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

thumbnail.png