examples/prop-symbols.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>

        <!-- for formatting legend labels -->
        <script src="https://d3js.org/d3-format.v2.min.js"></script>

        <script>
            let euSVG = `<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
  <circle cx="10" cy="10" r="8" stroke="black" stroke-width="1"  />
  <text x="50%" y="50%" text-anchor="middle" stroke="black" stroke-width="0px" dy=".3em" font-size="8" font-family="Arial" fill="black">€</text>
</svg>


`

            //set legend labels locale
            d3.formatDefaultLocale({
                decimal: ',',
                thousands: ' ',
                grouping: [3],
                currency: ['', '€'],
            })
            eurostatmap
                .map('ps')
                .nutsLevel(0)
                .width(800)
                //.title('Gross domestic product (GDP) across Europe')
                //.subtitle('Total GDP (size) and GDP per inhabitant (color)')
                .zoomExtent([1, 2])
                //GDP per inhabitant
                .stat('color', {
                    eurostatDatasetCode: 'nama_10r_3gdp',
                    unitText: 'EUR/inhabitant',
                    filters: { unit: 'EUR_HAB', time: '2018' },
                })
                // total GDP
                .stat('size', {
                    eurostatDatasetCode: 'nama_10r_3gdp',
                    unitText: 'Million EUR',
                    filters: { unit: 'MIO_EUR', time: '2018' },
                })

                //prop symbols size & styling
                .psCustomSVG(euSVG) // Search https://materialdesignicons.com/ for examples and simply copy and paste the "d" string of the SVG here.
                .psMaxSize(4)
                .psMinSize(1) //minSize/maxsize for customPaths indicates scale() value, not pixel size
                .psFillOpacity(1)
                .psOffset({ x: -9, y: -10 })
                .psStroke('black')
                .psStrokeWidth(10)

                //data-driven colour configuration
                .psClassificationMethod('threshold')
                .psThreshold([10000, 20000, 30200, 40000, 50000])
                .psColors(['#E9ECF6', '#C1C9EB', '#93A2DC', '#677CD2', '#3C57B0', '#15246B'])

                //legend config
                .legend({
                    x: 570,
                    y: 20,
                    ascending: false,
                    boxPadding: 15,
                    sizeLegend: {
                        title: 'Total GDP (million EUR)',
                        cellNb: 3,
                        shapePadding: 0,
                        titlePadding: 50,
                        shapeOffset: { x: 0, y: -50 },
                        labelOffset: { x: 70, y: -40 },
                        labelFormatter: d3.format(',.2r'),
                    },
                    colorLegend: {
                        title: 'GDP per inhabitant (EUR)',
                        labelFormatter: d3.format(',.2r'),
                    },
                    legendSpacing: 0,
                })
                //.labelling(true)
                .build()
        </script>
    </body>
</html>