31:T63f,map = { const m = eurostatmap .map("ps") .dorling(dorling) .nutsLevel(nutsLevel) .scale("60M") .title( variate == "bivariate" ? "Total GDP and GDP per inhabitant" : "Total gross domestic product (GDP)" ) .psFill("#39a36a") .psShape("circle") .psMinSize(2) .psMaxSize([50, 20, 20, 15][nutsLevel]) .psStrokeOpacity(0.8) .psStroke("white") .psStrokeWidth(0.5) .psFillOpacity(1) .subtitle("2022") .stat("size", { eurostatDatasetCode: "nama_10r_3gdp", unitText: "Million EUR", filters: { unit: "MIO_EUR", time: "2023" } }) .legend({ x: [595, 620, 620, 620][nutsLevel], svgId: "legend", y: 0, boxOpacity: 1, sizeLegend: { title: "Euro", noData: false, labelFormatter: (label) => formatter(label * 1000000) }, colorLegend: variate == "bivariate" ? { title: "Euro per inhabitant", //marginTop: 40, labels: ["10k", "20k", "30k", "40k"].reverse() } : {} }) .psThresholds([10000, 20000, 30000, 40000]) .psColors(["#6baed6", "#4292c6", "#2171b5", "#08519c", "#08306b"]) .transitionDuration(900) .zoomExtent([1, 10]) .showZoomButtons(true) .tooltip({ textFunction: tooltipFunction }); if (variate == "bivariate") { m.stat("color", { eurostatDatasetCode: "nama_10r_3gdp", unitText: "Euro per inhabitant", filters: { unit: "EUR_HAB", time: "2022" } }); } m.build(); return m; }32:T783,function muteHexColor(hex, amount = 0.5) { // amount: 0 → no change, 1 → very muted & light // Remove '#' if present hex = hex.replace(/^#/, ""); // Parse r, g, b let r = parseInt(hex.slice(0, 2), 16); let g = parseInt(hex.slice(2, 4), 16); let b = parseInt(hex.slice(4, 6), 16); // Convert to HSL const toHsl = (r, g, b) => { r /= 255; g /= 255; b /= 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); let h, s, l = (max + min) / 2; if (max === min) { h = s = 0; } else { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return [h, s, l]; }; const [h, s, l] = toHsl(r, g, b); // ↓ Lighter & less saturated const mutedS = s * (1 - amount * 0.6); // reduce saturation const mutedL = Math.min(1, l + amount * 0.25); // lighten // Convert back to RGB const hslToRgb = (h, s, l) => { const hue2rgb = (p, q, t) => { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1 / 6) return p + (q - p) * 6 * t; if (t < 1 / 2) return q; if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; return p; }; let r, g, b; if (s === 0) { r = g = b = l; // achromatic } else { const q = l < 0.5 ? l * (1 + s) : l + s - l * s; const p = 2 * l - q; r = hue2rgb(p, q, h + 1 / 3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1 / 3); } return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; }; const [mr, mg, mb] = hslToRgb(h, mutedS, mutedL); return `#${((1 << 24) + (mr << 16) + (mg << 8) + mb).toString(16).slice(1)}`; }33:[] 2f:{"title":"Proportional circle map","cells":[{"id":0,"value":"# Proportional circle map","pinned":false,"hidden":false,"mode":"md"},{"id":219,"value":"https://github.com/eurostat/eurostat-map","pinned":false,"hidden":false,"mode":"md"},{"id":83,"value":"A proportional circle map is a thematic map that uses circles of varying sizes placed over geographic locations to represent the magnitude of a statistical variable. The area of each circle is scaled in proportion to the data value it represents, allowing viewers to quickly compare quantities across different regions. \n\nThis method is especially effective for displaying absolute counts, such as city populations, energy production, or trade volumes, since the visual emphasis on size makes differences easy to grasp. Proportional circle maps highlight both spatial distribution and relative magnitude in a clear and visually engaging way.","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"\n \n `.trim();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"function formatter(num, locale = \"en\") {\n if (num === null || num === undefined) return \"\";\n\n return new Intl.NumberFormat(locale, {\n notation: \"compact\",\n compactDisplay: \"long\",\n maximumFractionDigits: 1\n }).format(num);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"","pinned":true,"hidden":false,"mode":"md"},{"id":157,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"eurostatmap = require(\"eurostat-map@4.3.23\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}