25:["$","title",null,{"children":"International comparisons of ageing - EN version (4554) | Marc Thevenin | Observable"}] 49:Tcea,boxPlotDiv = { const content = htl.html`

Proportions of young and older people since 1950, across a selected group of countries

${viewof year}

${leg} ${cssLegend}

2023 — Observations

Less than 15 years

${plotJeune}

65 years and over

${plotVieux}

Note: Observations from 1950 to 2023; projections («medium» scenario) from 2024 to 2100.

Source : World Population Prospects. United Nations.

`; return fullscreen(content, "boxPlot"); }4a:T1f3a,plotVieux = { const wrapper = document.createElement("div"); wrapper.style.cssText = "width:100%; box-sizing:border-box;"; const tooltip = d3.select("body").append("div") .style("position", "fixed").style("pointer-events", "none") .style("background", "white").style("border", "1px solid #ccc") .style("border-radius", "4px").style("padding", "6px 10px") .style("font-family", "poppins, sans-serif").style("font-size", "13px") .style("color", "#222330") .style("box-shadow", "0 2px 6px rgba(0,0,0,.15)") .style("opacity", 0).style("z-index", 9999); invalidation.then(() => tooltip.remove()); // En plein écran, seul l'élément plein écran (et ses descendants) est visible : // on rattache donc le tooltip à cet élément, sinon au body. const attachTooltip = () => { const host = document.fullscreenElement || document.body; if (tooltip.node().parentNode !== host) host.appendChild(tooltip.node()); }; const cageKey = "65 years and over"; const n = 12; const inset = 1.5; const delay = 200; const offset = 14; const maskExtra = 1; const xTicks = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45]; const countryNames = Array.from(new Set(data.filter(d => d.cageSEN === cageKey).map(d => d.countryEn))); const colorScale = d3.scaleOrdinal() .domain(["Europe", "America", "Asia", "Türkiye and Israel"]) .range([pal100[0], pal100[3], pal100[4], pal100[5]]); function getFrame(yr) { return data.filter(d => d.year === yr && d.cageSEN === cageKey).sort((a, b) => a.rank - b.rank); } function getOpacity(yr) { if (yr < 2024) return 1; if (yr < 2050) return 0.8; if (yr < 2075) return 0.7; return 0.6; } const svgEl = d3.create("svg") .style("font-family", "poppins, sans-serif") .style("overflow", "visible") .style("display", "block") .style("width", "100%"); wrapper.appendChild(svgEl.node()); const g = svgEl.append("g"); const gridG = g.append("g").attr("class", "grid"); const xAxisG = g.append("g").attr("class", "x-axis"); const xLabelEl = g.append("text").attr("text-anchor", "middle").style("font-family", "poppins, sans-serif").style("fill", "#222330").text("%"); const barsG = g.append("g").attr("class", "bars"); const masksG = g.append("g").attr("class", "masks").style("pointer-events", "none"); const yAxisG = g.append("g").attr("class", "y-axis"); const ruleX0 = g.append("line").attr("class", "rule-x0").attr("stroke", "#222330").attr("stroke-width", 1.5); let currentYear = 2023; let xScale, yPos, barHeight, innerW, innerH, W, H, fontSize; function params() { return { rx: W > 600 ? 12 : 6, ry: W > 600 ? 12 : 6, strokeW: W > 500 ? 1 : 0.5 }; } function draw(containerWidth) { W = containerWidth; // Plein écran : hauteur légèrement réduite (facteur 0.9) const full = !!document.querySelector(".map-fs-wrap.is-full"); const heightFactor = full ? 0.9 : 1; H = heightFactor * (W > 850 ? 0.85 * W : W > 400 ? 0.68 * W : 250); const m = measureMargins(countryNames, W); const marginTop = 20; const marginLeft = m.marginLeft; const marginRight = m.marginRight; const marginBottom = W > 900 ? 80 : W > 600 ? 50 : 40; fontSize = m.fontPx + "px"; innerW = W - marginLeft - marginRight; innerH = H - marginTop - marginBottom; barHeight = innerH / n; xScale = d3.scaleLinear().domain([0, 50]).range([0, innerW]); yPos = rank => (rank - 1) * barHeight; svgEl.attr("height", H); g.attr("transform", `translate(${marginLeft},${marginTop})`); gridG.selectAll("line").data(xTicks).join("line") .attr("x1", d => xScale(d)).attr("x2", d => xScale(d)) .attr("y1", 0).attr("y2", innerH) .attr("stroke", "#e0e0e0").attr("stroke-width", 1); xAxisG.attr("transform", `translate(0,${innerH})`) .call(d3.axisBottom(xScale).tickValues(xTicks).tickSize(10).tickFormat(d => d)) .call(ax => ax.select(".domain").remove()) .call(ax => ax.selectAll("text") .style("font-family", "roboto, sans-serif") .style("font-size", fontSize).style("fill", "#222330")); xLabelEl.attr("x", innerW / 2).attr("y", innerH + marginBottom * 0.95).style("font-size", fontSize); ruleX0.attr("x1", xScale(0)).attr("x2", xScale(0)).attr("y1", 0).attr("y2", innerH); const {rx, ry, strokeW} = params(); updateBars(currentYear, d3.transition().duration(0), rx, ry, fontSize, strokeW); } function updateBars(yr, tr, rx, ry, fontSize, strokeW) { const frame = getFrame(yr); const op = getOpacity(yr); const bH = barHeight; const showTip = (event, d) => { attachTooltip(); tooltip.style("opacity", 1) .style("left", (event.clientX + 12) + "px") .style("top", (event.clientY - 28) + "px") .html(`${d.countryflagEn}
${d.cageSEN}
Rank\u00a0: ${d.rank}
${d.page.toFixed(1)}%`); }; barsG.selectAll("rect.bar").data(frame, d => d.country).join( enter => enter.append("rect").attr("class", "bar") .attr("x", -offset) .attr("y", d => yPos(d.rank) + inset) .attr("width", d => xScale(d.page) + offset) .attr("height", bH - 2 * inset) .attr("rx", rx).attr("ry", ry) .attr("fill", d => colorScale(d.regionEn)) .attr("fill-opacity", op) .attr("stroke", "black").attr("stroke-width", strokeW) .style("cursor", "pointer") .on("mousemove", showTip) .on("mouseleave", () => tooltip.style("opacity", 0)), update => update .on("mousemove", showTip) .on("mouseleave", () => tooltip.style("opacity", 0)) .call(u => u.transition(tr) .attr("y", d => yPos(d.rank) + inset) .attr("width", d => xScale(d.page) + offset) .attr("height", bH - 2 * inset) .attr("rx", rx).attr("ry", ry) .attr("fill", d => colorScale(d.regionEn)) .attr("fill-opacity", op) .attr("stroke-width", strokeW)), exit => exit.call(e => e.transition(tr).attr("width", 0).remove()) ); masksG.selectAll("rect.mask-left").data(frame, d => d.country).join( enter => enter.append("rect").attr("class", "mask-left") .attr("x", -offset - maskExtra) .attr("y", d => yPos(d.rank) + inset - maskExtra) .attr("width", offset + maskExtra) .attr("height", bH - 2 * inset + 2 * maskExtra) .attr("fill", "white").attr("stroke", "none"), update => update.call(u => u.transition(tr) .attr("y", d => yPos(d.rank) + inset - maskExtra) .attr("height", bH - 2 * inset + 2 * maskExtra)), exit => exit.remove() ); yAxisG.selectAll("text.country-label").data(frame, d => d.countryEn).join( enter => enter.append("text").attr("class", "country-label") .attr("x", -8) .attr("y", d => yPos(d.rank) + bH / 2) .attr("dy", "0.35em") .attr("text-anchor", "end") .style("font-family", "poppins, sans-serif") .style("font-size", fontSize) .style("fill", "#222330") .text(d => d.countryEn), update => update .text(d => d.countryEn) .style("font-size", fontSize) .call(u => u.transition(tr) .attr("y", d => yPos(d.rank) + bH / 2)), exit => exit.call(e => e.transition(tr).style("opacity", 0).remove()) ); } let roWidth = 0; const ro = new ResizeObserver(entries => { const newW = entries[0].contentRect.width; if (newW > 0 && Math.abs(newW - roWidth) > 1) { roWidth = newW; draw(newW); } }); ro.observe(wrapper); invalidation.then(() => ro.disconnect()); wrapper._update = (yr) => { currentYear = yr; if (!xScale) return; const {rx, ry, strokeW} = params(); const tr = d3.transition().duration(delay * 1.85).ease(d3.easeLinear); updateBars(yr, tr, rx, ry, fontSize, strokeW); }; return wrapper; }4b:T1f3b,plotJeune = { const wrapper = document.createElement("div"); wrapper.style.cssText = "width:100%; box-sizing:border-box;"; const tooltip = d3.select("body").append("div") .style("position", "fixed").style("pointer-events", "none") .style("background", "white").style("border", "1px solid #ccc") .style("border-radius", "4px").style("padding", "6px 10px") .style("font-family", "poppins, sans-serif").style("font-size", "13px") .style("color", "#222330") .style("box-shadow", "0 2px 6px rgba(0,0,0,.15)") .style("opacity", 0).style("z-index", 9999); invalidation.then(() => tooltip.remove()); // En plein écran, seul l'élément plein écran (et ses descendants) est visible : // on rattache donc le tooltip à cet élément, sinon au body. const attachTooltip = () => { const host = document.fullscreenElement || document.body; if (tooltip.node().parentNode !== host) host.appendChild(tooltip.node()); }; const cageKey = "Less than 15 years"; const n = 12; const inset = 1.5; const delay = 200; const offset = 14; const maskExtra = 1; const xTicks = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45]; const countryNames = Array.from(new Set(data.filter(d => d.cageSEN === cageKey).map(d => d.countryEn))); const colorScale = d3.scaleOrdinal() .domain(["Europe", "America", "Asia", "Türkiye and Israel"]) .range([pal100[0], pal100[3], pal100[4], pal100[5]]); function getFrame(yr) { return data.filter(d => d.year === yr && d.cageSEN === cageKey).sort((a, b) => a.rank - b.rank); } function getOpacity(yr) { if (yr < 2024) return 1; if (yr < 2050) return 0.8; if (yr < 2075) return 0.7; return 0.6; } const svgEl = d3.create("svg") .style("font-family", "poppins, sans-serif") .style("overflow", "visible") .style("display", "block") .style("width", "100%"); wrapper.appendChild(svgEl.node()); const g = svgEl.append("g"); const gridG = g.append("g").attr("class", "grid"); const xAxisG = g.append("g").attr("class", "x-axis"); const xLabelEl = g.append("text").attr("text-anchor", "middle").style("font-family", "poppins, sans-serif").style("fill", "#222330").text("%"); const barsG = g.append("g").attr("class", "bars"); const masksG = g.append("g").attr("class", "masks").style("pointer-events", "none"); const yAxisG = g.append("g").attr("class", "y-axis"); const ruleX0 = g.append("line").attr("class", "rule-x0").attr("stroke", "#222330").attr("stroke-width", 1.5); let currentYear = 2023; let xScale, yPos, barHeight, innerW, innerH, W, H, fontSize; function params() { return { rx: W > 600 ? 12 : 6, ry: W > 600 ? 12 : 6, strokeW: W > 500 ? 1 : 0.5 }; } function draw(containerWidth) { W = containerWidth; // Plein écran : hauteur légèrement réduite (facteur 0.9) const full = !!document.querySelector(".map-fs-wrap.is-full"); const heightFactor = full ? 0.9 : 1; H = heightFactor * (W > 850 ? 0.85 * W : W > 400 ? 0.68 * W : 250); const m = measureMargins(countryNames, W); const marginTop = 20; const marginLeft = m.marginLeft; const marginRight = m.marginRight; const marginBottom = W > 900 ? 80 : W > 600 ? 50 : 40; fontSize = m.fontPx + "px"; innerW = W - marginLeft - marginRight; innerH = H - marginTop - marginBottom; barHeight = innerH / n; xScale = d3.scaleLinear().domain([0, 50]).range([0, innerW]); yPos = rank => (rank - 1) * barHeight; svgEl.attr("height", H); g.attr("transform", `translate(${marginLeft},${marginTop})`); gridG.selectAll("line").data(xTicks).join("line") .attr("x1", d => xScale(d)).attr("x2", d => xScale(d)) .attr("y1", 0).attr("y2", innerH) .attr("stroke", "#e0e0e0").attr("stroke-width", 1); xAxisG.attr("transform", `translate(0,${innerH})`) .call(d3.axisBottom(xScale).tickValues(xTicks).tickSize(10).tickFormat(d => d)) .call(ax => ax.select(".domain").remove()) .call(ax => ax.selectAll("text") .style("font-family", "roboto, sans-serif") .style("font-size", fontSize).style("fill", "#222330")); xLabelEl.attr("x", innerW / 2).attr("y", innerH + marginBottom * 0.95).style("font-size", fontSize); ruleX0.attr("x1", xScale(0)).attr("x2", xScale(0)).attr("y1", 0).attr("y2", innerH); const {rx, ry, strokeW} = params(); updateBars(currentYear, d3.transition().duration(0), rx, ry, fontSize, strokeW); } function updateBars(yr, tr, rx, ry, fontSize, strokeW) { const frame = getFrame(yr); const op = getOpacity(yr); const bH = barHeight; const showTip = (event, d) => { attachTooltip(); tooltip.style("opacity", 1) .style("left", (event.clientX + 12) + "px") .style("top", (event.clientY - 28) + "px") .html(`${d.countryflagEn}
${d.cageSEN}
Rank\u00a0: ${d.rank}
${d.page.toFixed(1)}%`); }; barsG.selectAll("rect.bar").data(frame, d => d.country).join( enter => enter.append("rect").attr("class", "bar") .attr("x", -offset) .attr("y", d => yPos(d.rank) + inset) .attr("width", d => xScale(d.page) + offset) .attr("height", bH - 2 * inset) .attr("rx", rx).attr("ry", ry) .attr("fill", d => colorScale(d.regionEn)) .attr("fill-opacity", op) .attr("stroke", "black").attr("stroke-width", strokeW) .style("cursor", "pointer") .on("mousemove", showTip) .on("mouseleave", () => tooltip.style("opacity", 0)), update => update .on("mousemove", showTip) .on("mouseleave", () => tooltip.style("opacity", 0)) .call(u => u.transition(tr) .attr("y", d => yPos(d.rank) + inset) .attr("width", d => xScale(d.page) + offset) .attr("height", bH - 2 * inset) .attr("rx", rx).attr("ry", ry) .attr("fill", d => colorScale(d.regionEn)) .attr("fill-opacity", op) .attr("stroke-width", strokeW)), exit => exit.call(e => e.transition(tr).attr("width", 0).remove()) ); masksG.selectAll("rect.mask-left").data(frame, d => d.country).join( enter => enter.append("rect").attr("class", "mask-left") .attr("x", -offset - maskExtra) .attr("y", d => yPos(d.rank) + inset - maskExtra) .attr("width", offset + maskExtra) .attr("height", bH - 2 * inset + 2 * maskExtra) .attr("fill", "white").attr("stroke", "none"), update => update.call(u => u.transition(tr) .attr("y", d => yPos(d.rank) + inset - maskExtra) .attr("height", bH - 2 * inset + 2 * maskExtra)), exit => exit.remove() ); yAxisG.selectAll("text.country-label").data(frame, d => d.countryEn).join( enter => enter.append("text").attr("class", "country-label") .attr("x", -8) .attr("y", d => yPos(d.rank) + bH / 2) .attr("dy", "0.35em") .attr("text-anchor", "end") .style("font-family", "poppins, sans-serif") .style("font-size", fontSize) .style("fill", "#222330") .text(d => d.countryEn), update => update .text(d => d.countryEn) .style("font-size", fontSize) .call(u => u.transition(tr) .attr("y", d => yPos(d.rank) + bH / 2)), exit => exit.call(e => e.transition(tr).style("opacity", 0).remove()) ); } let roWidth = 0; const ro = new ResizeObserver(entries => { const newW = entries[0].contentRect.width; if (newW > 0 && Math.abs(newW - roWidth) > 1) { roWidth = newW; draw(newW); } }); ro.observe(wrapper); invalidation.then(() => ro.disconnect()); wrapper._update = (yr) => { currentYear = yr; if (!xScale) return; const {rx, ry, strokeW} = params(); const tr = d3.transition().duration(delay * 1.85).ease(d3.easeLinear); updateBars(yr, tr, rx, ry, fontSize, strokeW); }; return wrapper; }4c:T812,function Scrubber(values, { format = value => value, delay = null, autoplay = true, loop = true, alternate = false, initial = 73 } = {}) { values = Array.from(values); const form = html``; let timer = null; let direction = 1; function start() { form.b.textContent = "Pause"; timer = delay === null ? requestAnimationFrame(tick) : setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (delay === null) cancelAnimationFrame(timer); else clearInterval(timer); timer = null; } function tick() { if (delay === null) timer = requestAnimationFrame(tick); if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; } form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && timer) form.b.onclick(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (timer) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); invalidation.then(stop); return form; } 4d:T957, 4e:Td3d,fullscreen = { const ICON_ENTER = ` `; const ICON_EXIT = ` `; const CSS = ` .map-fs-wrap { position: relative; } .map-fs-wrap .map-fs-button { position: absolute; top: 4px; right: 4px; z-index: 20; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 0; border-radius: 0; color: #ff564e; cursor: pointer; } .map-fs-wrap .map-fs-button:hover { color: #e63e36; background: rgba(255,86,78,.08); } .map-fs-wrap .map-fs-button:focus-visible { outline: 2px solid #ff564e; outline-offset: 2px; } /* Pas de plein écran sur petit écran (< 600 px) ; le bouton de sortie reste visible si on est déjà en plein écran (ex. rotation du téléphone) */ @media (max-width: 599px) { .map-fs-wrap:not(.is-full) .map-fs-button { display: none; } } .map-fs-wrap.is-full { --fs-pad: clamp(32px, 4vw, 48px); position: fixed; inset: 0; z-index: 99999; background: white; padding: var(--fs-pad); box-sizing: border-box; overflow: auto; } .map-fs-wrap.is-full .map-fs-button { top: calc(var(--fs-pad) / 2 - 16px); right: calc(var(--fs-pad) / 2 - 16px); } `; // content : le nœud à afficher ; id : identifiant unique du graphique return function fullscreen(content, id) { const key = `__fs_v2_${id}`; // incrémenter si vous modifiez ce code let box = window[key]; if (!box) { const button = htl.html``; button.innerHTML = ICON_ENTER; box = htl.html`

`; box.append(button); const set = (on) => { box.classList.toggle("is-full", on); button.innerHTML = on ? ICON_EXIT : ICON_ENTER; button.title = on ? "Quitter le plein écran" : "Plein écran"; button.setAttribute("aria-label", button.title); if (on && box.requestFullscreen) box.requestFullscreen().catch(() => {}); if (!on && document.fullscreenElement) document.exitFullscreen().catch(() => {}); }; button.addEventListener("click", () => set(!box.classList.contains("is-full"))); document.addEventListener("keydown", (e) => { if (e.key === "Escape" && box.classList.contains("is-full")) set(false); }); document.addEventListener("fullscreenchange", () => { if (!document.fullscreenElement && box.classList.contains("is-full")) set(false); }); window[key] = box; } box.querySelector(".map-fs-zone").replaceChildren(content); return box; }; }4f:[] 29:{"id":"3908de1d57b7a057","slug":null,"title":"International comparisons of ageing - EN version (4554)","thumbnail":"7f7b665baac37daeeae6dd58902d9337fc66e88c7e302f5f7b12e04385e2d65a","access_level":"public","create_time":"$D2026-10-08T07:12:29.249Z","update_time":"$D2026-10-28T15:48:10.085Z","view_time":null,"first_public_time":"$D2026-10-08T07:19:46.217Z","has_unpublished_edits":null,"fork":true,"stars":4,"starred":false,"owner":{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":"pro_2026","bio":"- On vacation 🏯 -\r\nStatistical Engineer at the french National Institute for Demographic Studies (INED)","followed_by_you":false,"follows_you":false},"version":1239,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":null,"bio":"- On vacation 🏯 -\r\nStatistical Engineer at the french National Institute for Demographic Studies (INED)","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":null,"role":"editor"},{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":"pro_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"672bba8050846e16","slug":"vieillissement","title":"Vieillissement","owner":{"id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin"}},"type":"notebook","body":{"titling":"auto","title":"International comparisons of ageing - EN version (4554)","cells":[{"id":0,"value":"# International comparisons of ageing - EN version (4554)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1065,"value":"articleLink({ lang: \"en\", kicker: \"All about population\",\nfr: {url: \"https://www.ined.fr/fr/tout-savoir-population/chiffres-graphiques-tableaux/vieillissement-en-france-en-chiffres\", title: \"importance relative de la population jeune et âgée, et comparaisons internationales\" },\nen: {url: \"https://www.ined.fr/en/tout-savoir-population/chiffres-graphiques-tableaux/vieillissement-en-france-en-chiffres#baby-boom-ageing-international\", title: \"Relative numbers of young and old, and international comparisons\"} })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"pal100 = [\n \"#ff564e\", //rouge 0\n \"#ff7aad\", //rose 1\n \"#522673\", //mauve 2 \n \"#0042eb\", //bleu 3\n \"#5cd49e\", //vert 4 \n \"#ffb322\", //jaune 5\n \"#4f4f4f\", //gray 6\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"currentTime = new Date()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"yearCaption = currentTime.getFullYear()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"data =d3.csv(\"https://raw.githubusercontent.com/mthevenin/tssp/refs/heads/main/Vieillissement_population/graph.csv\", d3.autoType) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1216,"value":"viewof year = {\n const years = d3.sort(d3.union(data.map((d) => d.year)));\n return scrubberIned(years, {loop: false, delay: 200, autoplay: false, initial: years.indexOf(2023)});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"leg = legIned( [\"Europe\", \"America\", \"Asia\", \"Türkiye and Israel\"], [pal100[0], pal100[3],pal100[4],pal100[5]], {interactive:false, fontSize:\"clamp(10px,1.8cqw,15px)\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"boxPlot = {\n // Dépendance réactive sur `year` : cette cellule se ré-exécute à chaque changement\n const yr = year;\n\n // Animer les deux graphiques D3 (le DOM de boxPlotDiv n'est PAS recréé)\n if (plotJeune && plotJeune._update) plotJeune._update(yr);\n if (plotVieux && plotVieux._update) plotVieux._update(yr);\n\n // Mettre à jour le label année/type\n const label = boxPlotDiv.querySelector(\"#race1-year-label\");\n if (label) {\n const type = yr < 2024 ? \"Observations\"\n : yr < 2050 ? \"Projections (2024–2049)\"\n : yr < 2075 ? \"Projections (2050–2074)\"\n : \"Projections (2075–2100)\";\n label.textContent = `${yr} — ${type}`;\n }\n\n // Retourner toujours le même nœud DOM (pas de recréation)\n return boxPlotDiv;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"$4d","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"cssInput","database":"$undefined"},{"id":1127,"value":"import {legend, cssLegend} from \"@wsthevenin/mtinput\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"import {legIned} from \"@wsthevenin/legined\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"import {scrubberIned} from \"@wsthevenin/inputined\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"measureMargins = function(names, W) {\n const ctx = document.createElement(\"canvas\").getContext(\"2d\");\n // Mode plein écran : la box porte la classe .is-full\n const full = !!document.querySelector(\".map-fs-wrap.is-full\");\n\n // Plein écran : police proportionnelle à la largeur du graphique (15 → 22 px)\n // Sinon : valeurs habituelles\n let fontPx = full\n ? Math.round(Math.max(15, Math.min(22, W / 42)))\n : (W > 900 ? 22 : W > 400 ? 13 : 11);\n\n const maxLeft = (full ? 0.45 : 0.42) * W; // plafond de la marge gauche\n const extraLeft = full ? 12 : 0; // marge gauche supplémentaire pour l'axe Y en plein écran\n let marginLeft;\n while (true) {\n ctx.font = `${fontPx}px poppins, sans-serif`;\n const w = d3.max(names, n => ctx.measureText(n).width) || 0;\n marginLeft = Math.ceil(w) + 8 + 8 + extraLeft; // 8 = décalage du texte, 8 = marge de sécurité\n if (marginLeft <= maxLeft || fontPx <= 8) break;\n fontPx -= 1;\n }\n return {marginLeft, marginRight: 10, fontPx};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1129,"value":"import {articleLink} from \"@mthevenin/popsoc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1162,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 24:null