2f:T764,X = htl.html`

${title4} ${viewof typeG} ${display} ${cssToggle} ${note} ${viewof rWidth}

Z. Ouadah-Bedidi, I. Bouchoucha, S. Abdellatif, Population & Sociétés, 644, mai 2026, Ined.

Note : Structure par âge et par sexe, exprimée pour 10 000 habitants.

Sources : Recensements et estimations, ONS (Algérie), HCP (Maroc) et INS (Tunisie), voir encadré.

`30:T1b6e,plot4 = Plot.plot((() => { const n = 3; // number of facet columns const keys = Array.from(d3.union(df4.map((d) => d.paysAnnFr))); const index = new Map(keys.map((key, i) => [key, i])); const fx = (key) => index.get(key) % n; const fy = (key) => Math.floor(index.get(key) / n); return { // width: .9*width, // height: width>1000 ? .75*width : width>650 ? .8*width : width>500 ? 1.1*width : 1.4*width, // marginLeft: width>1300 ? 135 : width>700 ? 100 : width>480 ? 80 : 65 , // marginRight:0, // marginTop: 40, // marginBottom: width>1000 ? 70 : width>500 ? 40 : 30, width: rWidth, height: rWidth>900 ? 0.7*rWidth : rWidth>600 ? .8*rWidth: 430, marginLeft: rWidth>600 ? 80 : 60 , marginBottom: rWidth>600 ? 50 :40, marginRight:0, y: {reverse: true, grid: false, label: "Classe d'Âges", labelArrow: false, axis: true, tickSize: width>500 ? 5 : 2}, x: { tickFormat: d=> Math.abs(d).toString() ,label: "Habitants", labelArrow: false, labelAnchor:"center", domain: [-1050, 1050], ticks: width>600 ? [-800, -400,0,400,800] : [-500,0,500]}, fy: {axis: false, padding: width>600 ? .13 : .16}, fx: {axis:false}, marks: [ Plot.frame({strokeWidth:0.5}), // 60 Plot.text(["0-4"], { fx: [0], fy: [0], x: xAge, y: 1, textAnchor:"end"}) , Plot.text(["10-14"], { fx: [0], fy: [0], x: xAge, y: 3, textAnchor:"end"}) , Plot.text(["20-24"], { fx: [0], fy: [0], x: xAge, y: 5, textAnchor:"end"}) , Plot.text(["30-34"], { fx: [0], fy: [0], x: xAge, y: 7, textAnchor:"end"}) , Plot.text(["40-44"], { fx: [0], fy: [0], x: xAge, y: 9, textAnchor:"end"}) , Plot.text(["50-54"], { fx: [0], fy: [0], x: xAge, y: 11, textAnchor:"end"}) , Plot.text(["60-64"], { fx: [0], fy: [0], x: xAge, y: 13, textAnchor:"end"}) , Plot.text(["70-74"], { fx: [0], fy: [0], x: xAge, y: 15, textAnchor:"end"}) , Plot.text(["80 et +"], { fx: [0], fy: [0], x: xAge, y: 17, textAnchor:"end"}) , //90 Plot.text(["0-4"], { fx: [0], fy: [1], x: xAge, y: 1, textAnchor:"end"}) , Plot.text(["10-14"], { fx: [0], fy: [1], x: xAge, y: 3, textAnchor:"end"}) , Plot.text(["20-24"], { fx: [0], fy: [1], x: xAge, y: 5, textAnchor:"end"}) , Plot.text(["30-34"], { fx: [0], fy: [1], x: xAge, y: 7, textAnchor:"end"}) , Plot.text(["40-44"], { fx: [0], fy: [1], x: xAge, y: 9, textAnchor:"end"}) , Plot.text(["50-54"], { fx: [0], fy: [1], x: xAge, y: 11, textAnchor:"end"}) , Plot.text(["60-64"], { fx: [0], fy: [1], x: xAge, y: 13, textAnchor:"end"}) , Plot.text(["70-74"], { fx: [0], fy: [1], x: xAge, y: 15, textAnchor:"end"}) , Plot.text(["80-84"], { fx: [0], fy: [1], x: xAge, y: 17, textAnchor:"end"}) , // 20 Plot.text(["0-4"], { fx: [0], fy: [2], x: xAge, y: 1, textAnchor:"end"}) , Plot.text(["10-14"], { fx: [0], fy: [2], x: xAge, y: 3, textAnchor:"end"}) , Plot.text(["20-24"], { fx: [0], fy: [2], x: xAge, y: 5, textAnchor:"end"}) , Plot.text(["30-34"], { fx: [0], fy: [2], x: xAge, y: 7, textAnchor:"end"}) , Plot.text(["40-44"], { fx: [0], fy: [2], x: xAge, y: 9, textAnchor:"end"}) , Plot.text(["50-54"], { fx: [0], fy: [2], x: xAge, y: 11, textAnchor:"end"}) , Plot.text(["60-64"], { fx: [0], fy: [2], x: xAge, y: 13, textAnchor:"end"}) , Plot.text(["70-74"], { fx: [0], fy: [2], x: xAge, y: 15, textAnchor:"end"}) , Plot.text(["80 et +"], { fx: [0], fy: [2], x: xAge, y: 17, textAnchor:"end"}) , Plot.barX(df4, { fx: (d) => fx(d.paysAnnFr), fy: (d) => fy(d.paysAnnFr), x: d=> -d.hommes , y: "age", channels: {age: {value:"age"}}, sort: {y: "age"}, fill: d=> d.paysAnnFr=="Algérie - 1966" ? "#289866" : d.paysAnnFr=="Algérie - 1998" ? "#289866" : d.paysAnnFr=="Algérie - 2023" ? "#289866" : d.paysAnnFr=="Maroc - 1960" ? "#f60b00" : d.paysAnnFr=="Maroc - 1998" ? "#f60b00" : d.paysAnnFr=="Maroc - 2024" ? "#f60b00" : d.paysAnnFr=="Tunisie - 1966" ? "#0037c4" : d.paysAnnFr=="Tunisie - 1997" ? "#0037c4" : "#0037c4" , fillOpacity: .8, stroke: "white", strokeWidth: .5, }), Plot.barX(df4, { fx: (d) => fx(d.paysAnnFr), fy: (d) => fy(d.paysAnnFr), x: d=> d.femmes , y: "age", channels: {age: {value:"age"}}, sort: {y: "age"}, fill: d=> d.paysAnnFr=="Algérie - 1966" ? "#289866" : d.paysAnnFr=="Algérie - 1998" ? "#289866" : d.paysAnnFr=="Algérie - 2023" ? "#289866" : d.paysAnnFr=="Maroc - 1960" ? "#f60b00" : d.paysAnnFr=="Maroc - 1998" ? "#f60b00" : d.paysAnnFr=="Maroc - 2024" ? "#f60b00" : d.paysAnnFr=="Tunisie - 1966" ? "#0037c4" : d.paysAnnFr=="Tunisie - 1997" ? "#0037c4" : "#0037c4" , fillOpacity: .8, stroke: "white", strokeWidth: .5, }), Plot.text(keys, {fx, fy, frameAnchor: "top", dx: -3, dy: width>1000 ? -20 : width>500 ? -15 : -10, className:"labPaysAnn", }), Plot.line(df4Tip, { fx: (d) => fx(d.paysAnnFr), fy: (d) => fy(d.paysAnnFr), x: "n" , y:"age", z:"sexe", fill: "transparent", stroke: "transparent", channels: { paysAnn: {value: "paysAnnFr", label:""}, sexe: {value: "sexe", label:""}, age: {value: "gage", label: ""}, n: {value: "n", label:""} }, tip: {format: {x: false, y: false, fx: false, fy:false, fill: false, z: false, paysAnn: true, sexe: true, age: d=>`${d} an(s)`, n: d=> `${Math.abs(d).toFixed(0)}‱`}, strokeWidth:0}, }), Plot.text(df4, {filter: d=> d.paysAnnFr==="Algérie - 1966" , x:-400, y:"age", text: d=> rWidth>900 ? d.textH1 : d.textH2, textAnchor:"end", lineAnchor:"top", className: "sexePlot"}), Plot.text(df4, {filter: d=> d.paysAnnFr==="Algérie - 1966" , x:400, y:"age", text: d=> rWidth>900 ? d.textF1 : d.textF2, textAnchor:"start", lineAnchor:"top", className: "sexePlot"}) ] }; })())31:T760,plot4Mag = htl.html`

H : Hommes - F : Femmes

${plot4}

`32:T1af9,plot4B = Plot.plot({ width: rWidth, height: rWidth>900 ? 0.6*rWidth : rWidth>600 ? .7*rWidth: 350, marginLeft: rWidth>900 ? 90 : width>600 ? 70 : 50 , marginBottom: rWidth>600 ? 50 :40, marginRight:0, y: {domain: [0,16.5], ticks: width>600 ? [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16] : [0,2,4,6,8,10,12,14,16], tickPadding:0, grid: false, label: "Classe d'âges", labelArrow: false, axis: true}, x: { tickFormat: d=> Math.abs(d).toString() , label: "Habitants", labelArrow: false, labelAnchor:"center", domain: [-1000,1000], ticks: width> 500 ? [-800,-400,0,400,800] : [-800,-400,0,400,800]}, marks: [ Plot.text(filter, {filter: d=> d.age==1 ,x:0, y:16.6, text:"paysAnnFr", fill: d=> d.paysFr==="Algérie" ? "#289866" : d.paysFr==="Maroc" ? "#f60b00" : "#0037c4", className:"titrePays"}), Plot.text(filter, {x: rWidth> 600 ? -1030 : -1040, y: d=> d.age -1, text: d=> rWidth>600 && compAnnee2 == true && compPays2== false && annee!="Années 1990" ? d.gage : rWidth>600 && compAnnee2 == true && compPays2== true && annee=="Années 1990" ? d.gage : rWidth>600 && compAnnee2 == true && compPays2== true && annee!="Années 1990" ? d.gage : rWidth>600 && compAnnee2 == true && annee=="Années 1990" ? d.gageb : rWidth<=600 && compAnnee2 == true && compPays2== true && annee=="Années 1990" ? d.gage2 : rWidth<=600 && compAnnee2 == true && annee=="Années 1990" ? d.gage2b : rWidth>600 && compAnnee2 == false ? d.gage : d.gage2, textAnchor:"end"}) , // Comparaison autres pays Plot.line(filterPays2, { x: d=> -d.hommes , y: d=>d.age -1, curve: "catmull-rom", z: "paysFr", stroke: d=> d.paysFr==="Algérie" ? col[4] : d.paysFr==="Maroc" ? col[0] : col[3], fillOpacity: 0, strokeWidth: width>500 ? 5 : 3, }), Plot.line(filterPays2, { x: d=> d.femmes , y: d=>d.age -1, curve: "catmull-rom", z: "paysFr", stroke: d=> d.paysFr==="Algérie" ? col[4] : d.paysFr==="Maroc" ? col[0] : col[3], fillOpacity: 0, strokeWidth: width>500 ? 5 : 3, }), // pays selctionné Plot.areaX(filter, { x: d=> -d.hommes , y: d=> d.age -1, curve: "catmull-rom", fill: d=> typeG==="Algérie" && compPays2===true ? col[4] : typeG==="Maroc" && compPays2===true ? col[0] : typeG==="Tunisie" && compPays2===true ? col[3] : "#dddddd", fillOpacity: compPays2===true ? .5 : 1, stroke: "black", strokeWidth: .5, }), Plot.areaX(filter, { x: d=> d.femmes , y: d=> d.age -1, curve: "catmull-rom", fill: d=> typeG==="Algérie" && compPays2===true ? col[4] : typeG==="Maroc" && compPays2===true ? col[0] : typeG==="Tunisie" && compPays2===true ? col[3] : "#dddddd", fillOpacity: compPays2===true ? .5 : 1, stroke: "black",strokeWidth: .5, }), // Comparaison années Plot.line(filterAnnee1, { x: d=> -d.hommes , y: d=>d.age -1, curve: "catmull-rom", z: "annee", stroke: d=> d.annee2==="2024" && d.paysFr==="Tunisie" ? "#00288d" : d.annee2==="1997" && d.paysFr==="Tunisie" ? "#074dff" : d.annee2==="1966" && d.paysFr==="Tunisie" ? "#acc4ff" : d.annee2==="2024" && d.paysFr==="Maroc" ? "#c80900" : d.annee2==="1998" && d.paysFr==="Maroc" ? "#ff6760" : d.annee2==="1960" && d.paysFr==="Maroc" ? "#ffaaa6" : d.annee2==="2023" && d.paysFr==="Algérie" ? "#207850" : d.annee2==="1998" && d.paysFr==="Algérie" ? "#44ce90" : "#9fe6c6", strokeWidth: width>500 ? 5 : 3, }), Plot.line(filterAnnee1, { x: d=> d.femmes , y: d=>d.age -1, curve: "catmull-rom", z: "annee", stroke: d=> d.annee2==="2024" && d.paysFr==="Tunisie" ? "#00288d" : d.annee2==="1997" && d.paysFr==="Tunisie" ? "#074dff" : d.annee2==="1966" && d.paysFr==="Tunisie" ? "#acc4ff" : d.annee2==="2024" && d.paysFr==="Maroc" ? "#c80900" : d.annee2==="1998" && d.paysFr==="Maroc" ? "#ff6760" : d.annee2==="1960" && d.paysFr==="Maroc" ? "#ffaaa6" : d.annee2==="2023" && d.paysFr==="Algérie" ? "#207850" : d.annee2==="1998" && d.paysFr==="Algérie" ? "#44ce90" : "#9fe6c6", strokeWidth: width>500 ? 5 : 3, }), Plot.ruleY([0]), Plot.ruleX([0], {y1:0, y2:16}), Plot.text(["Hommes"], {x:-400, y:16, textAnchor:"end"}), Plot.text(["Femmes"], {x:500, y:16, textAnchor:"start"}), // Tip Plot.line(plot4bTip, {x: "n",y:d=> d.age-1, z: "z", curve: "catmull-rom", stroke: "transparent", channels: { paysAnn: {value: "paysAnn", label: ""}, sexe: {value: "sexe", label:""}, age: {value: "gage", label:""}, n: {value: "n", label:""} }, tip: {format: {x: false, y: false, fx: false, fy:false, fill: false, z: false, paysAnn: true, sexe: true, age: d=>`${d} ans`, n: d=> `${Math.abs(d).toFixed(0)}‱`}, strokeWidth:0}, }), Plot.crosshairY(filter, { y: d=> d.age-1, stroke:"black", fill:"transparent", textStroke:"transparent", textFill:"transparent"}), Plot.ruleX([-1000], {y1:0, y2:16}) ] })33:T794,plot4P = htl.html`

${plot4B} ${viewof rWidth}

`34:Tc2a, 35:[{"id":"a9ef40ea5a6099b7c0bacaea48441fe0d341469bf4714b791ccf8e7a039948a1c793c852e4b84ad8b377d886b7da10993bcbf6f224450202bb9797d01a890440","href":"https://static.observableusercontent.com/files/a9ef40ea5a6099b7c0bacaea48441fe0d341469bf4714b791ccf8e7a039948a1c793c852e4b84ad8b377d886b7da10993bcbf6f224450202bb9797d01a890440","name":"n644_4@9.csv","type":"text/csv","lastModified":1778647993901.914,"size":17984},{"id":"fe12d2f1aa8c460d4ab1b5fbdfb049e2a63daeb710452fe81508fc45a2c964ad765f114178daa3df25d7ed6aa3d0755af29c86d172e137c29cf4fc0ef2d36531","href":"https://static.observableusercontent.com/files/fe12d2f1aa8c460d4ab1b5fbdfb049e2a63daeb710452fe81508fc45a2c964ad765f114178daa3df25d7ed6aa3d0755af29c86d172e137c29cf4fc0ef2d36531","name":"n644_4@10.csv","type":"text/csv","lastModified":1778672862074.925,"size":19469},{"id":"fe12d2f1aa8c460d4ab1b5fbdfb049e2a63daeb710452fe81508fc45a2c964ad765f114178daa3df25d7ed6aa3d0755af29c86d172e137c29cf4fc0ef2d36531","href":"https://static.observableusercontent.com/files/fe12d2f1aa8c460d4ab1b5fbdfb049e2a63daeb710452fe81508fc45a2c964ad765f114178daa3df25d7ed6aa3d0755af29c86d172e137c29cf4fc0ef2d36531","name":"n644_4@11.csv","type":"text/csv","lastModified":1778673150972.702,"size":19469},{"id":"5e12519c10e0ebd07b0a831a7f1f1c204a70e9e7c7a9373e564a37bc8d844ab71139873abe726af6f5fc90e2a486f60a00c22c125194eb3293963b163f3e83c2","href":"https://static.observableusercontent.com/files/5e12519c10e0ebd07b0a831a7f1f1c204a70e9e7c7a9373e564a37bc8d844ab71139873abe726af6f5fc90e2a486f60a00c22c125194eb3293963b163f3e83c2","name":"n644_4@12.csv","type":"text/csv","lastModified":1778673476619.347,"size":19461},{"id":"c09b16c002c7bd6a5a2afe8c9388a39cb4251f848d3ae75d5265191869b49c44313ae014de2f29cfd852cee09cd5f673b1d0ed1842dc626ce821e48902f767db","href":"https://static.observableusercontent.com/files/c09b16c002c7bd6a5a2afe8c9388a39cb4251f848d3ae75d5265191869b49c44313ae014de2f29cfd852cee09cd5f673b1d0ed1842dc626ce821e48902f767db","name":"n644_4@13.csv","type":"text/csv","lastModified":1778673788085.1,"size":19463},{"id":"dce2a3ec9926255ca1d4d3b1e55bc52b546a5e86a6308d25e574227d23fb346b1b05c8546ecb8e3b57e687a6d38e6582f5b72dc75c62cb02fa5c99f1fec64b73","href":"https://static.observableusercontent.com/files/dce2a3ec9926255ca1d4d3b1e55bc52b546a5e86a6308d25e574227d23fb346b1b05c8546ecb8e3b57e687a6d38e6582f5b72dc75c62cb02fa5c99f1fec64b73","name":"n644_4@14.csv","type":"text/csv","lastModified":1779088968849.508,"size":25150}] 2d:{"title":"n644-4 pyramides (FR)","cells":[{"id":0,"value":"# n644-4 pyramides (FR)","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"pal100 = [\n \"#ff564e\", //rouge\n \"#ff7aad\", //rose\n \"#522673\", //mauve\n \"#0042eb\", //bleu\n \"#5cd49e\", //vert\n \"#ffb322\", //jaune\n \"#222330\", //black\n \"#d1d1d1\" //gris\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1526,"value":"Affichage réglé pour l'embed sur le site de l'Ined","pinned":false,"hidden":false,"mode":"md"},{"id":435,"value":"## Display","pinned":false,"hidden":false,"mode":"md"},{"id":437,"value":"viewof typeG = Inputs.radio([\"Maghreb\", \"Algérie\", \"Maroc\", \"Tunisie\"], {label: \"\", value: \"Maghreb\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"choixGraph = typeG===\"Maghreb\" ? plot4Mag : plot4B","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"display = typeG!=\"Maghreb\" && compPays2==true ? html` ${viewof annee} ${viewof compPays2} ${legendPays} ${plot4P}` :\n typeG!=\"Maghreb\" && compPays2==false && compAnnee2==true ? html`${viewof annee} ${viewof compPays2} ${viewof compAnnee2} ${legendAnn} ${plot4P}` :\n typeG!=\"Maghreb\" && compPays2==false && compAnnee2==false ? html` ${viewof annee} ${viewof compPays2} ${viewof compAnnee2} ${plot4P}` : html`${plot4Mag}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":433,"value":"## GRAPHIQUES","pinned":false,"hidden":false,"mode":"md"},{"id":458,"value":"### graphique maghreb ","pinned":false,"hidden":false,"mode":"md"},{"id":258,"value":"title4 = html`

Figure 4. Pyramides des âges au Maghreb, dans les années 1960, 1990 et 2020

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"data4 = FileAttachment(\"n644_4@14.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"df4 = data4.map(d=>({\n paysFr: d.paysFr,\n age: d.age,\n age2: d.gage2 === null ? null: d.age, \n gage: d.gage,\n gageb: d.gageb, \n gage2: d.gage2 === null ? \"\": d.gage2,\n gage2b: d.gage2b === null ? \"\": d.gage2b, \n paysAnnFr: d.paysAnnFr,\n hommes: d.hommes,\n femmes: d.femmes,\n textH1: d.textH1,\n textF1: d.textF1, \n textH2: d.textH2,\n textF2: d.textF2,\n annee : d.annee,\n annee2 : d.annee2.toString()\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"df4H = df4.map(d=>({\nage: d.age, \ngage: d.gage,\npaysAnnFr : d.paysAnnFr, \npays: d.paysFr,\nannee: d.annee, \nsexe: \"Hommes\",\nn: - d.hommes \n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"df4F = df4.map(d=>({\nage: d.age, \ngage: d.gage,\npaysAnnFr : d.paysAnnFr,\npays: d.paysFr,\nannee: d.annee, \nsexe: \"Femmes\",\nn: d.femmes \n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"df4Tip = df4F.concat(df4H)","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"yAll = [...new Set(df4.map(d=>(d.gage)))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":999,"value":"xAge = -1150","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"### Graphique Pays","pinned":false,"hidden":false,"mode":"md"},{"id":467,"value":"labAnn = [...new Set(df4.map(d=>(d.annee)))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"viewof annee = Inputs.radio(labAnn, {label: \"\", value: \"Années 2020\"}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"// viewof compPaysXXX = Inputs.toggle({label: \"Comparer les pays :\", value: true}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1399,"value":"viewof compPays = Inputs.checkbox([\"Comparer les pays\"], {label: \"\", value: [\"Comparer les pays\"]})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1520,"value":"viewof compPays2 = toggle({label: \"Comparer les pays\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1404,"value":"//compPays2 = compPays.includes(\"Comparer les pays\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1431,"value":"//viewof compAnnee = Inputs.checkbox([\"Comparer les années\"], {label: \"\", value: [\"Comparer les années\"]})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1499,"value":"viewof compAnnee2 = toggle({label: \"Comparer les années\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":462,"value":"filter = df4.filter(d=> typeG.includes(d.paysFr) && annee==d.annee)","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"filterPays1 = df4.filter(d=> annee == d.annee)","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"filterPays2 = filterPays1.filter(d=> compPays2==true ? d.paysFr!= typeG : d.paysFr=== typeG)","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"filterAnnee1 = df4.filter(d=>typeG.includes(d.paysFr) && compAnnee2==true && compPays2==false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1090,"value":"filterPaysTipH = filterPays1.map(d=>({\nage: d.age, \ngage: d.gage,\npaysAnn : d.paysAnnFr, \npays: d.paysEn,\nannee: d.annee, \nsexe: \"Hommes\",\nn: - d.hommes,\nz : `homme${d.annee}${d.paysFr}` \n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1093,"value":"filterPaysTipF = filterPays1.map(d=>({\nage: d.age, \ngage: d.gage,\npaysAnn : d.paysAnnFr, \npays: d.paysEn,\nannee: d.annee, \nsexe: \"Femmes\",\nn: d.femmes,\nz : `femme${d.annee}${d.paysFr}`\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1096,"value":"filterPaysTip = filterPaysTipF.concat(filterPaysTipH)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1130,"value":"filterAnneeTipH = filterAnnee1.map(d=>({\nage: d.age, \ngage: d.gage,\npaysAnn : d.paysAnnFr, \npays: d.paysEn,\nannee: d.annee, \nsexe: \"Hommes\",\nn: - d.hommes,\nz : `homme${d.annee}` \n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1133,"value":"filterAnneeTipF = filterAnnee1.map(d=>({\nage: d.age, \ngage: d.gage,\npaysAnn : d.paysAnnFr, \npays: d.paysEn,\nannee: d.annee, \nsexe: \"Femmes\",\nn: d.femmes,\nz : `femme${d.annee}` \n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"filterAnneeTip1 = filterAnneeTipF.concat(filterAnneeTipH)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1142,"value":"filterAnneeTip = compAnnee2 == true ? filterAnneeTip1 : filterAnneeTip1.filter(d=> d.annee==annee)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1164,"value":"filterAnneePaysTipH = filter.map(d=>({\nage: d.age, \ngage: d.gage,\npaysAnn : d.paysAnnFr, \npays: d.paysFr,\nannee: d.annee, \nsexe: \"Hommes\",\nn: - d.hommes,\nz : \"Hommes\",\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1166,"value":"filterAnneePaysTipF = filter.map(d=>({\nage: d.age, \ngage: d.gage,\npaysAnn : d.paysAnnFr, \npays: d.paysFr,\nannee: d.annee, \nsexe: \"Femmes\",\nn: d.femmes,\nz : \"Femmes\" \n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"filterAnneePaysTip = filterAnneePaysTipF.concat(filterAnneePaysTipH)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1115,"value":"plot4bTip = compPays2==true ? filterPaysTip : compPays2==false && compAnnee2==true ? filterAnneeTip : filterAnneePaysTip","pinned":true,"hidden":false,"mode":"ojs"},{"id":1195,"value":"annee","pinned":true,"hidden":false,"mode":"ojs"},{"id":678,"value":"##### legends","pinned":false,"hidden":false,"mode":"md"},{"id":899,"value":"colAnn = [\"#207850\",\"#44ce90\",\"#9fe6c6\",\"#c80900\",\"#ff6760\",\"#ffaaa6\",\"#00288d\",\"#074dff\",\"#acc4ff\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"legendPays = Plot.legend({ swatchWidth:30, swatchSize:5, color : {\n domain: typeG==\"Algérie\" ? [\"Maroc\", \"Tunisie\"] :\n typeG==\"Maroc\" ? [\"Algérie\", \"Tunisie\"] : \n typeG==\"Tunisie\" ? [\"Algérie\", \"Maroc\"] : [\"\"],\n range: typeG==\"Algérie\" ? [col[0], col[3]] :\n typeG==\"Maroc\" ? [col[4], col[3]] : \n typeG==\"Tunisie\" ? [col[4], col[0]] : [\"transparent\"],\n} \n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"legendAnn = Plot.legend({ swatchWidth:25, swatchSize:5, color : {\n domain: [\"Années 1960\",\"Années 1990\",\"Années 2020\"],\n \n range: typeG==\"Algérie\" ? [colAnn[2], colAnn[1], colAnn[0]] :\n typeG==\"Maroc\" ? [colAnn[5], colAnn[4], colAnn[3]] : \n typeG==\"Tunisie\" ? [colAnn[8], colAnn[7], colAnn[6]] : [\"transparent\"]\n}\n \n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"annLeg2 = [...new Set(filterAnnee1.map(d=>(d.annee2)))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"annPays = [...new Set(filter.map(d=>(d.annee2)))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":836,"value":"col = [\"#f60b00\",\"transparent\",\"transparent\",\"#0037c4\",\"#289866\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1243,"value":"note = typeG!=\"Maghreb\" && compAnnee2 == true && annee==\"Années 1990\" && compPays==false ? html`

* Pour les années 1990, il s'agit de la classe d'âges 80-84 ans.

` : \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1290,"value":"filter","pinned":true,"hidden":false,"mode":"ojs"},{"id":494,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":591,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1492,"value":"### css fonctions","pinned":false,"hidden":false,"mode":"md"},{"id":1494,"value":"import {legend, cssLegend, toggle, cssToggle} from \"@wsthevenin/mtinput\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1497,"value":"cssToggle","pinned":true,"hidden":false,"mode":"ojs"},{"id":1532,"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":true,"hidden":false,"mode":"ojs"},{"id":696,"value":"$34","pinned":false,"hidden":false,"mode":"html"}],"files":"$W35","stdlib":"1","titling":"auto"}