examples/population-dot-density.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>eurostat-map.js</title>
    </head>

    <body>
        <svg id="map"></svg>
        <script src="https://unpkg.com/eurostat-map"></script>
        <script>
            eurostatmap
                .map('ch')
                .title('Population in Europe')
                .titleFill('#444')
                .width(800)
                .nutsLvl(1)
                .scale('60M')
                .classifMethod('threshold')
                .threshold([35, 50, 80, 100, 140, 180, 300, 500, 1300])
                // define dot density pattern
                .filtersDefinitionFun(
                    eurostatmap.getFillPatternDefinitionFun({
                        patternSize: 5,
                        shape: 'circle',
                        bckColor: 'white',
                        symbColor: 'black',
                    })
                )
                .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 })
                .nutsrgSelFillSty('darkblue')
                .cntrgFillStyle('white')
                .seaFillStyle('#e9e9e9')
                .coastalMarginColor('#777')
                .coastalMarginStdDev(10)
                .coastalMarginWidth(5)
                .graticuleStroke('#888')
                .tooltipShowFlags(false)
                .legend({
                    title: 'Density - inhab./km²',
                    labelDecNb: 0,
                    x: 560,
                    noData: false,
                })
                .build()
        </script>
    </body>
</html>