2c:null 2d:["$","title",null,{"children":"n648 CARTE - EN | Marc Thevenin | Observable"}] 32:Ta3b,boxMap = { const content = html`

${title2} ${viewof rWidth}

${viewof select}

${viewof legende1} ${cssLegMap} ${map}

${viewof histoT} ${displayH}

C.Vandermotten, C.Dessouroux, Population & Sociétés, 648, October 2026, INED.

Sources: Data drawn from various databases (see Box 2).

`; return fullscreen(content, ".map", {inBox: true}); } 33:T28ea,map = { const width = rWidth; const height = width * 520 / 960; const outline = { type: "Polygon", coordinates: [[ ...d3.range(-180, 181, 1).map(x => [x, 83]), ...d3.range(83, -61, -1).map(y => [180, y]), ...d3.range(180, -181, -1).map(x => [x, -60]), ...d3.range(-60, 84, 1).map(y => [-180, y]) ]] }; const projection = d3.geoRobinson(); projection.fitExtent([[0, 0], [width, height]], outline); const path = d3.geoPath(projection); // helper : la zone/territoire fait-il partie de la sélection courante ? const inSelection = (zoneEn) => select === "World" || zoneEn === select; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "100%") .attr("height", "auto") .style("display", "block"); svg.append("rect").attr("width", width).attr("height", height).attr("fill", "white"); const zoomLayer = svg.append("g").attr("id", "zoom-layer"); zoomLayer.append("path") .datum(worldCountriesMesh) .attr("d", path) .attr("fill", "none") .attr("stroke", "#e6e6e6") .attr("stroke-width", 0.4) .attr("vector-effect", "non-scaling-stroke"); zoomLayer.append("path") .datum(worldOutlineMesh) .attr("d", path) .attr("fill", "none") .attr("stroke", "#cfcfcf") .attr("stroke-width", 0.6) .attr("vector-effect", "non-scaling-stroke"); zoomLayer.append("g") .selectAll("path") .data(aire30.features) .join("path") .attr("d", path) .attr("fill", d => d.properties.Data__Enti ? (inSelection(d.properties.zoneEn) ? "#f1f1f1" : "none") : "none") .attr("stroke", d => d.properties.Data__Enti ? (inSelection(d.properties.zoneEn) ? "#222330" : "none") : "none") .attr("stroke-width", 0.4) .attr("vector-effect", "non-scaling-stroke"); zoomLayer.append("g") .selectAll("path") .data(regroupement.features) .join("path") .attr("d", path) .attr("fill", "none") .attr("stroke", "#818181") .attr("stroke-width", select === "World" ? 2 : 0.4) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("vector-effect", "non-scaling-stroke"); const rScale = d3.scaleSqrt() .domain([0, d3.max(airesData.features, d => d.properties.pop23)]) .range([0, width / 192]); // copie triée : on ne modifie plus airesData.features const sortedFeatures = [...airesData.features].sort((a, b) => b.properties.pop23 - a.properties.pop23); const circles = zoomLayer.append("g") .selectAll("circle") .data(sortedFeatures) .join("circle") .attr("transform", d => `translate(${projection(d.geometry.coordinates)})`) .attr("r", d => rScale(d.properties.pop23)) .attr("fill", d => colorScale(d.properties.edv23)) .attr("fill-opacity", d => inSelection(d.properties.zoneEn) && legende1.has(colorScale.range().indexOf(colorScale(d.properties.edv23))) ? 0.95 : 0.00) .attr("stroke", d => inSelection(d.properties.zoneEn) ? "#414141" : "none") .attr("stroke-width", 0.5) .attr("vector-effect", "non-scaling-stroke") .on("mouseover", function(event, d) { if (!inSelection(d.properties.zoneEn)) return; d3.select(this).raise().attr("stroke", "#111").attr("stroke-width", 1.5); tooltip.show(event, circleHTML(d), colorScale(d.properties.edv23)); }) .on("mousemove", (event) => tooltip.move(event)) .on("mouseout", function(event, d) { if (!inSelection(d.properties.zoneEn)) return; d3.select(this).attr("stroke", "#414141").attr("stroke-width", 0.5); tooltip.hide(); }) .on("click", function(event, d) { if (!inSelection(d.properties.zoneEn)) return; event.stopPropagation(); tooltip.handleClick(event, d.properties.Data__Enti, circleHTML(d), colorScale(d.properties.edv23)); }) // Atténuation du rescale des cercles au zoom (partagée avec la légende) const zoomAttenuation = 0.5; // ---- Légende des cercles proportionnels ----- const lgValues = [40000, 30000]; const lgLabels = ["40 millions", "30 millions"]; const lgFont = "Poppins, sans-serif"; const lgSize = "clamp(9px,2cqw,11px)"; const lgX0 = 10; const lgBase = height - 10; const lgGap = 15; const showLegend = rWidth >= 600; let legendBg, legendG, lgTitle, lgItems; if (showLegend) { legendBg = svg.append("rect") .attr("fill", "white").attr("fill-opacity", 0.85).attr("rx", 4); legendG = svg.append("g").attr("pointer-events", "none"); lgTitle = legendG.append("text") .attr("x", lgX0) .style("font-family", lgFont).style("font-size", lgSize) .style("font-weight", 600).style("fill", "#414141") .text("Population size (2023)"); lgItems = lgValues.map((v, i) => { const g = legendG.append("g"); const c = g.append("circle") .attr("fill", "none").attr("stroke", "#414141").attr("stroke-width", 0.5); const l = g.append("path") .attr("fill", "none").attr("stroke", "#414141").attr("stroke-width", 0.5); const t = g.append("text") .attr("dominant-baseline", "middle") .style("font-family", lgFont).style("font-size", lgSize).style("fill", "#414141") .text(lgLabels[i]); return { v, c, l, t, i }; }); } // fond blanc ajusté au contenu de la légende const fitLegendBg = () => { if (!legendG || !legendBg) return; const b = legendG.node().getBBox(); if (!b.width) return; legendBg.attr("x", b.x - 6).attr("y", b.y - 5) .attr("width", b.width + 12).attr("height", b.height + 10); }; function updateLegend(k, adjustBg = true) { if (!showLegend) return; const f = Math.pow(k, zoomAttenuation); const rs = lgValues.map(v => rScale(v) * f); const cx = lgX0 + rs[0]; const labelX = lgX0 + 2 * rs[0] + 28; const tops = rs.map(r => lgBase - 2 * r); const ly = [Math.min(tops[0], tops[1] - lgGap), tops[1]]; lgTitle.attr("y", ly[0] - 16); lgItems.forEach(({ c, l, t, i }) => { c.attr("cx", cx).attr("cy", lgBase - rs[i]).attr("r", rs[i]); l.attr("d", `M${cx},${tops[i]} H${cx + rs[0] + 4} L${labelX - 6},${ly[i]} H${labelX - 3}`); t.attr("x", labelX).attr("y", ly[i]); }); fitLegendBg(); } updateLegend(1); if (showLegend) { requestAnimationFrame(fitLegendBg); if (document.fonts?.ready) document.fonts.ready.then(fitLegendBg); } // légende pour type de zône if (showLegend) { const zlX = lgX0 + 170; const zlY = lgBase - 40; const zlG = svg.append("g").attr("pointer-events", "none"); const blobZone = "M4,10 C2,6 6,1 12,1 C18,0 24,3 23,7 C25,11 20,15 14,14 C8,16 3,14 4,10 Z"; zlG.append("path") .attr("transform", `translate(${zlX},${zlY})`) .attr("d", blobZone) .attr("fill", "#f1f1f1") .attr("stroke", "#222330") .attr("stroke-width", 0.4); zlG.append("text") .attr("x", zlX + 34).attr("y", zlY + 7) .style("font-family", lgFont).style("font-size", lgSize).style("fill", "#414141") .text("Zones of"); zlG.append("text") .attr("x", zlX + 34).attr("y", zlY + 18) .style("font-family", lgFont).style("font-size", lgSize).style("fill", "#414141") .text("similar population"); if (select === "World") { const blobRegroup = "M6,10 C4,5 9,1 14,2 C19,1 22,6 19,10 C21,14 15,17 10,15 C5,17 3,13 6,10 Z"; zlG.append("path") .attr("transform", `translate(${zlX},${zlY + 28})`) .attr("d", blobRegroup) .attr("fill", "none") .attr("stroke", "#818181") .attr("stroke-width", 2); zlG.append("text") .attr("x", zlX + 34).attr("y", zlY + 35) .style("font-family", lgFont).style("font-size", lgSize).style("fill", "#414141") .text("Regional"); zlG.append("text") .attr("x", zlX + 34).attr("y", zlY + 46) .style("font-family", lgFont).style("font-size", lgSize).style("fill", "#414141") .text("areas"); } } // ZOOM zoomBehavior.on("zoom", (event) => { zoomLayer.attr("transform", event.transform); circles.attr("r", d => rScale(d.properties.pop23) / Math.pow(event.transform.k, 1 - zoomAttenuation)); updateLegend(event.transform.k); }); zoomBehavior.on("end", (event) => { mutable mapZoomState = event.transform; }); svg.call(zoomBehavior); // détecte un changement réel de sélection (pas juste un re-render dû à la légende/zoom manuel) const isSelectChange = select !== lastSelect; if (isSelectChange) { mutable lastSelect = select; } if (isSelectChange) { if (select === "Monde") { svg.transition().duration(750).call(zoomBehavior.transform, d3.zoomIdentity); } else { const zoneFeatures = aire30.features.filter(d => d.properties.zoneEn === select); const exclusion = zoneBoundsExclusions[select]; const lonLatBounds = manualLonLatBounds(zoneFeatures, exclusion?.minLon ?? -180, exclusion?.maxLon ?? 180, exclusion?.minLat ?? -90, exclusion?.maxLat ?? 90 ); const [[x0, y0], [x1, y1]] = path.bounds(bboxToPolygon(lonLatBounds)); const kMax = zoomBehavior.scaleExtent()[1]; const k = Math.min(kMax, 0.9 * Math.min(width / (x1 - x0), height / (y1 - y0))); const tx = width / 2 - k * (x0 + x1) / 2; const ty = height / 2 - k * (y0 + y1) / 2; svg.transition().duration(750).call( zoomBehavior.transform, d3.zoomIdentity.translate(tx, ty).scale(k) ); } } else { svg.node().__zoom = mapZoomState; zoomLayer.attr("transform", mapZoomState); circles.attr("r", d => rScale(d.properties.pop23) / Math.pow(mapZoomState.k, 1 - zoomAttenuation)); updateLegend(mapZoomState.k); } svg.on("click", () => tooltip.forceHide()); const container = html`

`; container.appendChild(svg.node()); const btnStyle = ` position:absolute; width:26px; height:26px; z-index:20; background:white; border:1px solid #999; border-radius:3px; cursor:pointer; font-size:14px; line-height:1; `; const btnPlus = html``; const btnMinus = html``; const btnReset = html``; btnPlus.onclick = () => svg.transition().call(zoomBehavior.scaleBy, 1.4); btnMinus.onclick = () => svg.transition().call(zoomBehavior.scaleBy, 1 / 1.4); btnReset.onclick = () => svg.transition().call(zoomBehavior.transform, d3.zoomIdentity); container.appendChild(btnPlus); container.appendChild(btnMinus); container.appendChild(btnReset); return container; }34:T62f,tooltipDotPlot = function(items) { if (!items.length) return ""; const sorted = items.slice().sort((a, b) => a.value - b.value); const scaleMin = globalEdvScale.min; const scaleMax = globalEdvScale.max; const width = 220; const labelW = 80; const valueW = 50; const trackX0 = labelW + valueW + 5; const trackWidth = width - trackX0 - 6; const rowHeight = 17; const height = sorted.length * rowHeight; const x = (v) => trackX0 + ((v - scaleMin) / (scaleMax - scaleMin)) * trackWidth; const rowsSvg = sorted.map((d, i) => { const y = 8 + i * rowHeight; const cx = x(d.value); const isAire = d.level === "aire"; const dotColor = colorScale(d.value); const dotRadius = 4; const dotStroke = isAire ? "#222330" : "#222330"; const dotStrokeWidth = isAire ? 1 : .5; const labelWeight = isAire ? "600" : "400"; return ` ${d.label.length > 14 ? d.label.slice(0, 14) + "…" : d.label} ${d.value.toFixed(1).replace(".", ",")} `; }).join(""); return ``; }35:Taa9,tooltip = { const el = html`

`; document.body.appendChild(el); // Le tooltip doit être dans l'overlay plein écran (top layer) pour être visible function attach() { const host = document.fullscreenElement ?? document.querySelector(".map-fs-wrap.is-full") ?? document.body; if (el.parentNode !== host) host.appendChild(el); } let pinned = false; let pinnedKey = null; function render(html_content, borderColor, event) { attach(); el.innerHTML = html_content + `

✕ fermer

`; el.style.border = borderColor ? `2px solid ${borderColor}` : "none"; el.style.opacity = 1; move(event); el.querySelector("div:last-child").onclick = () => forceHide(); } function move(event) { const tooltipWidth = el.getBoundingClientRect().width; const tooltipHeight = el.getBoundingClientRect().height; const offset = 12; let left = event.clientX + offset; if (left + tooltipWidth > window.innerWidth) left = event.clientX - offset - tooltipWidth; let top = event.clientY + offset; if (top + tooltipHeight > window.innerHeight) top = event.clientY - offset - tooltipHeight; el.style.left = left + "px"; el.style.top = top + "px"; } function forceHide() { pinned = false; pinnedKey = null; el.style.opacity = 0; } // Entrée/sortie du plein écran : on ferme le tooltip et on le remet dans le bon parent const onFsChange = () => { forceHide(); attach(); }; document.addEventListener("fullscreenchange", onFsChange); invalidation.then(() => { document.removeEventListener("fullscreenchange", onFsChange); el.remove(); }); return { show(event, html_content, borderColor) { if (pinned) return; attach(); el.innerHTML = html_content; el.style.border = borderColor ? `2px solid ${borderColor}` : "none"; el.style.opacity = 1; move(event); }, move(event) { if (pinned) return; move(event); }, hide() { if (pinned) return; el.style.opacity = 0; }, handleClick(event, key, html_content, borderColor) { if (pinned && pinnedKey === key) { forceHide(); } else { pinned = true; pinnedKey = key; render(html_content, borderColor, event); } }, forceHide, isPinned: () => pinned }; }36:T411,debugZoom = { const zoneFeatures = aire30.features.filter(d => d.properties.zoneEn === select); const exclusion = zoneBoundsExclusions[select]; const lonLatBounds = manualLonLatBounds(zoneFeatures, exclusion ? exclusion.minLon : -180, exclusion ? exclusion.maxLon : 180); const outline = { type: "Polygon", coordinates: [[ ...d3.range(-180, 181, 1).map(x => [x, 83]), ...d3.range(83, -61, -1).map(y => [180, y]), ...d3.range(180, -181, -1).map(x => [x, -60]), ...d3.range(-60, 84, 1).map(y => [-180, y]) ]] }; const projection = d3.geoRobinson(); projection.fitExtent([[0, 0], [rWidth, rWidth * 520 / 960]], outline); const path = d3.geoPath(projection); const [[x0, y0], [x1, y1]] = path.bounds(bboxToPolygon(lonLatBounds)); const kMax = zoomBehavior.scaleExtent()[1]; const width = rWidth, height = rWidth * 520 / 960; const k = Math.min(kMax, 0.9 * Math.min(width / (x1 - x0), height / (y1 - y0))); return { select, lonLatBounds, x0, y0, x1, y1, k, kMax, width, height }; }37:T59a, histo = Plot.plot({ width: rWidth>600 ? rWidth/2.5 : rWidth, height: rWidth>900 ? 0.27*rWidth : rWidth>600 ? 0.325*rWidth : 170, marginTop: rWidth>900 ? 50 : rWidth>600 ? 40 : 30, marginBottom: rWidth>900 ? 50 : rWidth>600 ? 40 : 30, x: {label: "Life expectancy", ticks: [50,55,60,65,70,75,80,85], labelArrow:false}, y: {label: "Number of zones", grid: true, domain: [0,30], labelArrow:false}, marks: [ Plot.rectY(histogram, { x1: "xInf", x2: "xSup", y: "y", fill: d => colorScale2((d.xInf + d.xSup) / 2), // ça c'est subtil la couleur au milieu qui s'affiche sur toute la largeur de la barre. stroke: "black", strokeWidth: 0.2, channels: { "Life expectancy:": d => `${d.xInf.toFixed(1)} – ${d.xSup.toFixed(1)} years`, "Number of zones: ": d => `${d.y}` }, tip: { format: { x1: false, x2: false, y: false, fill: false, "Intervalle": true, "Zones": true }, strokeWidth:0 } }), Plot.ruleX([64, 67, 70, 73.2, 77, 80], {stroke: "black"}), Plot.ruleY([0]), Plot.text([64], {x:64, y:30.5, lineAnchor: "bottom"}), Plot.text([67], {x:67, y:30.5, lineAnchor: "bottom"}), Plot.text([70], {x:70, y:30.5, lineAnchor: "bottom"}), Plot.text([73.2], {x:73.2, y:30.5, lineAnchor: "bottom"}), Plot.text([77], {x:77, y:30.5, lineAnchor: "bottom"}), Plot.text([80], {x:80, y:30.5, lineAnchor: "bottom"}), ] })38:T611,boxHisto = html`

Histogram of frequencies

${histo}

`39:T3655,function legendClasses(source, { length = 300, // 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 = null, // taille des labels : nombre (px) OU chaîne CSS ("clamp(9px, 1vw, 12px)"...). null = défaut CSS (10px) titleFontSize = null, // taille du titre : nombre (px) OU chaîne CSS. null = calc(fontSize * 1.2) 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) { root.style.setProperty("--legend-font-size", typeof fontSize === "number" ? `${fontSize}px` : fontSize); } if (titleFontSize !== null) { root.style.setProperty("--legend-title-font-size", typeof titleFontSize === "number" ? `${titleFontSize}px` : titleFontSize); } 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`

Histogram of frequencies

Life expectancy at birth in 2023