36:null 37:["$","title",null,{"children":"World population and its annual growth (UN WPP) - EN (3890) | Marc Thevenin | Observable"}] 3d:Tc03,boxPlotMap2 = { const content = htl.html`

The world population and its annual growth

${boxInput1}

${map}

${Def}

Note : The publication World Population Prospects provides United Nations population estimates for all countries in the world for each year from 1950 to 2023, as well as projections according to different scenarios (low, medium and high) for each year from 2024 to 2100. The figures presented here correspond to medium scenario projections for the given year.

Source : World Population Prospects. United Nations. 2024.

`; return fullscreen(content, "boxPlotMa2", {target:".map2", inBox: true, lang:"en", title: "", fsMax: "clamp(1000px, 60vw, 1400px)"}); }3e:T4f9d,map = { // mode : cercles proportionnels (population) ou choropleth (taux de croissance) const isChoro = typeMap !== "Population"; const big = rWidth > 600; const margin = { top: big ? 30 : 5, right: big ? 20 : 5, bottom: big ? 20 : 5, left: big ? 30 : 5 }; const width = rWidth > 900 ? 850 : rWidth; // affichage "compact" (mobile) selon la largeur de la FENÊTRE (et non celle du conteneur de la carte, // qui peut être étroite même sur ordinateur) ; évalué à chaque survol const isCompact = () => window.innerWidth < 600; // emprise de la région sélectionnée (null si "World") const bounds = regionBounds[selectReg]; // la carte est pivotée pour centrer la région : la coupure à ±180° tombe loin d'elle // (évite par exemple que l'Océanie soit coupée entre la gauche et la droite) const centerLon = bounds ? (bounds[0][0] + bounds[1][0]) / 2 : 0; const proj_ = d3.geoNaturalEarth1().rotate([-centerLon, 0]); const sphere = {type: "Sphere"}; // hauteur déduite de la largeur proj_.fitExtent([[margin.left, margin.top], [width - margin.right, 100000]], sphere); const [[, y0], [, y1]] = d3.geoPath(proj_).bounds(sphere); const height = Math.ceil(y1 - y0) + margin.top + margin.bottom; proj_.fitExtent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]], sphere); const path = d3.geoPath(proj_); // transformation de zoom correspondant à la région sélectionnée (identité si "World") let regionTransform = d3.zoomIdentity; if (bounds) { const [[lon0, lat0], [lon1, lat1]] = bounds; const pts = []; for (let i = 0; i <= 10; i++) { for (let j = 0; j <= 10; j++) { pts.push(proj_([lon0 + (lon1 - lon0) * i / 10, lat0 + (lat1 - lat0) * j / 10])); } } const [px0, px1] = d3.extent(pts, p => p[0]); const [py0, py1] = d3.extent(pts, p => p[1]); const k = Math.max(1, Math.min(10, 0.95 / Math.max((px1 - px0) / width, (py1 - py0) / height))); const cx = (px0 + px1) / 2; const cy = (py0 + py1) / 2; regionTransform = d3.zoomIdentity.translate(width / 2 - k * cx, height / 2 - k * cy).scale(k); } // frontières : deux couches quand une région est sélectionnée // - meshIn : frontières touchant la région (tracé normal) // - meshOut : frontières entre pays des autres régions (très discrètes) const regionOf = (geom) => regionByIso.get(geom.properties?.iso3); const touchesRegion = (a, b) => regionOf(a) === selectReg || regionOf(b) === selectReg; const topo = worldAdministrativeBoundaries14; const geoms = topo.objects.maptopo; const meshIn = selectReg === "World" ? worldMesh : topojson.mesh(topo, geoms, touchesRegion); const meshOut = selectReg === "World" ? null : topojson.mesh(topo, geoms, (a, b) => !touchesRegion(a, b)); // épaisseurs : hors survol, la région a la même épaisseur que les autres régions // (vue "World" : 0.2 inchangé) ; au survol, légère augmentation const meshInWidth = selectReg === "World" ? 0.2 : outsideStyle.strokeWidth; const hoverStrokeWidth = 0.25; // niveau de zoom courant : l'épaisseur du survol est adaptée pour rester fine à l'écran // (le contour de survol est dessiné sous le mesh : on garde un surplus visible constant en pixels) let currentK = 1; // échelle d'affichage : pixels écran par unité du viewBox (le SVG est affiché à 100 % de la largeur du conteneur, // qui n'est pas égale à `width`) ; mesurée plus bas par un ResizeObserver let pxPerUnit = 1; const hoverWidth = () => meshInWidth + (hoverStrokeWidth - meshInWidth) / currentK; let hoverNode = null; const container = html`

`; // seule l'Antarctique garde un contour propre (le reste passe par le mesh) ; discret hors "World" const ataStroke = selectReg === "World" ? "#414141" : outsideStyle.stroke; const baseStroke = (d) => d.properties.iso3 === "ATA" ? ataStroke : "none"; const baseStrokeWidth = (d) => d.properties.iso3 === "ATA" ? (selectReg === "World" ? 0.3 : outsideStyle.strokeWidth) : 0; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "100%") .attr("height", "auto") .style("display", "block") .style("max-width", "100%") .style("background", "#fefefe"); svg.append("defs") .append("filter") .attr("id", "map-shadow") .attr("x", "-30%").attr("y", "-30%").attr("width", "160%").attr("height", "160%") .append("feDropShadow") .attr("dx", .5) .attr("dy", .5) .attr("stdDeviation", 0.5) .attr("flood-color", "#c1c1c1") .attr("flood-opacity", 1); const g = svg.append("g"); // contour, graticule, ombre g.append("path") .datum(sphere) .attr("fill", "#ffffff") .attr("d", path) .attr("stroke", "#414141") .attr("stroke-width", .5); const graticulePath = g.append("path") .datum(d3.geoGraticule()()) .attr("fill", "none") .attr("stroke", "#c1c1c1") .attr("stroke-width", 0.1) .attr("d", path); const shadowLayer = g.append("path") .datum(world3) .attr("fill", "#cccccc") .attr("filter", "url(#map-shadow)") .attr("d", path); // couleurs (outsideStyle : cellule séparée) const dimmedColor = "#f1f1f1"; // classes désélectionnées dans la légende const noDataColor = choro.missing_fill || "#fefefe"; // true si une région est sélectionnée et que le pays appartient à une autre région const isOutside = (d) => { if (selectReg === "World") return false; const reg = regionByIso.get(d.properties.iso3); return reg !== undefined && reg !== selectReg; }; const color = (d) => { if (isOutside(d)) return outsideStyle.fill; // Açores : pas de données propres, mais même couleur que le Portugal (indicFill) const value = d.properties.indic ?? d.properties.indicFill; // mode cercles : fond gris uni, sauf territoires sans données (blanc, comme la choroplèthe) if (!isChoro) { if (d.properties.iso3 === "ATA") return outsideStyle.fill; return (value == null || Number.isNaN(value)) ? noDataColor : "#c1c1c1"; } const idx = legende.classIndex(value); if (idx === -1) return noDataColor; return legende.has(idx) ? choro.colorize(value) : dimmedColor; }; // tooltip const tooltip = d3.select(container) .append("div") .style("max-width", "none") .style("position", "absolute") .style("pointer-events", "none") .style("opacity", 0) .style("transition", "opacity .1s") .style("background", "white") .style("border", "1px solid #fff") .style("border-radius", "3px") .style("padding", "4px 8px") .style("font-family", "poppins, sans-serif") .style("overflow", "hidden") .style("color", "#222330") .style("white-space", "nowrap") .style("z-index", 10) .style("box-shadow", "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px"); let pinned = false; let pinnedNode = null; // --- cercles : taille et épaisseurs fixes À L'ÉCRAN (même taille que la légende), donc divisées // par le zoom courant ET par l'échelle d'affichage du SVG --- const circleStroke = "#414141"; const screenUnit = () => currentK * pxPerUnit; // pixels écran par unité de coordonnées (zoom compris) const circleBaseW = () => 0.4 / screenUnit(); const circleHoverW = () => 1.2 / screenUnit(); const esc = (s) => String(s).replace(/&/g, "&").replace(//g, ">"); // tooltip des cercles (version compacte / mobile) : nom du pays + population function popTooltipHtml(d) { const k = d.properties.popK; const name = d.properties.pays ?? d.properties.iso3 ?? ""; let txt; if (k >= 1000) { const millions = k / 1000; txt = `${millions.toLocaleString("en-US", {minimumFractionDigits: 1, maximumFractionDigits: 1})} million inhabitants`; } else { txt = `${Math.round(k).toLocaleString("en-US")} thousand inhabitants`; } return `

${esc(name.trim())}

${txt}

`; } function showTooltip(node, event, d) { // pays d'une autre région : le contour reste inchangé (gris discret) if (!isOutside(d)) { hoverNode = node; if (isChoro) { d3.select(node) .attr("stroke", "black") .attr("stroke-width", hoverWidth()) .attr("fill-opacity", 1); } else { d3.select(node) .attr("stroke", "#000") .attr("stroke-width", circleHoverW()); } } const compact = isCompact(); let chartHtml = ""; // tooltip enrichi (fond sombre + parts de population) : cercles, hors mobile const rich = !isChoro && !compact; if (isChoro) { const value = d.properties.indic; if (value == null || Number.isNaN(value)) return; const statKey = statColumnMap[typeMap]; const countryRow = df.find(r => r.iso3 === d.properties.iso3); if (countryRow && statKey) { const items = getIndicatorRows(df, statKey, countryRow); chartHtml = compact ? tooltipListLight(items, choro) : tooltipDotPlot(items, choro); } } else if (rich) { chartHtml = popTooltipRich(d).html; } else { chartHtml = popTooltipHtml(d); } const closeBtn = pinned ? `

` : ""; tooltip .style("max-width", compact ? "190px" : "none") .style("padding", rich ? "0" : "4px 8px") .style("border", rich ? "1px solid #222330" : "1px solid #fff") .style("border-radius", rich ? "6px" : "3px") .style("opacity", 1) .style("background", "white") .html(`

${chartHtml}${closeBtn}

`); } function moveTooltip(event) { const [mx, my] = d3.pointer(event, container); const containerWidth = container.getBoundingClientRect().width; const tooltipWidth = tooltip.node().getBoundingClientRect().width; const offset = 12; let left; if (mx + offset + tooltipWidth > containerWidth) { left = mx - offset - tooltipWidth; if (left < 0) left = 4; } else { left = mx + offset; } tooltip .style("left", `${left}px`) .style("top", `${my + 12}px`); } function resetStyle(node) { const d = d3.select(node).datum(); if (hoverNode === node) hoverNode = null; if (isChoro) { d3.select(node) .attr("stroke", baseStroke(d)) .attr("stroke-width", baseStrokeWidth(d)); } else { d3.select(node) .attr("stroke", circleStroke) .attr("stroke-width", circleBaseW()); } tooltip.style("opacity", 0); } // désépingle et masque le tooltip (changement de région, de type de carte, etc.) function unpinAll() { if (pinnedNode) resetStyle(pinnedNode); pinned = false; pinnedNode = null; tooltip.style("opacity", 0).html(""); } // quand la cellule est recalculée (ex. changement de région) : on désépingle et on retire le tooltip invalidation.then(() => { unpinAll(); tooltip.remove(); }); // gestion commune du survol / toucher / clic (pays en choropleth, cercles en mode population) function attachInteractions(selection) { selection .style("cursor", "pointer") .on("pointerenter", function (event, d) { if (event.pointerType === "touch" || pinned) return; showTooltip(this, event, d); }) .on("pointermove", function (event) { if (event.pointerType === "touch" || pinned) return; moveTooltip(event); }) .on("pointerleave", function (event) { if (event.pointerType === "touch" || pinned) return; resetStyle(this); }) .on("pointerdown", function (event, d) { if (event.pointerType !== "touch") return; showTooltip(this, event, d); moveTooltip(event); }) .on("click", function (event, d) { if (pinned && pinnedNode === this) { pinned = false; pinnedNode = null; resetStyle(this); return; } if (pinnedNode) resetStyle(pinnedNode); pinned = true; pinnedNode = this; showTooltip(this, event, d); moveTooltip(event); }); return selection; } // pays const countries = g.selectAll("path.country") .data(world3.features) .join("path") .attr("class", "country") .attr("d", path) .attr("fill", color) .attr("fill-opacity", 1) .attr("stroke", baseStroke) .attr("stroke-width", baseStrokeWidth); // les Açores restent colorées mais ne sont pas interactives (pas de tooltip : doublon avec le Portugal) const isAzores = (d) => d.properties.name === "Azores Islands"; if (isChoro) { attachInteractions(countries.filter(d => !isAzores(d))); countries.filter(isAzores).style("pointer-events", "none"); } else countries.style("pointer-events", "none"); // contours (mesh) par-dessus les pays : d'abord les autres régions (discrètes), puis la région if (meshOut) { g.append("path") .datum(meshOut) .attr("fill", "none") .attr("stroke", outsideStyle.stroke) .attr("stroke-width", outsideStyle.strokeWidth) .attr("stroke-linejoin", "round") .attr("d", path) .style("pointer-events", "none"); } g.append("path") .datum(meshIn) .attr("fill", "none") .attr("stroke", "#414141") .attr("stroke-width", meshInWidth) .attr("stroke-linejoin", "round") .attr("d", path) .style("pointer-events", "none"); // cercles proportionnels : uniquement les pays de la région sélectionnée, du plus grand au plus petit let circles = null; const rOf = (d) => circleScale(d.properties.popK); // rayon en pixels écran (= légende) // met à jour rayon et contours des cercles selon le zoom et l'échelle d'affichage function updateCircles() { if (!circles) return; circles .attr("r", d => rOf(d) / screenUnit()) .attr("stroke-width", circleBaseW()); if (hoverNode) d3.select(hoverNode).attr("stroke-width", circleHoverW()); } if (!isChoro) { const circleData = world3.features .filter(d => Number.isFinite(d.properties.popK) && d.properties.popK > 0 && d.properties.iso3 !== "ATA" && !isOutside(d) && circleCentroids.has(d.properties.iso3)) .map(d => ({d, pos: proj_(circleCentroids.get(d.properties.iso3))})) .filter(o => o.pos && Number.isFinite(o.pos[0]) && Number.isFinite(o.pos[1])) .sort((a, b) => b.d.properties.popK - a.d.properties.popK); circles = g.append("g") .selectAll("circle.circ") .data(circleData.map(o => Object.assign(o.d, {_pos: o.pos}))) .join("circle") .attr("class", "circ") .attr("cx", d => d._pos[0]) .attr("cy", d => d._pos[1]) .attr("fill", "#ff564e") .attr("fill-opacity", 0.75) .attr("stroke", circleStroke); updateCircles(); attachInteractions(circles); } tooltip.on("click", (event) => { if (event.target.classList.contains("tooltip-close")) { unpinAll(); } }); // --- performance : allège le rendu pendant les mouvements de zoom / déplacement --- // (l'ombre portée est un filtre SVG très coûteux à recalculer à chaque image) const interactive = isChoro ? countries.filter(d => !isAzores(d)) : circles; let moving = false; function setMoving(on) { if (on === moving) return; moving = on; shadowLayer.style("display", on ? "none" : null); graticulePath.style("display", on ? "none" : null); interactive.style("pointer-events", on ? "none" : null); svg.style("shape-rendering", on ? "optimizeSpeed" : null); } // --- boutons zoom / dézoom / accueil --- // taille fluide : 22px sur téléphone -> 30px sur grand écran (unités cqw relatives au conteneur .map1) const zoomMin = 1, zoomMax = 10; const btnSize = "clamp(22px, 4cqw, 30px)"; const btnStyle = ` display:flex; align-items:center; justify-content:center; width:${btnSize}; height:${btnSize}; padding:0; margin:0; background:white; color:#414141; cursor:pointer; border:1px solid #919191; font-family:poppins, sans-serif;`; const iconStyle = "width:55%; height:55%; display:block;"; const mkButton = (title, inner, extra = "") => html``; const zoomInBtn = mkButton("Zoom in", html``, "border-radius:3px 3px 0 0;"); const zoomOutBtn = mkButton("Zoom out", html``, "border-radius:0; border-top:none;"); const homeBtn = mkButton("Reset view", html``, "border-radius:0 0 3px 3px; border-top:none;"); function updateButtons() { const dis = (b, off) => { b.disabled = off; b.style.opacity = off ? 0.4 : 1; b.style.cursor = off ? "default" : "pointer"; }; dis(zoomInBtn, currentK >= zoomMax - 1e-6); dis(zoomOutBtn, currentK <= zoomMin + 1e-6); } // zoom / déplacement const zoomBehavior = d3.zoom() .scaleExtent([zoomMin, zoomMax]) .on("zoom", (event) => { setMoving(true); // au premier mouvement seulement (un simple clic ne déclenche rien) g.attr("transform", event.transform); currentK = event.transform.k; if (isChoro) { // adapte l'épaisseur du pays survolé / épinglé au niveau de zoom if (hoverNode) d3.select(hoverNode).attr("stroke-width", hoverWidth()); } else { // les cercles gardent la même taille à l'écran (même taille que dans la légende) updateCircles(); } updateButtons(); }) .on("end", () => setMoving(false)); svg.call(zoomBehavior); // zoom animé vers la région sélectionnée if (bounds) { svg.transition().duration(800).call(zoomBehavior.transform, regionTransform); } zoomInBtn.addEventListener("click", () => { svg.transition().duration(300).call(zoomBehavior.scaleBy, 1.6); }); zoomOutBtn.addEventListener("click", () => { svg.transition().duration(300).call(zoomBehavior.scaleBy, 1 / 1.6); }); // "Accueil" revient à la vue de la région sélectionnée (ou au monde) homeBtn.addEventListener("click", () => { svg.transition().duration(600).call(zoomBehavior.transform, regionTransform); }); const controls = html`

`; controls.append(zoomInBtn, zoomOutBtn, homeBtn); updateButtons(); container.appendChild(svg.node()); container.appendChild(controls); // mesure l'échelle d'affichage réelle (largeur affichée / largeur du viewBox) : se met à jour au // redimensionnement, au passage en plein écran, etc. const ro = new ResizeObserver(() => { const w = svg.node().getBoundingClientRect().width; if (w > 0) { const next = w / width; if (Math.abs(next - pxPerUnit) > 1e-3) { pxPerUnit = next; updateCircles(); } } }); ro.observe(svg.node()); invalidation.then(() => ro.disconnect()); return container; }3f:T9f7,boxInput1 = html`

${viewof rWidth} ${viewof selectReg}

${viewof typeMap} ${viewof legende} ${cssLegMap}

`40:T3df6,function legendClasses(source, { length = 200, // longueur de la rampe (axe principal, selon orientation) thickness = 16, // épaisseur des rectangles de couleur tickSize = 5, decimals = 0, // nombre de décimales (0 à 3), ignoré si "format" fourni decimalSeparator = ".", // "." ou ",", ignoré si "format" fourni format = null, // si fourni, prend le dessus sur decimals/decimalSeparator minLabelSpacing = 6, // marge de respiration mini entre labels (en plus de leur largeur mesurée) title = null, orientation = "horizontal", // "horizontal" | "vertical" labelReserve = 34, // espace réservé aux labels en mode vertical noData = null, // { label, color, show, stroke, strokeWidth }. Si null, auto-détecté depuis "source" (geoviz) cssWidth = null, // --- sélection groupée ("tout sélectionner / tout désélectionner") --- selectAll = false, // affiche le bouton tout sélectionner/désélectionner lang = "fr", // "fr" | "en" | "jp" labels = {}, // surcharge ponctuelle du dictionnaire de traduction (ex: { selectAll: "..." }) // --- options esthétiques --- // fontSize : nombre (px) OU chaîne CSS ("clamp(11px, 2cqw, 14px)"...). // Si fourni, les textes du SVG (graduations, "pas de données") sont affichés à cette taille EN PIXELS RÉELS, // quel que soit le facteur d'échelle du SVG (même rendu que des textes HTML, ex. selectIned). // null = ancien comportement (10px dans l'unité du viewBox, donc variable avec la largeur d'affichage). fontSize = null, titleFontSize = null, // taille du titre : nombre (px) OU chaîne CSS. null = calc(fontSize * 1.2) selectAllFontSize = null, // taille du bouton tout sélectionner/désélectionner : nombre (px) OU chaîne CSS. null = fontSize fontFamily = null, // police des labels/titre. null = défaut CSS (sans-serif) strokeColor = "#fff", // couleur du contour entre les classes de la rampe strokeWidth = 0.5, // épaisseur du contour entre les classes de la rampe deselectedColor = null, // couleur unie pour les classes désélectionnées. null = comportement par défaut (opacité réduite) deselectedOpacity = 0.25 // opacité appliquée aux classes désélectionnées si deselectedColor n'est pas fourni } = {}) { const isVertical = orientation === "vertical"; const width = length; // alias interne, garde le corps de fonction lisible const height = thickness; // --- dictionnaire de traduction, même principe que legend() --- const dict = { fr: { selectAll: "Tout sélectionner", deselectAll: "Tout désélectionner" }, en: { selectAll: "Select all", deselectAll: "Select none" }, jp: { selectAll: "すべて選択", deselectAll: "すべて選択を解除" } }; const t = { ...(dict[lang] ?? dict.fr), ...labels }; const iconAllOn = ``; const iconAllOff = ``; // format construit à partir de decimals/decimalSeparator, sauf si "format" est fourni const fmt = format || ((v) => { const s = d3.format(`.${decimals}f`)(v); return decimalSeparator === "," ? s.replace(".", ",") : s; }); // --- résolution de la source : scale d3 classique OU objet { breaks, colors } (type geoviz choro()) --- const isD3Scale = typeof source?.range === "function" && typeof source?.invertExtent === "function"; const isBreaksColors = Array.isArray(source?.breaks) && Array.isArray(source?.colors); let colors, classes, colorize, autoNoData = null; if (isD3Scale) { colors = source.range(); classes = colors.map((color, i) => { const [x0, x1] = source.invertExtent(color); return { index: i, x0, x1, color }; }); colorize = (value) => colors.indexOf(source(value)); } else if (isBreaksColors) { const breaks = source.breaks; colors = source.colors; classes = colors.map((color, i) => ({ index: i, x0: breaks[i], x1: breaks[i + 1], color })); colorize = typeof source.colorize === "function" ? (value) => classes.findIndex(c => c.color === source.colorize(value)) : (value) => { if (value == null || Number.isNaN(value)) return -1; for (let i = 0; i < classes.length; i++) { const { x0, x1 } = classes[i]; const inRange = i === classes.length - 1 ? (value >= x0 && value <= x1) : (value >= x0 && value < x1); if (inRange) return i; } return -1; }; if (source.missing) { autoNoData = { label: "Pas de données", color: source.missing_fill || "#ccc", show: true }; } } else { throw new Error( "legendClasses: source non reconnue. Attendu : une échelle d3 (.range()/.invertExtent()) ou un objet { breaks, colors }." ); } const n = colors.length; const segSize = width / n; const active = new Set(classes.map(c => c.index)); // --- config "pas de données" : fusion entre l'auto-détection (geoviz) et les surcharges explicites --- const resolvedNoData = (autoNoData || noData) ? { ...autoNoData, ...noData } : null; const showNoData = !!(resolvedNoData && resolvedNoData.show !== false); const noDataColor = (resolvedNoData && resolvedNoData.color) || "#ccc"; const noDataLabel = (resolvedNoData && resolvedNoData.label) || "Pas de données"; const noDataStroke = (resolvedNoData && resolvedNoData.stroke) || "#999"; const noDataStrokeWidth = (resolvedNoData && resolvedNoData.strokeWidth) ?? strokeWidth; const noDataWidth = isVertical ? height : segSize; const noDataHeight = height; const noDataGap = 10; // --- dimensions totales du SVG (viewBox) --- let svgWidth, svgHeight; if (!isVertical) { svgWidth = width; svgHeight = height + tickSize + 16 + (showNoData ? noDataGap + noDataHeight : 0); } else { svgWidth = Math.max(height + tickSize + labelReserve, showNoData ? noDataWidth + 90 : 0); svgHeight = width + (showNoData ? noDataGap + noDataHeight : 0); } // --- DOM --- const root = html`

`; root.style.width = "100%"; if (fontSize !== null) { const fs = typeof fontSize === "number" ? `${fontSize}px` : fontSize; root.style.setProperty("--legend-font-size", fs); root.style.fontSize = fs; // permet de lire la taille réelle en px (cqw, clamp… résolus) via getComputedStyle } if (titleFontSize !== null) { root.style.setProperty("--legend-title-font-size", typeof titleFontSize === "number" ? `${titleFontSize}px` : titleFontSize); } if (selectAllFontSize !== null) { root.style.setProperty("--legend-selectall-font-size", typeof selectAllFontSize === "number" ? `${selectAllFontSize}px` : selectAllFontSize); } if (fontFamily !== null) { root.style.setProperty("--legend-font-family", fontFamily); } if (cssWidth) { root.style.maxWidth = "none"; root.style.width = cssWidth; } else if (!isVertical) { root.style.maxWidth = `${width}px`; } else { root.style.maxWidth = `${svgWidth}px`; } // --- header : titre + bouton "tout sélectionner/désélectionner", même agencement que legend() --- let selectAllBtn = null; if (title || selectAll) { const header = html`

`; if (title) { header.appendChild(html`

${title}

`); } if (selectAll) { selectAllBtn = html`