examples/population-change.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 src="../build/eurostatmap.js"></script> -->
        <!-- for eurostatmap.colorFun() -->
        <script src="https://d3js.org/d3-color.v2.min.js"></script>
        <script src="https://d3js.org/d3-interpolate.v2.min.js"></script>
        <script src="https://d3js.org/d3-scale-chromatic.v2.min.js"></script>

        <script>
            let height = window.innerHeight
            let m = eurostatmap
                .map('choropleth')
                .width(800)
                .title('Population change')
                .subtitle('Change per 1 000 persons, 2022')
                .subtitleFontSize(15)
                .nutsLevel(2)
                .stat({
                    eurostatDatasetCode: 'demo_r_gind3',
                    filters: { indic_de: 'GROWRT', time: 2022 },
                    unitText: '‰',
                })
                .colorFun(d3.interpolateRdBu)
                .classifMethod('threshold')
                .threshold([-15, -10, -6, -4, -2, 0, 2, 4, 6, 10, 15])
                .nutsbnStroke({ 0: 'white', 1: 'white', 2: 'white', 3: 'white' })
                .nutsbnStrokeWidth({ 0: 1, 1: 0.1, 2: 0.1, 3: 0.1, oth: 0, co: 0 })
                .seaFillStyle('white')
                .insets('default')
            // .frameStroke('none')
            // .drawCoastalMargin(false)
            // .drawGraticule(true)

            if (height > 800) {
                //m.insets("default") //show inset maps of overseas regions using the default styling
                m.legend({ x: 10, y: 115, title: '‰', decimals: 0 })
            } else {
                m.titleFontSize(12).subtitleFontSize(11).showSourceLink(false)
            }
            m.build()
        </script>
    </body>
</html>