28:null 29:["$","title",null,{"children":"New Pyramides des âges France FR - resize (24580) | Marc Thevenin | Observable"}] 2e:T6d2,boxPlotInput = htl.html`

${viewof rWidth} ${displayInput}

`2f:T151f,plot1 = Plot.plot({ width: rWidth, height: rWidth>900 ? 0.6*rWidth : rWidth>600 ? 0.7*rWidth : 300 , 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>1000 ? 15: rWidth>500 ? 10 : 5, tickPadding: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}), ] })30:Td93,boxPlotGraph1 = htl.html `

${viewof rWidth} ${legendX} ${cssLegend} ${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].

`31:T61b,plot2 = Plot.plot({ width: rWidth, height: plot2Choix===true ? rWidth>900 ? 0.3*rWidth : rWidth>600 ? 0.4*rWidth : 150 : false , marginTop: rWidth>900 ? 30 : rWidth>600 ? 20 : 10, marginLeft: rWidth>900 ? 50 : rWidth>600 ? 40 : 30, marginBottom: rWidth>900 ? 70 : rWidth>600 ? 50 : 30, marginRight: rWidth>700 ? 100 : rWidth>500 ? 80 : 35, //padding:0.05, x: {domain: [-14,13.5], grid:true, tickFormat: d=> Math.abs(d), label:"%", labelAnchor:"center", labelArrow:false }, y: {label:null, axis: false, inset:0}, color: {legend:false, range: range!=rangeRef ? ["#d1d1d1",pal100[0]]: [pal100[0],pal100[0]] }, marks: [ Plot.barX(prop1565, {filter: d=> d.Sexe==="Hommes", x: d=> -d.p, y:"y", fill:"Année", stroke:"white", strokeWidth:0.2, fillOpacity:1}), Plot.barX(prop1565, {filter: d=> d.Sexe==="Femmes", x: d=> d.p, y:"y", fill:"Année", 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"}), Plot.text(prop1565,{filter: d=> d.Sexe==="Hommes",x:d=> -d.p+1.25, y: "y", text: d=> d.p.toFixed(1).replace(".",",")}), Plot.text(prop1565,{filter: d=> d.Sexe==="Femmes",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}) ] })32:T16b3,plot3 = Plot.plot({ width: rWidth, height: rWidth>900 ? 0.6*rWidth : rWidth>600 ? 0.7*rWidth : 320 , 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>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>500 & indic==="Effectif" ? [-500,-400,-300,-200,-200,-100,0,100,200,300,400,500] : rWidth<=500 & indic==="Effectif" ? [-500,-250,0,250,500] : rWidth>500 & indic==="Pour 1 0000 personnes" ? [-10,-8,-6,-4,-2,0,2,4,6,8,10] : [-8,-4,0,4,8] , tickSize: rWidth>1000 ? 15: rWidth>500 ? 10 : 5, tickPadding: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}), ] })33:Te84,boxPlotGraph3 = htl.html `

${viewof rWidth} ${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].

`34:Tdfb, 35: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; }36:[{"id":"f1f731343eac027ac35e6042d53118397ac1e905d8b0d54a05030718b5d934db281484589d65410ceb1a939007857fc3b8948d4f4461d097355878c818bed034","href":"https://static.observableusercontent.com/files/f1f731343eac027ac35e6042d53118397ac1e905d8b0d54a05030718b5d934db281484589d65410ceb1a939007857fc3b8948d4f4461d097355878c818bed034","name":"n642_1@1.csv","type":"text/csv","lastModified":1783406279109.128,"size":2024},{"id":"c3406027c5e2ded55dffcfb02a0a595a7c4ed8125f074e7be451c747387cfa8863a001c82f86bc7e9be236b8c2acc2581bb42751ecb345a679a5c4a28a121d71","href":"https://static.observableusercontent.com/files/c3406027c5e2ded55dffcfb02a0a595a7c4ed8125f074e7be451c747387cfa8863a001c82f86bc7e9be236b8c2acc2581bb42751ecb345a679a5c4a28a121d71","name":"data@2.csv","type":"text/csv","lastModified":1783406279109.128,"size":758613}] 2c:{"id":"5f13d3a327665ae1","slug":null,"title":"New Pyramides des âges France FR - resize (24580)","thumbnail":"ecff7d7c99e548f2ed155cb5787f88de7617fca2fd03c9906e13b70f140194ce","access_level":"public","create_time":"$D2026-07-07T06:37:59.109Z","update_time":"$D2026-09-18T22:00:52.154Z","view_time":null,"first_public_time":"$D2026-07-07T06:37:59.109Z","has_unpublished_edits":null,"fork":true,"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":2321,"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":1,"collection":{"id":"68061ed613a94a5e","slug":"pyramide-des-ages","title":"Pyramide des âges","owner":{"id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin"}},"type":"notebook","body":{"titling":"auto","title":"New Pyramides des âges France FR - resize (24580)","cells":[{"id":0,"value":"# New 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":1624,"value":"viewof choixPyr = Inputs.radio([\"Une pyramide\", \"Deux pyramides superposées\"], {label: \"\", value: \"Une pyramide\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1899,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1634,"value":"pyramide = htl.html`\n

\n${viewof rWidth}\n${displPyr}\n${cssToggle}\n\n

\n\n\n`","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","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"df1Tip= df1b.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 = df1Tip.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 = df1Tip.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 = df1Tip.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 = df1Tip.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":449,"value":"viewof range = Inputs.range([1901, 2026], {label: \"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":556,"value":"viewof rangeRef = Inputs.range([1901, 2026], {label: \"Structure de comparaison :\", value: \"1970\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"viewof indic = Inputs.radio([\"Pour 1 000 personnes\", \"Effectif\"], {label: \"Indicateur :\", value: \"Pour 1 000 personnes\"})","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":838,"value":"legendX = Plot.legend({swatchHeight:10, swatchWidth:20, color:{domain:[range.toString(),rangeRef.toString()], range:[pal100[0],\"#dadada\"]}})","pinned":true,"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":20,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"viewof checknote = Inputs.toggle({label: \"Afficher les informations :\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":" heightInfo = {\n let n; \n if (checknote===true && width>=1000) {return n=300}\n if (checknote===true && width>=700) {return n=250}\n if (checknote===true && width>=500) {return n=220} \n if (checknote===true && width<500) {return n=190} \n {return n = 0}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"info = Plot.plot({\nmarginTop:20, \nmarginBottom:0, \nwidth,\nheight: heightInfo, \nx: {domain: [0,10], axis: false}, \ny: {domain: [-1.7,4.5], axis: false},\n marks : [\n\n Plot.ruleY([4.8], {strokeWidth:.5, stroke:\"#d1d1d1\"}), \n Plot.ruleY([-1.6], {strokeWidth:.5, stroke:\"#d1d1d1\"}), \n \nPlot.text([width>500 ? \"① Passage des classes creuses nées durant la guerre de 1914-1918 à l'âge de la fécondité\" : \"① Passage des classes creuses nées durant la guerre\\nde 1914-1918 à l'âge de la fécondité\" ], {x:0, y:4, textAnchor:\"start\", className: \"textBulle\"}),\n\nPlot.text([\"② Déficit des naissances dû à la guerre de 1939-1945\"], {x:0, y:2.8, textAnchor:\"start\", className: \"textBulle\"}),\n \nPlot.text([\"③ Baby-boom\"], {x:0, y:1.6, textAnchor:\"start\", className: \"textBulle\"}), \n\nPlot.text([\"④ Fin du baby-boom\"], {x:0, y:0.4, textAnchor:\"start\", className: \"textBulle\"}), \n\nPlot.text([\"⑤ Baisse de la fécondité\"], {x:0, y:-.8, textAnchor:\"start\", className: \"textBulle\"}), \n ]\n\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1413,"value":"display = 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":"$30","pinned":true,"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":true,"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":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1410,"value":"//viewof plot2Choix = Inputs.radio([\"Oui\", \"Non\"], {label: \"Population jeune et âgée\", value: \"Non\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2212,"value":"viewof plot2Choix = toggle({label: \"Population jeune et âgée\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2214,"value":"cssToggle","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1673,"value":"$31","pinned":true,"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":1473,"value":"viewof annee = Scrubber(numbers, {autoplay: false, loop:false, delay: rWidth>600 ? 150 : 5, initial: numbers.length - 57,})","pinned":false,"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":1468,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1556,"value":"$33","pinned":true,"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":215,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"css","database":"$undefined"},{"id":1470,"value":"$35","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"}],"files":"$W36","stdlib":"1"}} 2d:"$2c:body"