2b:null 2c:["$","title",null,{"children":"FULLSCREEN Pyramides des âges France FR - resize (24580) | Marc Thevenin | Observable"}] 31:T4f8,pyramideContenu = { const content = htl.html`

Pyramides des âges de la France depuis 1901

${viewof rWidth}

${boxPlotInput}

${plot2Side}

${displPyr} ${cssToggle}

`; pyramide.querySelector(".map-fs-zone").replaceChildren(content); }32:T1449,plot1 = Plot.plot({ width: rWidth/fsN, height: Math.min(rWidth>900 ? 0.6*rWidth : rWidth>600 ? 0.7*rWidth : 300, fsH), marginTop: rWidth>900 ? 60 : rWidth>600 ? 50 : 30, marginLeft: rWidth>900 ? 50 : rWidth>600 ? 40 : 30, marginBottom: rWidth>900 ? 70 : rWidth>600 ? 50 : 40, marginRight: rWidth>700 ? 100 : rWidth>600 ? 80 : 10, y: {reverse: false, tickFormat: "d", tickPadding:5, tickSize: rWidth>500 ? 10 : 5, domain: [0,99], ticks: [0,10,20,30,40,50,60,70,80,90,99], grid:false, label: null, labelArrow: false, }, x: {ticks: rWidth>600 & indic==="Effectif" ? [-500,-400,-300,-200,-200,-100,0,100,200,300,400,500] : rWidth<=600 & indic==="Effectif" ? [-500,-250,0,250,500] : rWidth>600 & indic==="Pour 1 0000 personnes" ? [-10,-8,-6,-4,-2,0,2,4,6,8,10] : [-8,-4,0,4,8], tickSize: rWidth>600 ? 10 : 5, tickFormat: d=> Math.abs(d), domain: indic==="Effectif" ? [-500,500] : [-11,11], grid: true, label: indic==="Effectif" ? "Effectifs en milliers" : "‰", labelAnchor:"center", labelArrow:false }, marks: [ // comparaison Plot.line(datab, {filter: d=> d.annee===rangeRef, x: d=> indic === "Effectif" ? d.Hommes : d.phomme, y: "age", curve: "step", stroke: "black", strokeWidth:1.5}), Plot.line(datab, {filter: d=> d.annee===rangeRef , x: d=> indic === "Effectif" ? d.Femmes : d.pfemme, y: "age", curve: "step", stroke: "black", strokeWidth:1.5}), Plot.areaX(datab, {filter: d=> d.annee===rangeRef, x: d=> indic === "Effectif" ? d.Hommes : d.phomme, y: "age", curve: "step", stroke: "transparent", strokeWidth:0, fill: "#dadada"}), Plot.areaX(datab, {filter: d=> d.annee===rangeRef, x: d=> indic === "Effectif" ? d.Femmes : d.pfemme, y: "age", curve: "step", stroke: "transparent", strokeWidth:0, fill: "#dadada"}), // Principale Plot.line(filter, {filter: d=> range===d.annee , x: d=> indic === "Effectif" ? d.Hommes : d.phomme, y: "age", curve: "step", stroke:"#222330", strokeWidth:1.5}), Plot.line(filter, {filter: d=> range===d.annee , x: d=> indic === "Effectif" ? d.Femmes : d.pfemme, y: "age", curve: "step", stroke:"#222330", strokeWidth:1.5}), Plot.areaX(filter, {filter: d=> range===d.annee , x: d=> indic === "Effectif" ? d.Hommes : d.phomme, y: "age", curve: "step", fill:pal100[0], fillOpacity: 0.8}), Plot.areaX(filter, {filter: d=> range===d.annee , x: d=> indic === "Effectif" ? d.Femmes : d.pfemme, y: "age", curve: "step", fill:pal100[0], fillOpacity:0.8}), Plot.line(dfTip, { x: d=> indic === "Effectif" ? d.n : d.p, y: "age", z:"Z", curve: "step", stroke:"transparent", strokeWidth:2, channels: { annee: {value: "annee", label:""}, sexe: {value: "sexe", label: ""}, aNaissance: {value: "aNaissance", label: ""}, age: {value: "age", label:""}, valeur: {value: d=> indic === "Effectif" ? d.n2 : d.p2, label:""}, }, tip: {format: {x: false, y: false, z: false, annee: d=> `En ${d} :`, sexe: true, aNaissance: d=> `Né(e)s en ${d.toString()}`, age: d=> `Âge de ${d.toString()} ans`, valeur: indic === "Effectif" ? d=> `Effectif : ${d.toFixed(0)} 000` : d=> `Part : ${d.toFixed(1).replace(".",",")}‰`}, strokeWidth:0} }), Plot.ruleY(filter, Plot.pointerY({x1: d=> indic === "Effectif" ? -500 : -11, x2: d=> indic === "Effectif" ? 500 : 11, y: "age", stroke: rWidth>600 ? "black" : "transparent"})), Plot.dot(filter, Plot.pointerY({x: d=> indic === "Effectif" ? d.n : d.p, y: "age", stroke: rWidth>600 ? "black" : "transparent", fill:"white"})), Plot.text(filter, Plot.pointerY({x: d=> indic === "Effectif" ? 505 : 11.2, y: "age", dy: -17, frameAnchor: "middle", textAnchor:"start", text: d=> rWidth>600 ? `Né en\n${d.aNaissance}` : ``, className:"pointer" })), Plot.text(["Hommes"],{x: d=> indic=== "Effectif" ? -200 : -4, y:99, textAnchor:"end", lineAnchor:"bottom"}), Plot.text(["Femmes"],{x: d=> indic=== "Effectif" ? 200 : 4, y:99, textAnchor:"start", lineAnchor:"bottom"}), Plot.text(["Âge"],{x: d=> indic=== "Effectif" ? -500 : -11, y:104, textAnchor:"end", lineAnchor:"bottom"}), Plot.ruleX([0]), Plot.ruleY([0], {strokeWidth:0.5}), ] })33:Td7c,boxPlotGraph1 = htl.html `

${viewof legend} ${display}

Note : Aucune donnée pour la période 1915-1919 (première guerre mondiale). Les centenaires ne sont pas pris en compte dans la pyramide.

Champ : France hexagonale.

Source : Données issues de la pyramide des âges interactive de l'Insee [Lien].

`34:T766,plot2 = { // rôle de la barre : principale (y = 1 ou 4) ou comparaison (y = 2 ou 5) const fill = d => (d.y === 1 || d.y === 4) ? pal100[0] : "#d1d1d1"; return Plot.plot({ width: fsWide ? fsSide : rWidth, height: plot2Choix===true ? rWidth>900 ? (fsWide ? 320 : isFull ? Math.min(0.5*rWidth, fsH) : 0.3*rWidth) : rWidth>600 ? 0.4*rWidth : 150 : false , marginTop: rWidth>900 ? 30 : rWidth>600 ? 20 : 10, marginLeft: fsWide ? 55 : rWidth>900 ? (isFull ? 95 : 50) : rWidth>600 ? 40 : 30, marginBottom: fsWide ? 55 : rWidth>900 ? (isFull ? 85 : 70) : rWidth>600 ? 50 : 30, marginRight: fsWide ? 15 : rWidth>700 ? 100 : rWidth>500 ? 80 : 35, x: {domain: [-14,13.5], grid:true, tickFormat: d=> Math.abs(d), label:"%", labelAnchor:"center", labelArrow:false }, // domaine fixe : l'ordre vertical ne dépend plus des données y: {label:null, axis: false, domain: [-2,-1,0,1,2,3,4,5]}, marks: [ Plot.barX(prop1565, {filter: d=> d.Sexe==="Hommes", x: d=> -d.p, y:"y", fill, stroke:"white", strokeWidth:0.2, fillOpacity:1}), Plot.barX(prop1565, {filter: d=> d.Sexe==="Femmes", x: d=> d.p, y:"y", fill, stroke:"white", strokeWidth:0.2, fillOpacity:1}), Plot.text(["Moins de 15 ans"], {x: 0, y:-1}), Plot.text(["65 ans et plus"], {x: 0, y:3}), Plot.text(["Hommes"], {x: -10.5, y:-2, textAnchor:"end"}), Plot.text(["Femmes"], {x: 10.5, y:-2}), Plot.text(prop1565, {filter: d=> d.filtre==1, x:-14.1, y:"y", text: d=> d.Année.toString(), textAnchor:"end"}), // valeurs : masquées quand il n'y a pas de données (1915-1919 → p = 0) Plot.text(prop1565,{filter: d=> d.Sexe==="Hommes" && d.p>0, x:d=> -d.p+1.25, y: "y", text: d=> d.p.toFixed(1).replace(".",",")}), Plot.text(prop1565,{filter: d=> d.Sexe==="Femmes" && d.p>0, x:d=> d.p-1.25, y: "y", text: d=> d.p.toFixed(1).replace(".",",")}), Plot.ruleX([0], {y1:1,y2:2}), Plot.ruleX([0], {y1:4,y2:5}) ] }); }35:T161e,plot3 = Plot.plot({ width: rWidth/fsN, height: Math.min(rWidth>900 ? 0.6*rWidth : rWidth>600 ? 0.7*rWidth : 320, fsH), marginTop: rWidth>900 ? 60 : rWidth>600 ? 50 : 30, marginLeft: rWidth>900 ? 50 : rWidth>600 ? 40 : 30, marginBottom: rWidth>900 ? 70 : rWidth>600 ? 50 : 40, marginRight: rWidth>700 ? 100 : rWidth>600 ? 80 : 10, y: {reverse: false, tickFormat: "d", tickPadding:5, tickSize: width>600 ? 10 : 5, domain: [0,99], ticks: [0,10,20,30,40,50,60,70,80,90,99], grid:false, label: null, labelArrow: false, }, x: {ticks: rWidth>600 & indic==="Effectif" ? [-500,-400,-300,-200,-200,-100,0,100,200,300,400,500] : rWidth<600 & indic==="Effectif" ? [-500,-250,0,250,500] : rWidth>600 & indic==="Pour 1 0000 personnes" ? [-10,-8,-6,-4,-2,0,2,4,6,8,10] : [-8,-4,0,4,8], tickSize: rWidth>600 ? 10 : 5, tickFormat: d=> Math.abs(d), domain: indic==="Effectif" ? [-500,500] : [-11,11], grid: true, label: indic==="Effectif" ? "Effectifs en milliers" : "‰", labelAnchor:"center", labelArrow:false }, marks: [ Plot.line(df1b, {filter: d=> annee===d.annee , x: d=> indic === "Effectif" ? d.Hommes : d.phomme, y: "age", curve: "step", stroke:"#222330", strokeWidth:1.5}), Plot.line(df1b, {filter: d=> annee===d.annee , x: d=> indic === "Effectif" ? d.Femmes : d.pfemme, y: "age", curve: "step", stroke:"#222330", strokeWidth:1.5}), Plot.areaX(df1b, {filter: d=> annee===d.annee , x: d=> indic === "Effectif" ? d.Hommes : d.phomme, y: "age", curve: "step", fill:pal100[0], fillOpacity:.8, strokeWidth:1.5}), Plot.areaX(df1b, {filter: d=> annee===d.annee , x: d=> indic === "Effectif" ? d.Femmes : d.pfemme, y: "age", curve: "step", fill:pal100[0], strokeWidth:1.5, fillOpacity:0.8}), Plot.ruleY(pointer, Plot.pointerY({x1: d=> indic === "Effectif" ? -500 : -11, x2: d=> indic === "Effectif" ? 500 : 11, y: "age", stroke: rWidth>600 ? "black" : "transparent"})), Plot.dot(pointer, Plot.pointerY({x: d=> indic === "Effectif" ? d.n : d.p, y: "age", stroke: rWidth>600 ? "black" : "transparent", fill:"white"})), Plot.text(pointer, Plot.pointerY({x: d=> indic === "Effectif" ? 505 : 11.2, y: "age", dy: -17, frameAnchor: "middle", textAnchor:"start", text: d=> rWidth>600 ? `Né en\n${d.aNaissance}` : ``, className:"pointer" })), Plot.line(dfTip1Pyr1, {filter: d=> annee===d.annee , x: d=> indic === "Effectif" ? d.n : d.p, y: "age", z:"Z", curve: "step", stroke:"transparent", strokeWidth:2, channels: { annee: {value: "annee", label:""}, sexe: {value: "sexe", label: ""}, aNaissance: {value: "aNaissance", label: ""}, age: {value: "age", label:""}, valeur: {value: d=> indic === "Effectif" ? d.n2 : d.p2, label:""}, }, tip: {format: {x: false, y: false, z: false, annee: d=> `En ${d} :`, sexe: true, aNaissance: d=> `Né(e)s en ${d.toString()}`, age: d=> `Âge de ${d.toString()} ans`, valeur: indic === "Effectif" ? d=> `Effectif : ${d.toFixed(0)} 000` : d=> `Part : ${d.toFixed(1).replace(".",",")}‰`}, strokeWidth:0} }), Plot.text(["Hommes"],{x: d=> indic=== "Effectif" ? -200 : -4, y:99, textAnchor:"end", lineAnchor:"bottom"}), Plot.text(["Femmes"],{x: d=> indic=== "Effectif" ? 200 : 4, y:99, textAnchor:"start", lineAnchor:"bottom"}), Plot.text(["Âge"],{x: d=> indic=== "Effectif" ? -500 : -11, y:103, textAnchor:"end", lineAnchor:"bottom"}), Plot.text(df1b, {filter: d=> d.age==0 && annee===d.annee , x:0, y:106, text: d=>d.annee.toString(), textAnchor:"middle", lineAnchor:"bottom"}), Plot.ruleX([0], {lineWidth:0.5, stroke:"white"}), Plot.ruleY([0], {strokeWidth:0.5}), Plot.ruleY(df1b, {filter: d=> d.aNaissance==gen && annee===d.annee , x1:0,x2:d=> indic === "Effectif" ? d.Hommes : d.phomme, y: d=>d.age, fill:"black", strokeWidth:2}), Plot.ruleY(df1b, {filter: d=> d.aNaissance==gen && annee===d.annee , x1:0, x2:d=> indic === "Effectif" ? d.Femmes : d.pfemme, y: d=>d.age, fill:"black", strokeWidth:2}), Plot.text(df1b, {filter: d=> d.aNaissance==gen && annee===d.annee && d.age<100,x:0, y: d=> d.age+5.5, text: d=> `Né en ${d.aNaissance.toString()}`, lineAnchor:"bottom"}), Plot.arrow(df1b, {filter: d=> d.aNaissance==gen && annee===d.annee , x1:d=>0, x2: d=> indic === "Effectif" ? d.Hommes/3 : d.phomme/3, y1:d=>d.age+4.9,y2:d=>d.age+.5, bend:-5, strokeWidth:1}), Plot.arrow(df1b, {filter: d=> d.aNaissance==gen && annee===d.annee , x1:d=>0, x2: d=> indic === "Effectif" ? d.Femmes/3 : d.pfemme/3, y1:d=>d.age+4.9,y2:d=>d.age+.5, bend:5, strokeWidth:1}), ] })36:Te78,boxPlotGraph3 = htl.html `

${plot3}

Note : Aucune donnée pour la période 1915-1919 (première guerre mondiale). Les centenaires ne sont pas pris en compte dans la pyramide.

Champ : France hexagonale.

Source : Données issues de la pyramide des âges interactive de l'Insee [Lien].

`37:Tdfb, 38:Taa6,function Scrubber(values, { format = value => value, initial = 0, direction = 1, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Jouer"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { 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 && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) 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(); Inputs.disposal(form).then(stop); return form; }39:T1564,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; } @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); } /* ---- Mise en page plein écran "large" : colonne latérale (inputs, puis plot2) à gauche, pyramide à droite. Les notes restent sous les graphiques (elles sont dans .plot). En dessous de 1000 px de large (tablette portrait...) : une seule colonne, comme avant. 400px = cellule fsSide du notebook. ---- */ @media (min-width: 1000px) { .map-fs-wrap.is-full .plotFinal { display: grid; grid-template-columns: 400px minmax(0, 1fr); column-gap: 24px; align-items: start; } /* rWidth (mesure), style, etc. : toute la largeur */ .map-fs-wrap.is-full .plotFinal > :not(.fsSide):not(:has(.plot)) { grid-column: 1 / -1; } .map-fs-wrap.is-full .plotFinal > .fsSide { grid-column: 1; grid-row: 2; } .map-fs-wrap.is-full .plotFinal > .fsSide > p { margin: 0; } .map-fs-wrap.is-full .plotFinal > :has(.plot) { grid-column: 2; grid-row: 2; min-width: 0; } /* plot2 dans la colonne latérale : hors de .plot, donc polices définies ici */ .map-fs-wrap.is-full .plot2Side { margin: 16px 0 0 0; } .map-fs-wrap.is-full .plot2Side text { font-family: poppins, sans-serif; font-size: 14px; color: #222330; } .map-fs-wrap.is-full .plot2Side [aria-label="x-axis tick label"] text { font-family: roboto, sans-serif; } } /* ---- Ajustements propres au plein écran (aucun effet en vue normale / mobile) ---- */ .map-fs-wrap.is-full .plot { max-width: 100%; } .map-fs-wrap.is-full .plot text, .map-fs-wrap.is-full .plot [aria-label="tip"] text, .map-fs-wrap.is-full .plot .pointer text { font-size: clamp(15px, 1.25cqw, 24px); } /* plot2 sous la pyramide (plein écran une colonne) : polices plus grandes */ .map-fs-wrap.is-full .plot .plot2wrap text { font-size: clamp(18px, 1.75cqw, 30px); } .map-fs-wrap.is-full .plot .note, .map-fs-wrap.is-full .plot .note li { font-size: clamp(13px, 0.9cqw, 17px); } .map-fs-wrap.is-full form.inputs-3a86ea > label, .map-fs-wrap.is-full .inputs-3a86ea-checkbox div label, .map-fs-wrap.is-full .inputs-3a86ea select, .map-fs-wrap.is-full .inputs-3a86ea-input > input[type="number"] { font-size: 15px !important; } `; function fullscreen(content, id) { const key = `__fs_v8_${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; } if (content) box.querySelector(".map-fs-zone").replaceChildren(content); return box; } return fullscreen; }3a:[{"id":"c3406027c5e2ded55dffcfb02a0a595a7c4ed8125f074e7be451c747387cfa8863a001c82f86bc7e9be236b8c2acc2581bb42751ecb345a679a5c4a28a121d71","href":"https://static.observableusercontent.com/files/c3406027c5e2ded55dffcfb02a0a595a7c4ed8125f074e7be451c747387cfa8863a001c82f86bc7e9be236b8c2acc2581bb42751ecb345a679a5c4a28a121d71","name":"data@2.csv","type":"text/csv","lastModified":1783406279109.128,"size":758613},{"id":"f1f731343eac027ac35e6042d53118397ac1e905d8b0d54a05030718b5d934db281484589d65410ceb1a939007857fc3b8948d4f4461d097355878c818bed034","href":"https://static.observableusercontent.com/files/f1f731343eac027ac35e6042d53118397ac1e905d8b0d54a05030718b5d934db281484589d65410ceb1a939007857fc3b8948d4f4461d097355878c818bed034","name":"n642_1@1.csv","type":"text/csv","lastModified":1783406279109.128,"size":2024}] 2f:{"id":"2879d8d49280a974","slug":null,"title":"FULLSCREEN Pyramides des âges France FR - resize (24580)","thumbnail":"475147ea159aabadec11515530e94fa50bb499bebea42b7a80fc141e07a943e5","access_level":"public","create_time":"$D2026-10-08T14:56:17.753Z","update_time":"$D2026-10-09T15:30:25.375Z","view_time":null,"first_public_time":"$D2026-10-09T04:29:25.817Z","has_unpublished_edits":null,"fork":{"id":"5f13d3a327665ae1","slug":null,"title":"New Pyramides des âges France FR - resize (24580)","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":"pro_2026","bio":""},"version":2621,"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,"bio":""}],"members":[{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/6ae55bec6f9ba0bbe9597b60f19a08df8d2f5b06630eb6929919d0306a71b058","tier":"pro_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"FULLSCREEN Pyramides des âges France FR - resize (24580)","cells":[{"id":0,"value":"# FULLSCREEN Pyramides des âges France FR - resize (24580)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"pal100 = [\n \"#ff564e\", //rouge\n \"#ff7aad\", //rose\n \"#522673\", //mauve\n \"#0042eb\", //bleu\n \"#5cd49e\", //vert\n \"#ffb322\", //jaune\n \"#4f4f4f\", //gray\n] ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2294,"value":"viewof choixPyr = radioIned({list: [\"Une pyramide\", \"Deux pyramides superposées\"], value: \"Une pyramide\", direction: \"row\",})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1899,"value":"boxPlotInput = htl.html`\n

\n${viewof rWidth}\n${displayInput}\n

\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1634,"value":"pyramide = fullscreen(null, \"pyramide\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2275,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1894,"value":"displayInput = choixPyr === \"Une pyramide\" ? html `${viewof choixPyr} ${viewof indic} ${viewof annee} ${viewof gen}` :\nhtml`${viewof choixPyr} ${viewof indic} ${viewof range} ${viewof rangeRef}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1628,"value":"displPyr = choixPyr === \"Une pyramide\" ? html`${boxPlotGraph3}` : html`${boxPlotGraph1}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"## 2 Pyramide superposées","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"df1 = FileAttachment(\"n642_1@1.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"data = FileAttachment(\"data@2.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"datab = data.map(d=>({\nannee: d.annee, \nage: d.age,\naNaissance: d.aNaissance,\nFemmes: d.femme/1000,\nHommes: -d.homme/1000,\nphomme : -d.phomme,\npfemme : d.pfemme \n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2266,"value":"dataGroup = d3.group(datab, d => d.annee)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2273,"value":"df1b = dataGroup.get(annee);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"#### Array pour tooltip (à simplifier)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"df1Flat = datab.flatMap(d => [\n {age: d.age, sexe: \"Hommes\", n: d.Hommes, p: d.phomme, aNaissance: d.aNaissance, annee: d.annee, n2: Math.abs(d.Hommes), p2: Math.abs(d.phomme) },\n {age: d.age, sexe: \"Femmes\", n: d.Femmes, p: d.pfemme, aNaissance: d.aNaissance, annee: d.annee, n2: d.Femmes, p2: d.pfemme},\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"dfTip1 = df1Flat.filter(d=> d.annee===range).map(d=>({...d, Z: 1 + d.sexe}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"dfTip2 = df1Flat.filter(d=> d.annee===rangeRef && range!=rangeRef).map(d=>({...d, Z:2+d.sexe}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"dfTip = dfTip1.concat(dfTip2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1943,"value":"dfTip1Pyr1 = df1Flat.filter(d=> d.annee==annee).map(d=>({...d, Z:1 + d.sexe}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1952,"value":"dfTip2Pyr1 = df1Flat.filter(d=> d.annee==annee).map(d=>({...d, Z:2+d.sexe}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1956,"value":"dfPyr1 = dfTip1Pyr1.concat(dfTip2Pyr1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"#### Input","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2298,"value":"viewof range = rangeIned( {min:1901,max:2026, title: \"Structure principale :\", value: \"2026\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2299,"value":"viewof rangeRef = rangeIned( {min:1901,max:2026, title: \"Structure de comparaison :\", value: \"1970\", step: 1, marginTop: \"5px\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2295,"value":"viewof indic = radioIned({list: [\"Pour 1 000 personnes\", \"Effectif\"], value: \"Pour 1 000 personnes\", direction: \"row\", title: \"Indicateur :\",titleAlign:\"top\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"#### Filtre","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":459,"value":"filter = datab.filter(d=> range=== d.annee)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"minAnaissance = d3.min(filter, d=> d.aNaissance)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"maxAnaissance = d3.max(filter, d=> d.aNaissance)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"#### legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2293,"value":"viewof legend = legIned([range.toString(), rangeRef.toString()],[pal100[0],\"#dadada\"],{interactive:false, fontSize:\"clamp(11px,1.5cqw,24px)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":992,"value":"#### Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2276,"value":"isFull = Generators.observe(notify => {\n const get = () => pyramide.classList.contains(\"is-full\");\n const mo = new MutationObserver(() => notify(get()));\n mo.observe(pyramide, {attributes: true, attributeFilter: [\"class\"]});\n notify(get());\n return () => mo.disconnect();\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2281,"value":"// Mise en page plein écran \"large\" : inputs en colonne (300 px) + graphiques à droite.\n// Doit rester cohérent avec la media query (min-width: 1000px) de fullscreen.\nfsWide = {\n rWidth;\n return isFull && window.matchMedia(\"(min-width: 1000px)\").matches;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2277,"value":"// Hauteur max des pyramides en plein écran (Infinity hors plein écran => vue normale et mobile inchangées).\n// Deux bornes, on prend la plus petite :\n// - la place disponible à l'écran (window.innerHeight peut valoir la hauteur totale du contenu dans une iframe\n// auto-dimensionnée : on borne avec screen.availHeight ; ≈ 260 px réservés en mode large, ≈ 380 px en une colonne\n// pour la légende, les notes, le toggle et les marges) ;\n// - un rapport hauteur/largeur proche de la vue normale (0.6) : fsRatio = 0.7 → pyramide un peu plus haute que la normale.\n// Pour réduire encore la hauteur, baisser 0.7 (ex. 0.65 ou 0.6).\nfsH = {\n if (!isFull) return Infinity;\n const fsRatio = 0.6;\n const avail = Math.min(window.innerHeight, screen.availHeight || screen.height) - (fsWide ? 260 : 380);\n return Math.max(400, Math.min(avail, fsRatio * rWidth / fsN));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2286,"value":"// Largeur de la colonne pour input et plot2\nfsSide = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2279,"value":"// largeur des pyramides en fs : n en plein écran (width = rWidth / n), 1 ailleurs => vue normale et mobile inchangées.\nfsN = isFull ? Math.max(1.6, fsWide ? rWidth / Math.max(200, rWidth - (fsSide + 44)) : 1) : 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2287,"value":"// Position de plot2\nplot2Side = (fsWide && choixPyr !== \"Une pyramide\")\n ? html`

${viewof plot2Choix}

${plot2Choix === true ? html`

${plot2}

` : \"\"}

`\n : \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2300,"value":"### Display plot2choix avec fullscreen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1413,"value":"display = fsWide ? html`${plot1}` : (plot2Choix === \"Non\") ? html`${plot1}

${viewof plot2Choix}

` : html`${plot1}

${viewof plot2Choix}

${plot2}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"prop1 =\n[{p: d3.sum(filter.filter(d=> d.age<15) , (d) => -d.phomme/10), Année: range, Sexe: \"Hommes\", age:\"Jeunes\", age2: \"Moins de 15 ans\", y:1, filtre:0},\n {p: d3.sum(filter.filter(d=> d.age>=65) , (d) => -d.phomme/10), Année: range, Sexe: \"Hommes\", age:\"Âgés\", age2: \"65 ans et plus\", y: 4, filtre:1 },\n{p: d3.sum(filter.filter(d=> d.age<15) , (d) => d.pfemme/10), Année: range, Sexe: \"Femmes\", age:\"Jeunes\", age2: \"Moins de 15 ans\", y:1, filtre:1},\n {p: d3.sum(filter.filter(d=> d.age>=65) , (d) => d.pfemme/10), Année: range, Sexe: \"Femmes\", age:\"Âgés\", age2: \"65 ans et plus\", y:4, filtre:0}, \n\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"prop2 =\n[{p: d3.sum(datab.filter(d=> d.age<15 && d.annee===rangeRef) , (d) => -d.phomme/10), Année: rangeRef, Sexe: \"Hommes\", age:\"Jeunes\", age2: \"Moins de 15 ans\", y: 2, filtre:1 },\n {p: d3.sum(datab.filter(d=> d.age>=65 && d.annee===rangeRef) , (d) => -d.phomme/10), Année: rangeRef, Sexe: \"Hommes\", age:\"Âgés\", age2: \"65 ans et plus\", y:5, filtre:0 },\n{p: d3.sum(datab.filter(d=> d.age<15 && d.annee===rangeRef) , (d) => d.pfemme/10), Année: rangeRef, Sexe: \"Femmes\", age:\"Jeunes\", age2: \"Moins de 15 ans\", y:2, filtre:0 },\n {p: d3.sum(datab.filter(d=> d.age>=65 && d.annee===rangeRef) , (d) => d.pfemme/10), Année: rangeRef, Sexe: \"Femmes\", age:\"Âgés\", age2: \"65 ans et plus\", y:5, filtre:1 }, \n\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"prop1565 = range== rangeRef ? prop1 : [...prop1, ...prop2] ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2290,"value":"viewof plot2Choix = toggleIned({label: \"Population jeune et âgée\", value:false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1673,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1639,"value":"### Pyramide une seule année + player","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1475,"value":"numbers = Array.from({length: 126}, (_, i) => i+1901)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2291,"value":"viewof annee = scrubberIned(numbers, {autoplay: false, loop:false, delay: rWidth>600 ? 150 : 5, initial: numbers.length - 1,})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1520,"value":"pointer = df1b.filter(d=>d.annee===annee)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1538,"value":"//viewof gen = Inputs.range([1802, 2026], {label: \"Suivre une année de naissance:\", step: 1, value: 1970})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2604,"value":"viewof gen = rangeIned( {min:1802,max:2026, title: \"Suivre une année de naissance :\", value: \"1970\", step: 1, marginTop: \"5px\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1468,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1556,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"## Fonctions & css","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2288,"value":"import {scrubberIned, toggleIned, radioIned, rangeIned} from '@mthevenin/inputined'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2289,"value":"import {legIned} from '@mthevenin/legined'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"$37","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"css","database":"$undefined"},{"id":1470,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2115,"value":"viewof rWidth = {\n const div = html`

`;\n const ro = new ResizeObserver(entries => {\n const w = entries[0].contentRect.width;\n if (w > 0 && w !== div.value) {\n div.value = w;\n div.dispatchEvent(new CustomEvent(\"input\"));\n }\n });\n ro.observe(div);\n div.value = div.getBoundingClientRect().width || 800;\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2209,"value":"import {toggle, cssToggle, legend, cssLegend} from \"@wsthevenin/mtinput\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2236,"value":"cssToggle","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2238,"value":"cssLegend","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2274,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1"}} 30:"$2f:body"