28:null 29:["$","title",null,{"children":"New: international comparisons of ageing - EN version (4554) | Marc Thevenin | Observable"}] 2e:Ta9a,boxPlotDiv = htl.html`

${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.

`2f:T2513,plotVieux = { // ── Conteneur wrapper 100% ──────────────────────────────────────────────── const wrapper = document.createElement("div"); wrapper.style.cssText = "width:100%; box-sizing:border-box;"; // ── Tooltip ─────────────────────────────────────────────────────────────── 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()); // ── Paramètres fixes ────────────────────────────────────────────────────── const cageKey = "65 years and over"; const n = 12; const inset = 1.5; const delay = 200; const offset = 14; // même que plotVieux : la barre déborde à gauche de l'axe const maskExtra = 1; const xTicks = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45]; 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; } // ── SVG (créé une seule fois, redimensionné par ResizeObserver) ─────────── const svgEl = d3.create("svg") .style("font-family", "poppins, sans-serif") .style("overflow", "visible") .style("display", "block") .style("width", "100%"); wrapper.appendChild(svgEl.node()); // Groupes persistants (ordre important : masques au-dessus des barres) 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); // État courant let currentYear = 2023; let xScale, yPos, barHeight, innerW, innerH, W, H; // ── Fonction de (re)dessin complet ──────────────────────────────────────── function draw(containerWidth) { W = containerWidth; H = W > 850 ? 0.85 * W : W > 400 ? 0.68 * W : 250; const marginTop = 20; const marginLeft = W > 1200 ? 180 : W > 900 ? 160 : W > 500 ? 120 : 90; const marginBottom = W > 1200 ? 100 : W > 900 ? 80 : W > 500 ? 50 : 40; const marginRight = W > 1200 ? 35 : W > 900 ? 30 : W > 500 ? 25 : 20; innerW = W - marginLeft - marginRight; innerH = H - marginTop - marginBottom; barHeight = innerH / n; const rx = W > 600 ? 12 : 6; const ry = W > 600 ? 12 : 6; const fontSize = W > 900 ? "calc(20px + 1vw)" : W > 400 ? "13px" : "11px"; const strokeW = W > 500 ? 1 : 0.5; xScale = d3.scaleLinear().domain([0, 50]).range([0, innerW]); yPos = rank => (rank - 1) * barHeight; svgEl.attr("height", H); g.attr("transform", `translate(${marginLeft},${marginTop})`); // Grid 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); // Axe X 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")); // Label axe X xLabelEl.attr("x", innerW / 2).attr("y", innerH + marginBottom * 0.95).style("font-size", fontSize); // RuleX à x=0 ruleX0.attr("x1", xScale(0)).attr("x2", xScale(0)).attr("y1", 0).attr("y2", innerH); updateBars(currentYear, d3.transition().duration(0), rx, ry, fontSize, strokeW); } // ── Fonction update ─────────────────────────────────────────────────────── function updateBars(yr, tr, rx, ry, fontSize, strokeW) { const frame = getFrame(yr); const op = getOpacity(yr); const bH = barHeight; // Barres 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", (event, d) => 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)}%`)) .on("mouseleave", () => tooltip.style("opacity", 0)), update => update .on("mousemove", (event, d) => 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)}%`)) .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()) ); // Masques gauches 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() ); // Noms des pays sur l'axe Y 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()) ); } // ── ResizeObserver ──────────────────────────────────────────────────────── 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()); // ── API publique ────────────────────────────────────────────────────────── wrapper._update = (yr) => { currentYear = yr; if (!xScale) return; const rx = W > 600 ? 12 : 6; const ry = W > 600 ? 12 : 6; const fontSize = W > 900 ? "calc(20px + 1vw)" : W > 400 ? "13px" : "11px"; const strokeW = W > 500 ? 1 : 0.5; const tr = d3.transition().duration(delay * 1.85).ease(d3.easeLinear); updateBars(yr, tr, rx, ry, fontSize, strokeW); }; return wrapper; } 30:T2514,plotJeune = { // ── Conteneur wrapper 100% ──────────────────────────────────────────────── const wrapper = document.createElement("div"); wrapper.style.cssText = "width:100%; box-sizing:border-box;"; // ── Tooltip ─────────────────────────────────────────────────────────────── 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()); // ── Paramètres fixes ────────────────────────────────────────────────────── const cageKey = "Less than 15 years"; const n = 12; const inset = 1.5; const delay = 200; const offset = 14; // même que plotVieux : la barre déborde à gauche de l'axe const maskExtra = 1; const xTicks = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45]; 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; } // ── SVG (créé une seule fois, redimensionné par ResizeObserver) ─────────── const svgEl = d3.create("svg") .style("font-family", "poppins, sans-serif") .style("overflow", "visible") .style("display", "block") .style("width", "100%"); wrapper.appendChild(svgEl.node()); // Groupes persistants (ordre important : masques au-dessus des barres) 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); // État courant let currentYear = 2023; let xScale, yPos, barHeight, innerW, innerH, W, H; // ── Fonction de (re)dessin complet ──────────────────────────────────────── function draw(containerWidth) { W = containerWidth; H = W > 850 ? 0.85 * W : W > 400 ? 0.68 * W : 250; const marginTop = 20; const marginLeft = W > 1200 ? 180 : W > 900 ? 160 : W > 500 ? 120 : 90; const marginBottom = W > 1200 ? 100 : W > 900 ? 80 : W > 500 ? 50 : 40; const marginRight = W > 1200 ? 35 : W > 900 ? 30 : W > 500 ? 25 : 20; innerW = W - marginLeft - marginRight; innerH = H - marginTop - marginBottom; barHeight = innerH / n; const rx = W > 600 ? 12 : 6; const ry = W > 600 ? 12 : 6; const fontSize = W > 900 ? "calc(20px + 1vw)" : W > 400 ? "13px" : "11px"; const strokeW = W > 500 ? 1 : 0.5; xScale = d3.scaleLinear().domain([0, 50]).range([0, innerW]); yPos = rank => (rank - 1) * barHeight; svgEl.attr("height", H); g.attr("transform", `translate(${marginLeft},${marginTop})`); // Grid 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); // Axe X 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")); // Label axe X xLabelEl.attr("x", innerW / 2).attr("y", innerH + marginBottom * 0.95).style("font-size", fontSize); // RuleX à x=0 ruleX0.attr("x1", xScale(0)).attr("x2", xScale(0)).attr("y1", 0).attr("y2", innerH); updateBars(currentYear, d3.transition().duration(0), rx, ry, fontSize, strokeW); } // ── Fonction update ─────────────────────────────────────────────────────── function updateBars(yr, tr, rx, ry, fontSize, strokeW) { const frame = getFrame(yr); const op = getOpacity(yr); const bH = barHeight; // Barres 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", (event, d) => 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)}%`)) .on("mouseleave", () => tooltip.style("opacity", 0)), update => update .on("mousemove", (event, d) => 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)}%`)) .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()) ); // Masques gauches 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() ); // Noms des pays sur l'axe Y 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()) ); } // ── ResizeObserver ──────────────────────────────────────────────────────── 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()); // ── API publique ────────────────────────────────────────────────────────── wrapper._update = (yr) => { currentYear = yr; if (!xScale) return; const rx = W > 600 ? 12 : 6; const ry = W > 600 ? 12 : 6; const fontSize = W > 900 ? "calc(20px + 1vw)" : W > 400 ? "13px" : "11px"; const strokeW = W > 500 ? 1 : 0.5; const tr = d3.transition().duration(delay * 1.85).ease(d3.easeLinear); updateBars(yr, tr, rx, ry, fontSize, strokeW); }; return wrapper; } 31: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; } 32:T957, 33:[] 2c:{"id":"db2b4741af2c2b76","slug":null,"title":"New: international comparisons of ageing - EN version (4554)","thumbnail":"6abd7a420c0f43283c9ca240ad5893ee9575a4511da15796a06761338079ac7e","access_level":"public","create_time":"$D2026-07-13T12:20:50.505Z","update_time":"$D2026-08-18T12:25:00.804Z","view_time":null,"first_public_time":"$D2026-07-13T12:20:50.505Z","has_unpublished_edits":null,"fork":{"id":"193e44752c421436","slug":null,"title":"New: comparaisons internationales du vieillissement - FR version (4554)","owner":{"id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin"}},"stars":0,"starred":false,"owner":{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/6ae55bec6f9ba0bbe9597b60f19a08df8d2f5b06630eb6929919d0306a71b058","tier":"free_2026"},"version":1137,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/ff86d75fca849a58a73d37988818fed6fa039e41541174c8654ac020ffc491f5","tier":null}],"members":[{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/6ae55bec6f9ba0bbe9597b60f19a08df8d2f5b06630eb6929919d0306a71b058","tier":"free_2026","role":"editor"},{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/ff86d75fca849a58a73d37988818fed6fa039e41541174c8654ac020ffc491f5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"New: international comparisons of ageing - EN version (4554)","cells":[{"id":0,"value":"# New: international comparisons of ageing - EN version (4554) \nResponsive bar chart race","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1065,"value":"Link to \"All about Population\" - INED - ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":601,"value":"boxInput = htl.html `\n${viewof year}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"currentTime = new Date()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"filter = data.filter(d=> year === d.year && d.rank===1 && d.cageSEN===\"Less than 15 years\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"typeData = filter.map(d=>({\n data: d.data\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"donnee = typeData[0].data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"viewof year = Scrubber(d3.sort(d3.union(data.map((d) => d.year))), {loop: false, delay: 200, autoplay: false, value: 2023})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"// leg = Plot.legend({className:\"legend\", swatchWidth: 30, swatchHeight: 15, color: { \n// domain:[\"Europe\", \"America\", \"Asia\", \"Türkiye and Israel\"],\n// range: [pal100[0], pal100[3],pal100[4],pal100[5]]\n// }})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"leg = legend( [\"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 2d:"$2c:body"