examples/spain.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>

    <body>
        <svg id="map"></svg>
        <script src="https://unpkg.com/eurostat-map"></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>
            const map = eurostatmap
                .map('choropleth', {
                    title: 'Unemployment in Spain',
                    subtitle: '2023',
                    width: 800,
                    nutsLevel: 2,
                    stat: {
                        eurostatDatasetCode: 'lfst_r_lfu3rt',
                        filters: { age: 'Y20-64', sex: 'T', unit: 'PC', time: '2023' },
                        unitText: '%',
                    },
                    titleFill: '#333',
                    scale: '10M',
                    position: { x: 3100000, y: 1970000, z: 1900 },
                    labelling: true,
                    labelsToShow: ['values'],
                    labelShadow: ['values'],
                    //classifMethod: "equinter", clnb: 15,
                    classifMethod: 'threshold',
                    threshold: [6, 8, 10, 12, 14, 16, 18, 20, 21],
                    colorFun: d3.interpolateBlues,
                    nutsbnStroke: { 0: '#555', 1: '#777', 2: '#777', 3: '#777', oth: '#444', co: '#1f78b4' },
                    nutsbnStrokeWidth: { 0: 2.5, 1: 1.5, 2: 1.5, 3: 0.2, oth: 1, co: 1 },
                    seaFillStyle: 'white',
                    coastalMarginColor: '#bbb',
                    drawGraticule: false,
                    insets: [
                        {
                            geo: 'IC',
                            pixSize: 2900,
                            width: 200,
                            height: 90,
                            title: 'Canary islands',
                            titleFontSize: 12,
                            titleFontWeight: '',
                            frameStrokeWidth: 1,
                            frameStroke: 'black',
                        },
                    ],
                    insetBoxPosition: [10, 550],
                    legend: { decimals: 1, x: 5, y: 60, boxOpacity: 0, boxPadding: 7, title: 'Rate (%)', noData: false },
                    callback: function () {
                        //set title with date
                        //map.title(map.title() + ' in ' + map.getTime())
                    },
                })
                .build()
        </script>
    </body>
</html>