28:null 29:["$","title",null,{"children":"New Age pyramids France EN - Resize (24580) | Marc Thevenin | Observable"}] 2e:T6d2,boxPlotInput = htl.html`

${viewof rWidth} ${displayInput}

`2f:T1628,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==="Number of inhabitants" ? [-500,-400,-300,-200,-200,-100,0,100,200,300,400,500] : rWidth<=600 & indic==="Number of inhabitants" ? [-500,-250,0,250,500] : rWidth>600 & indic==="Per 1,000 inhabitants (‰)" ? [-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==="Number of inhabitants" ? [-500,500] : [-11,11], grid: true, label: indic==="Number of inhabitants" ? "Number (in thousands)" : "‰", labelAnchor:"center", labelArrow:false }, marks: [ // comparaison Plot.line(datab, {filter: d=> d.annee===rangeRef, x: d=> indic === "Number of inhabitants" ? d.Hommes : d.phomme, y: "age", curve: "step", stroke: "black", strokeWidth:1.5}), Plot.line(datab, {filter: d=> d.annee===rangeRef , x: d=> indic === "Number of inhabitants" ? d.Femmes : d.pfemme, y: "age", curve: "step", stroke: "black", strokeWidth:1.5}), Plot.areaX(datab, {filter: d=> d.annee===rangeRef, x: d=> indic === "Number of inhabitants" ? 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 === "Number of inhabitants" ? 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 === "Number of inhabitants" ? d.Hommes : d.phomme, y: "age", curve: "step", stroke:"#222330", strokeWidth:1.5}), Plot.line(filter, {filter: d=> range===d.annee , x: d=> indic === "Number of inhabitants" ? d.Femmes : d.pfemme, y: "age", curve: "step", stroke:"#222330", strokeWidth:1.5}), Plot.areaX(filter, {filter: d=> range===d.annee , x: d=> indic === "Number of inhabitants" ? 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 === "Number of inhabitants" ? d.Femmes : d.pfemme, y: "age", curve: "step", fill:pal100[0], fillOpacity:0.8}), Plot.line(dfTip, { x: d=> indic === "Number of inhabitants" ? 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 === "Number of inhabitants" ? d.n2 : d.p2, label:""}, }, tip: {format: {x: false, y: false, z: false, annee: d=> `In ${d} :`, sexe: true, aNaissance: d=> `Born in ${d.toString()}`, age: d=> `Age of ${d.toString()}`, valeur: indic === "Number of inhabitants" ? d=> `Number: ${d.toFixed(0)},000` : d=> `‰: ${d.toFixed(1)}‰`}, strokeWidth:0} }), Plot.ruleY(filter, Plot.pointerY({x1: d=> indic === "Number of inhabitants" ? -500 : -11, x2: d=> indic === "Effectif" ? 500 : 11, y: "age", stroke: rWidth>600 ? "black" : "transparent"})), Plot.dot(filter, Plot.pointerY({x: d=> indic === "Number of inhabitants" ? d.n : d.p, y: "age", stroke: rWidth>600 ? "black" : "transparent", fill:"white"})), Plot.text(filter, Plot.pointerY({x: d=> indic === "Number of inhabitants" ? 505 : 11.2, y: "age", dy: -17, frameAnchor: "middle", textAnchor:"start", text: d=> rWidth>600 ? `Born in\n${d.aNaissance}` : ``, className:"pointer" })), Plot.text(["Men"],{x: d=> indic=== "Number of inhabitants" ? -200 : -4, y:99, textAnchor:"end", lineAnchor:"bottom"}), Plot.text(["Women"],{x: d=> indic=== "Number of inhabitants" ? 200 : 4, y:99, textAnchor:"start", lineAnchor:"bottom"}), Plot.text(["Age"],{x: d=> indic=== "Number of inhabitants" ? -500 : -11, y:104, textAnchor:"end", lineAnchor:"bottom"}), Plot.ruleX([0]), Plot.ruleY([0], {strokeWidth:0.5}), ] })30:Td57,boxPlotGraph1 = htl.html `

${viewof rWidth} ${legendX} ${cssLegend} ${display}

Note : No data available for 1915–1919 (World War I). Centenarians are not included to the pyramid.

Champ: Metropolitan France.

Source: Data from INSEE's interactive age pyramid [Link].

`31:T615,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 ? 70 : rWidth>600 ? 60 : 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==="Men", x: d=> -d.p, y:"y", fill:"Année", stroke:"white", strokeWidth:0.2, fillOpacity:1}), Plot.barX(prop1565, {filter: d=> d.Sexe==="Women", x: d=> d.p, y:"y", fill:"Année", stroke:"white", strokeWidth:0.2, fillOpacity:1}), Plot.text(["Less than 15 years"], {x: 0, y:-1}), Plot.text(["65 years and over"], {x: 0, y:3}), Plot.text(["Men"], {x: -10.5, y:-2, textAnchor:"end"}), Plot.text(["Women"], {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==="Men",x:d=> -d.p+1.25, y: "y", text: d=> d.p.toFixed(1).replace(".",",")}), Plot.text(prop1565,{filter: d=> d.Sexe==="Women",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:T17a2,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==="Number of inhabitants" ? [-500,-400,-300,-200,-200,-100,0,100,200,300,400,500] : rWidth<=500 & indic==="Number of inhabitants" ? [-500,-250,0,250,500] : rWidth>500 & indic==="Number of inhabitants" ? [-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==="Number of inhabitants" ? [-500,500] : [-11,11], grid: true, label: indic==="Number of inhabitants" ? "Number (in thousands)" : "‰", labelAnchor:"center", labelArrow:false }, marks: [ Plot.line(df1b, {filter: d=> annee===d.annee , x: d=> indic === "Number of inhabitants" ? d.Hommes : d.phomme, y: "age", curve: "step", stroke:"#222330", strokeWidth:1.5}), Plot.line(df1b, {filter: d=> annee===d.annee , x: d=> indic === "Number of inhabitants" ? d.Femmes : d.pfemme, y: "age", curve: "step", stroke:"#222330", strokeWidth:1.5}), Plot.areaX(df1b, {filter: d=> annee===d.annee , x: d=> indic === "Number of inhabitants" ? 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 === "Number of inhabitants" ? 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 === "Number of inhabitants" ? -500 : -11, x2: d=> indic === "Effectif" ? 500 : 11, y: "age", stroke: rWidth>600 ? "black" : "transparent"})), Plot.dot(pointer, Plot.pointerY({x: d=> indic === "Number of inhabitants" ? d.n : d.p, y: "age", stroke: rWidth>600 ? "black" : "transparent", fill:"white"})), Plot.text(pointer, Plot.pointerY({x: d=> indic === "Number of inhabitants" ? 505 : 11.2, y: "age", dy: -17, frameAnchor: "middle", textAnchor:"start", text: d=> rWidth>600 ? `Born in\n${d.aNaissance}` : ``, className:"pointer" })), Plot.line(dfTip1Pyr1, {filter: d=> annee===d.annee , x: d=> indic === "Number of inhabitants" ? 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 === "Number of inhabitants" ? d.n2 : d.p2, label:""}, }, tip: {format: {x: false, y: false, z: false, annee: d=> `In ${d}:`, sexe: true, aNaissance: d=> `Born in ${d.toString()}`, age: d=> `Age of ${d.toString()}`, valeur: indic === "Number of inhabitants" ? d=> `Number: ${d.toFixed(0)},000` : d=> `‰: ${d.toFixed(1)}‰`}, strokeWidth:0} }), Plot.text(["Men"],{x: d=> indic=== "Number of inhabitants" ? -200 : -4, y:99, textAnchor:"end", lineAnchor:"bottom"}), Plot.text(["Women"],{x: d=> indic=== "Number of inhabitants" ? 200 : 4, y:99, textAnchor:"start", lineAnchor:"bottom"}), Plot.text(["Age"],{x: d=> indic=== "Number of inhabitants" ? -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 === "Number of inhabitants" ? 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 === "Number of inhabitants" ? 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=> `Born in ${d.aNaissance.toString()}`, lineAnchor:"bottom"}), Plot.arrow(df1b, {filter: d=> d.aNaissance==gen && annee===d.annee , x1:d=>0, x2: d=> indic === "Number of inhabitants" ? 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 === "Number of inhabitants" ? d.Femmes/3 : d.pfemme/3, y1:d=>d.age+4.9,y2:d=>d.age+.5, bend:5, strokeWidth:1}), ] })33:Td31,boxPlotGraph3 = htl.html `

${viewof rWidth} ${plot3}

Note : No data available for 1915–1919 (World War I). Centenarians are not included to the pyramid.

Champ: Metropolitan France.

Source: Data from INSEE's interactive age pyramid [Link].

35:Taa5,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 = "Play"; 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":"c3406027c5e2ded55dffcfb02a0a595a7c4ed8125f074e7be451c747387cfa8863a001c82f86bc7e9be236b8c2acc2581bb42751ecb345a679a5c4a28a121d71","href":"https://static.observableusercontent.com/files/c3406027c5e2ded55dffcfb02a0a595a7c4ed8125f074e7be451c747387cfa8863a001c82f86bc7e9be236b8c2acc2581bb42751ecb345a679a5c4a28a121d71","name":"data@2.csv","type":"text/csv","lastModified":1787736298954.719,"size":758613},{"id":"f1f731343eac027ac35e6042d53118397ac1e905d8b0d54a05030718b5d934db281484589d65410ceb1a939007857fc3b8948d4f4461d097355878c818bed034","href":"https://static.observableusercontent.com/files/f1f731343eac027ac35e6042d53118397ac1e905d8b0d54a05030718b5d934db281484589d65410ceb1a939007857fc3b8948d4f4461d097355878c818bed034","name":"n642_1@1.csv","type":"text/csv","lastModified":1787736298954.719,"size":2024}] 2c:{"id":"c0c4de626888a7ee","slug":null,"title":"New Age pyramids France EN - Resize (24580)","thumbnail":"a5639d8fda7e1e64fee290204baf26a8d0cc70ab45bbe75fe18e958e8e9bfd41","access_level":"public","create_time":"$D2026-08-26T09:24:58.954Z","update_time":"$D2026-09-18T22:01:03.576Z","view_time":null,"first_public_time":"$D2026-08-26T10:22:43.744Z","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":"free_2026"},"version":2354,"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":{"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 Age pyramids France EN - Resize (24580)","cells":[{"id":0,"value":"# New Age pyramids France EN - 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([\"One pyramid\", \"Two stacked pyramids\"], {label: \"\", value: \"One pyramid\"}) ","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 === \"One pyramid\" ? 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 === \"One pyramid\" ? 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: \"Men\", 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: \"Women\", 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: \"Main pyramid:\", 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: \"Comparison pyramid:\", 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([\"Per 1,000 inhabitants (‰)\", \"Number of inhabitants\"], {label: \"Indicator :\", value: \"Per 1,000 inhabitants\"})","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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1413,"value":"display = plot2Choix === \"No\" ? 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":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: \"Men\", age:\"Youngs\", age2: \"Less than 15 years\", y:1, filtre: 0},\n {p: d3.sum(filter.filter(d=> d.age>=65) , (d) => -d.phomme/10), Année: range, Sexe: \"Men\", age:\"Elderly\", age2: \"65 years and over\", y: 4, filtre: 1 },\n{p: d3.sum(filter.filter(d=> d.age<15) , (d) => d.pfemme/10), Année: range, Sexe: \"Women\", age:\"Youngs\", age2: \"Less than 15 years\", y:1, filtre: 1},\n {p: d3.sum(filter.filter(d=> d.age>=65) , (d) => d.pfemme/10), Année: range, Sexe: \"Women\", age:\"Elderly\", age2: \"65 years and over\", 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: \"Men\", age:\"Youngs\", age2: \"Less than 15 years\", y: 2},\n {p: d3.sum(datab.filter(d=> d.age>=65 && d.annee===rangeRef) , (d) => -d.phomme/10), Année: rangeRef, Sexe: \"Men\", age:\"Elderly\", age2: \"65 years and over\", y:5},\n{p: d3.sum(datab.filter(d=> d.age<15 && d.annee===rangeRef) , (d) => d.pfemme/10), Année: rangeRef, Sexe: \"Women\", age:\"Youngs\", age2: \"Less than 15 years\", y:2},\n {p: d3.sum(datab.filter(d=> d.age>=65 && d.annee===rangeRef) , (d) => d.pfemme/10), Année: rangeRef, Sexe: \"Women\", age:\"Elderly\", age2: \"65 years and over\", y:5}, \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":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: \"Proportion of youngs and elderly\"})","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":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":true,"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: \"Track a year of birth:\", step: 1, value: 1970})","pinned":false,"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":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":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"