44:null 45:["$","title",null,{"children":"La population mondiale et sa croissance annuelle (ONU WPP) - FR (3890) | Marc Thevenin | Observable"}] 4b:Tbfb,boxPlotMap2 = { const content = htl.html`

${title}

${boxInput1}

${map}

${Def}

Note : La publication World Population Prospects fournit les estimations de population des Nations Unies pour tous les pays du monde pour chaque année entre 1950 et 2023 et les projections selon différents scénarios (bas, moyen et haut) pour chaque année entre 2024 et 2100. Les chiffres présentés ici correspondent aux projections pour l’année en cours selon le scénario moyen.

Source : World Population Prospects. Nations Unies. 2024.

`; return fullscreen(content, "boxPlotMa2", {target:".map2", inBox: true, lang:"fr", title: "", fsMax: "clamp(1000px, 60vw, 1400px)"}); }4c:T45c1,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; const isCompact = () => window.innerWidth < 600; // changement de région => on désépingle le tooltip ; // changement d'indicateur (même région) => le tooltip épinglé est conservé const regionChanged = mapState.region !== selectReg; if (regionChanged) { mapState.region = selectReg; mapState.pinnedIso = null; mapState.pinnedPos = null; } const bounds = regionBounds[selectReg]; const centerLon = bounds ? (bounds[0][0] + bounds[1][0]) / 2 : 0; const proj_ = d3.geoNaturalEarth1().rotate([-centerLon, 0]); const sphere = {type: "Sphere"}; 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_); 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); } 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 === "Monde" ? worldMesh : topojson.mesh(topo, geoms, touchesRegion); const meshOut = selectReg === "Monde" ? null : topojson.mesh(topo, geoms, (a, b) => !touchesRegion(a, b)); const meshInWidth = selectReg === "Monde" ? 0.2 : outsideStyle.strokeWidth; const hoverStrokeWidth = 0.25; let currentK = 1; let pxPerUnit = 1; const hoverWidth = () => meshInWidth + (hoverStrokeWidth - meshInWidth) / currentK; let hoverNode = null; const container = html`

`; const ataStroke = selectReg === "Monde" ? "#414141" : outsideStyle.stroke; const baseStroke = (d) => d.properties.iso3 === "ATA" ? ataStroke : "none"; const baseStrokeWidth = (d) => d.properties.iso3 === "ATA" ? (selectReg === "Monde" ? 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"); 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); const dimmedColor = "#f1f1f1"; const noDataColor = choro.missing_fill || "#fefefe"; const isOutside = (d) => { if (selectReg === "Monde") return false; const reg = regionByIso.get(d.properties.iso3); return reg !== undefined && reg !== selectReg; }; const color = (d) => { if (d.properties.iso3 === "ATA") return "#ffffff"; if (isOutside(d)) return outsideStyle.fill; const value = d.properties.indic ?? d.properties.indicFill; if (!isChoro) { 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; }; 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; const circleStroke = "#414141"; const screenUnit = () => currentK * pxPerUnit; const circleBaseW = () => 0.4 / screenUnit(); const circleHoverW = () => 1.2 / screenUnit(); const esc = (s) => String(s).replace(/&/g, "&").replace(//g, ">"); 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("fr-FR", {minimumFractionDigits: 1, maximumFractionDigits: 1})} ${millions < 2 ? "million" : "millions"} d'habitants`; } else { txt = `${Math.round(k).toLocaleString("fr-FR")} milliers d'habitants`; } return `

${esc(name.trim())}

${txt}

`; } function showTooltip(node, event, d) { 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 = ""; let borderColor = null; const rich = !isChoro && !compact; if (isChoro) { const value = d.properties.indic; if (value == null || Number.isNaN(value)) return; borderColor = choro.colorize(value); 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" : borderColor ? `2px solid ${borderColor}` : "1px solid #fff") .style("border-radius", (rich || isChoro) ? "6px" : "3px") .style("opacity", 1) .style("background", "white") .html(`

${chartHtml}${closeBtn}

`); } function placeTooltip(mx, my) { 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 moveTooltip(event) { const [mx, my] = d3.pointer(event, container); placeTooltip(mx, my); if (pinned) mapState.pinnedPos = [mx, my]; } 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); } 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; mapState.pinnedIso = null; mapState.pinnedPos = null; resetStyle(this); return; } if (pinnedNode) resetStyle(pinnedNode); pinned = true; pinnedNode = this; mapState.pinnedIso = d.properties.iso3; showTooltip(this, event, d); moveTooltip(event); }); return selection; } 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); 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"); 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"); let circles = null; const rOf = (d) => circleScale(d.properties.popK); 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")) { if (pinnedNode) resetStyle(pinnedNode); pinned = false; pinnedNode = null; mapState.pinnedIso = null; mapState.pinnedPos = null; tooltip.style("opacity", 0); } }); 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); } 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 avant", html``, "border-radius:3px 3px 0 0;"); const zoomOutBtn = mkButton("Zoom arrière", html``, "border-radius:0; border-top:none;"); const homeBtn = mkButton("Réinitialiser la vue", 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); } const zoomBehavior = d3.zoom() .scaleExtent([zoomMin, zoomMax]) .on("zoom", (event) => { setMoving(true); g.attr("transform", event.transform); currentK = event.transform.k; if (isChoro) { if (hoverNode) d3.select(hoverNode).attr("stroke-width", hoverWidth()); } else { updateCircles(); } updateButtons(); }) .on("end", () => setMoving(false)); svg.call(zoomBehavior); // zoom animé vers la région sélectionnée (comportement d'origine : à chaque changement de carte) 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); }); 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); // restaure le tooltip épinglé (changement d'indicateur, même région) if (!regionChanged && mapState.pinnedIso && interactive) { const node = interactive.filter(d => d.properties.iso3 === mapState.pinnedIso).node(); if (node) { const d = d3.select(node).datum(); pinned = true; pinnedNode = node; showTooltip(node, null, d); if (+tooltip.style("opacity") === 0) { pinned = false; pinnedNode = null; resetStyle(node); } else if (mapState.pinnedPos) { const [mx, my] = mapState.pinnedPos; requestAnimationFrame(() => placeTooltip(mx, my)); } } } 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; }4d:T9f7,boxInput1 = html`

${viewof rWidth} ${viewof selectReg}

${viewof typeMap} ${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`