3e:null 3f:["$","title",null,{"children":"LAST Pyramides des âges France FR - resize (24580) | Marc Thevenin | Observable"}] 45:T85d,boxPlot = { const content = htl.html`

${viewof rWidth}

${boxPlotInput}

${plot2Side}

${displPyr}

`; return fullscreen(content, "boxPlot", {target:".plot",inBox: true, lang:"fr", title:"Pyramides des âges de la France depuis 1901", fsMax: "clamp(1400px, 80vw, 2200px)"}); }46:T142e,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 ? 50 : rWidth>600 ? 40 : 30, marginRight: marginRightPyr, 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}), ] })47:Td77,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].

`48:T78f,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 ? (isFull ? 320 : 210) : isFull ? Math.min(0.5*rWidth, fsH) : 0.3*rWidth) : rWidth>600 ? 0.4*rWidth : 150 : false , marginTop: rWidth>900 ? 10 : rWidth>600 ? 10 : 10, marginLeft: fsWide ? 55 : rWidth>900 ? (isFull ? 95 : 50) : rWidth>600 ? 40 : 30, marginBottom: fsWide ? (isFull ? 55 : 40) : 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.9, 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.9, y: "y", text: d=> d.p.toFixed(1).replace(".",",")}), Plot.ruleX([0], {y1:1,y2:2}), Plot.ruleX([0], {y1:4,y2:5}) ] }); }49:T1603,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 ? 50 : rWidth>600 ? 30 : 30, marginRight: marginRightPyr, 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}), ] })4a:Te79,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].

`4b:[{"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}] 43:{"id":"3973780fe1e297ec","slug":"last-pyramides-des-ages-france-fr-resize-24580","title":"LAST Pyramides des âges France FR - resize (24580)","thumbnail":"1fcb98bc1a33b8f20935a09ce31b13c45cd444e2358ef7b1ace8b5a24120ef1e","access_level":"public","create_time":"$D2026-10-13T08:24:42.954Z","update_time":"$D2026-10-13T10:27:42.705Z","view_time":null,"first_public_time":"$D2026-10-13T08:43:54.530Z","has_unpublished_edits":null,"fork":{"id":"2879d8d49280a974","slug":null,"title":"FULLSCREEN 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/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":"pro_2026","bio":"Statistical Engineer at the french National Institute for Demographic Studies (INED)"},"version":2728,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":null,"bio":"Statistical Engineer at the french National Institute for Demographic Studies (INED)"}],"members":[{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":"pro_2026","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":"LAST Pyramides des âges France FR - resize (24580)","cells":[{"id":0,"value":"# LAST Pyramides des âges France FR - resize (24580)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2609,"value":"articleLink({\n kicker: \"Tout savoir sur la population\",\n lang: \"fr\",\n en: { url: \"https://www.ined.fr/en/all-about-population/data-graphs/age-pyramids-france-1901\",\n title: \"Age pyramids of France since 1901\" },\n fr: { url: \"https://www.ined.fr/fr/tout-savoir-population/chiffres-graphiques-tableaux/pyramides-ages-france-depuis-1901\",\n title: \"Pyramides des âges de la France depuis 1901\" }\n})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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","tool":"$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\",fontSize: \"clamp(10px,2cqw,13px)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2275,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"#### Input","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$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,\n fontSize: \"clamp(10px,2cqw,13px)\", titleFontSize: \"clamp(10px,2cqw,13px)\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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\",\n fontSize: \"clamp(10px,2cqw,13px)\", titleFontSize: \"clamp(10px,2cqw,13px)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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\",\n titleFontSize: \"clamp(10px,2cqw,13px)\", fontSize:\"clamp(10px,2cqw,13px)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"#### Filtre","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"#### legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$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(10px,2cqw,24px)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":992,"value":"#### Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2276,"value":"isFull = Generators.observe(notify => {\n const get = () => !!document.querySelector(\".fs-wrap.is-full\");\n const mo = new MutationObserver(() => notify(get()));\n mo.observe(document.body, {attributes: true, attributeFilter: [\"class\"], subtree: true});\n notify(get());\n return () => mo.disconnect();\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2281,"value":"// Mise en page \"large\" (fullscreen ET affichage normal) : inputs en colonne + graphiques à droite.\n// Passe en une seule colonne sous 1000 px (tablette et mobile).\n// Doit rester cohérent avec la media query (min-width: 1000px) de boxPlot.\nfsWide = {\n rWidth;\n return window.matchMedia(\"(min-width: 1000px)\").matches;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2277,"value":"// Hauteur max des pyramides.\n// - affichage normal, une colonne : Infinity (inchangé)\n// - affichage normal, deux colonnes : ratio hauteur/largeur = normalRatio (à ajuster)\n// - plein écran : bornée par la place disponible à l'écran et par fsRatio\nfsH = {\n const normalRatio = 0.8;\n if (!isFull) return fsWide ? normalRatio * rWidth / fsN : Infinity;\n const fsRatio = 0.7; // était 0.6 : augmente pour des pyramides plus hautes\n const fsReserve = fsWide ? 200 : 380; // hauteur réservée (légende, notes...) ; était 260 en large\n const avail = Math.min(window.innerHeight, screen.availHeight || screen.height) - fsReserve;\n return Math.max(400, Math.min(avail, fsRatio * rWidth / fsN));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2286,"value":"// Largeur de la colonne pour input et plot2 (plus étroite en affichage normal)\nfsSide = isFull ? 400 : 260","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2279,"value":"// largeur des pyramides : n = rWidth / largeur réelle de la pyramide (1 en une colonne).\n// Colonne de droite = rWidth - fsSide - 15 (gap) - 20 (padding du .plot interne) - petite marge.\nfsN = {\n const n = fsWide ? rWidth / Math.max(200, rWidth - (fsSide + (isFull ? 44 : 38))) : 1;\n return isFull ? Math.max(1.6, n) : n;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2608,"value":"// Marge droite des pyramides (place pour le \"Né en ...\" du pointeur).\n// ➜ Modifie directement les valeurs ci-dessous, chaque cas a sa ligne.\nmarginRightPyr = {\n const pw = rWidth / fsN; // largeur réelle de la pyramide\n\n // 1) Une colonne (écran < 1000 px) : valeurs d'origine\n if (!fsWide) return rWidth > 700 ? 90 : rWidth > 600 ? 70 : 10;\n\n // 2) Plein écran, deux colonnes : valeurs inchangées\n if (isFull) return pw > 800 ? 100 : pw > 650 ? 80 : pw > 500 ? 65 : 50;\n\n // 3) Écran normal, deux colonnes : à ajuster ici\n if (pw > 800) return 60; // pyramide très large\n if (pw > 650) return 48; // large\n if (pw > 500) return 40; // moyenne\n return 32; // étroite\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2287,"value":"// Position de plot2\n// padding-left: 10px = même décalage que les autres inputs (.input a un padding de 10px)\nplot2Side = (fsWide && choixPyr !== \"Une pyramide\")\n ? html`

${viewof plot2Choix}

${plot2Choix === true ? html`

${plot2}

` : \"\"}

`\n : \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2290,"value":"viewof plot2Choix = toggleIned({label: \"Population jeune et âgée\", value:false,fontSize:\"clamp(10px,2cqw,13px)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1673,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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,fontSize:\"clamp(10px,2cqw,13px)\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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\",\n titleFontSize:\"clamp(10px,2cqw,13px)\", fontSize:\"clamp(10px,2cqw,13px)\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1468,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1556,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"## Fonctions & css","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2605,"value":"import {fullscreen, rWidthView} from '@mthevenin/fullscreen'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2610,"value":"import {articleLink} from '@mthevenin/popsoc'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2606,"value":"viewof rWidth = rWidthView({fsMax: \"clamp(1100px, 80vw, 2000px)\", selector: \".plot\", invalidation})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 44:"$43:body"