44:null 45:["$","title",null,{"children":"Maps of 6 UN WPP indicators (fertility,mortality, ageing) - EN (3890) | Marc Thevenin | Observable"}] 4b:Tc4d,boxPlotMap = { const content = htl.html`

${title}

${boxInput1}

${map}

${Def}

Note: World Population Prospects publishes United Nations population estimates for all world countries and every year from 1950 to 2024, as well as projections for different scenarios (low, middle and high variants) from 2024 to 2100. The figures presented here correspond to middle variant projections for the given year.

Source: World Population Prospects. United Nations. 2024.

`; return fullscreen(content, "boxPlotMap", {target:".map1", inBox: true, lang:"en", //title: title, fsMax: "clamp(1000px, 60vw, 1400px)"}); }4c:T44d1,map = { 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; // état de l'épinglage conservé HORS de la carte : survit à une reconstruction de la cellule // (changement d'indicateur => reconstruction de boxPlotMap / map) const pinStore = (window.__mapPinStore ??= {iso: null, fx: 0, fy: 0, reg: null}); // changement de région : le tooltip épinglé est désépinglé (il reste épinglé si seul l'indicateur change) if (pinStore.reg !== selectReg) { pinStore.iso = null; pinStore.reg = selectReg; } // --- contexte "dynamique" : mis à jour par la cellule mapUpdate SANS reconstruire la carte --- // (indicateur, valeurs par pays, échelle de couleurs, légende, fond) const ctx = { select: null, values: new Map(), // iso3 -> valeur de l'indicateur courant choro: null, legende: null, backCol: "#ffffff" }; // 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; 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", ctx.backCol); 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); // géométrie statique (XXX) : ne dépend pas de l'indicateur const shadowLayer = g.append("path") .datum(XXX) .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 // 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; const noDataColor = (ctx.choro && ctx.choro.missing_fill) || "#fefefe"; if (!ctx.choro || !ctx.legende) return noDataColor; const value = ctx.values.get(d.properties.iso3); const idx = ctx.legende.classIndex(value); if (idx === -1) return noDataColor; return ctx.legende.has(idx) ? ctx.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; function showCountryTooltip(node, event, d) { // pays d'une autre région : le contour reste inchangé (gris discret) if (!isOutside(d)) { hoverNode = node; d3.select(node) .attr("stroke", "black") .attr("stroke-width", hoverWidth()) .attr("fill-opacity", 1); } const closeBtn = pinned ? `` : ""; const value = ctx.values.get(d.properties.iso3); if (value != null && !Number.isNaN(value) && ctx.choro) { const statKey = statColumnMap[ctx.select]; const countryRow = dfEn.find(r => r.iso3 === d.properties.iso3); const compact = isCompact(); let chartHtml = ""; if (countryRow && statKey) { const items = getIndicatorRows(dfEn, statKey, countryRow); chartHtml = compact ? tooltipListLight(items, ctx.choro) : tooltipDotPlot(items, ctx.choro); } tooltip .style("max-width", compact ? "190px" : "none") .style("opacity", 1) .style("background", "white") .html(`

${chartHtml}${closeBtn}

`); } else if (pinned) { // tooltip épinglé et pas de donnée pour le nouvel indicateur : on garde le tooltip (avec sa croix) const countryRow = dfEn.find(r => r.iso3 === d.properties.iso3); const name = countryRow ? countryRow["paysEn"] : ""; tooltip .style("max-width", "none") .style("opacity", 1) .style("background", "white") .html(`

${name}

Data not available

${closeBtn}

`); } } function moveTooltip(event) { const [mx, my] = d3.pointer(event, container); const containerRect = container.getBoundingClientRect(); const containerWidth = containerRect.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; } const top = my + 12; tooltip .style("left", `${left}px`) .style("top", `${top}px`); // tooltip épinglé : mémorise sa position (en fraction du conteneur) pour la restaurer après reconstruction if (pinned && containerRect.width > 0 && containerRect.height > 0) { pinStore.fx = left / containerRect.width; pinStore.fy = top / containerRect.height; } } function resetCountryStyle(node) { const d = d3.select(node).datum(); if (hoverNode === node) hoverNode = null; d3.select(node) .attr("stroke", baseStroke(d)) .attr("stroke-width", baseStrokeWidth(d)); tooltip.style("opacity", 0); } // pays (géométrie statique XXX) const countries = g.selectAll("path.country") .data(XXX.features) .join("path") .attr("class", "country") .attr("d", path) .attr("fill", color) .attr("fill-opacity", 1) .attr("stroke", baseStroke) .attr("stroke-width", baseStrokeWidth) .style("cursor", "pointer") .on("pointerenter", function (event, d) { if (event.pointerType === "touch" || pinned) return; showCountryTooltip(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; resetCountryStyle(this); }) .on("pointerdown", function (event, d) { if (event.pointerType !== "touch") return; showCountryTooltip(this, event, d); moveTooltip(event); }) .on("click", function (event, d) { if (pinned && pinnedNode === this) { pinned = false; pinnedNode = null; pinStore.iso = null; resetCountryStyle(this); return; } if (pinnedNode) resetCountryStyle(pinnedNode); pinned = true; pinnedNode = this; pinStore.iso = d.properties.iso3; pinStore.reg = selectReg; showCountryTooltip(this, event, d); moveTooltip(event); }); // 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"); tooltip.on("click", (event) => { if (event.target.classList.contains("tooltip-close")) { if (pinnedNode) resetCountryStyle(pinnedNode); pinned = false; pinnedNode = null; pinStore.iso = null; tooltip.style("opacity", 0); } }); // --- 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) let moving = false; function setMoving(on) { if (on === moving) return; moving = on; shadowLayer.style("display", on ? "none" : null); graticulePath.style("display", on ? "none" : null); countries.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; // adapte l'épaisseur du pays survolé / épinglé au niveau de zoom if (hoverNode) d3.select(hoverNode).attr("stroke-width", hoverWidth()); 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(); // --- mise à jour des couleurs / données SANS toucher au zoom ni à la géométrie --- container.update = (next) => { Object.assign(ctx, next); svg.style("background", ctx.backCol); countries.attr("fill", color); // un tooltip épinglé reste en place : son contenu est recalculé pour le nouvel indicateur if (pinned && pinnedNode) { showCountryTooltip(pinnedNode, null, d3.select(pinnedNode).datum()); } }; container.appendChild(svg.node()); container.appendChild(controls); // --- restauration d'un tooltip épinglé avant une reconstruction de la carte --- if (pinStore.iso) { const node = countries.filter(d => d.properties.iso3 === pinStore.iso).node(); if (node) { pinned = true; pinnedNode = node; showCountryTooltip(node, null, d3.select(node).datum()); // position en pourcentage du conteneur (le conteneur n'est pas encore dans la page) tooltip .style("left", `${pinStore.fx * 100}%`) .style("top", `${pinStore.fy * 100}%`); } } return container; }4d:T9ad,boxInput1 = html`

${viewof rWidth} ${viewof selectReg}

${viewof select} ${viewof legende} ${cssLegMap}

`4e: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`

${title}

Lire cette carte

Un tour du monde des espérances de vie