2f:Ta04,plot2 = Plot.plot({ width: rWidth, height: rWidth>900 ? 0.7*rWidth : rWidth>600 ? 0.8*rWidth : 370, marginTop: rWidth>600 ? 40 : 30, marginLeft: rWidth>500 ? 50 : 30, marginBottom: rWidth>600 ? 60 : 60, marginRight: 10, y: {label: "Taux de fécondité par âge (%)", labelArrow:false, domain: [0,20], ticks: rWidth>600 ? 10 : 5, grid: true}, x: {label: "Classe d'âges", labelArrow:false, labelAnchor: "center", domain:[0.75,7.25], ticks: [1,2,3,4,5,6,7]}, color: {legend:false, domain: domain2Tot, range: range2}, marks: [ Plot.line(select.filter2, {filter: d=> domain2Tot.includes(d.paysFr), x:"ageNum",y:"n", stroke:"transparent", strokeWidth: width>600 ? 4 : 2, channels: { pays: {value:"paysFr", label: ""}, age: {value:"ageFr", label: ""}, n : {value:"n", label:""}, }, tip: {format:{x: false, y: false,stroke:false,z:false, pays: true, age: true, n: d=> `${d.toFixed(1).replace(".",",")}%` }, strokeWidth:0} }), Plot.line(select.filter2, {filter: d=> domain2Tot.includes(d.paysFr) && d.anneeNum==1, x:"ageNum",y:"n", stroke:"paysFr",strokeWidth: width>600 ? 4 : 2, curve:"catmull-rom" }), Plot.line(select.filter2, {filter: d=> domain2Tot.includes(d.paysFr) && d.anneeNum==2, x:"ageNum",y:"n", stroke:"paysFr", strokeWidth: width>600 ? 4 : 2, curve:"catmull-rom", strokeDasharray: [15,8] }), Plot.line(select.filter2, {filter: d=> domain2Tot.includes(d.paysFr) && d.anneeNum==3, x:"ageNum",y:"n", stroke:"paysFr", strokeWidth: width>600 ? 4 : 2, curve:"catmull-rom", strokeDasharray: [4,6] }), Plot.text([width>500 ? "15-19" : "15\n|\n19"], {x:1, y:-.5, lineAnchor:"top"}), Plot.text([width>500 ? "20-24" : "20\n|\n24"], {x:2, y:-.5, lineAnchor:"top"}), Plot.text([width>500 ? "25-29" : "25\n|\n29"], {x:3, y:-.5, lineAnchor:"top"}), Plot.text([width>500 ? "30-34" : "30\n|\n34"], {x:4, y:-.5, lineAnchor:"top"}), Plot.text([width>500 ? "35-39" : "35\n|\n39"], {x:5, y:-.5, lineAnchor:"top"}), Plot.text([width>500 ? "40-49" : "40\n|\n49"], {x:6, y:-.5, lineAnchor:"top"}), Plot.text([width>500 ? "50-54" : "50\n|\n54"], {x:7, y:-.5, lineAnchor:"top"}), Plot.ruleY([0], {strokeWidth:0.5}), Plot.ruleX([0.75], {strokeWidth:0.5}) ] })30:Tbd8,boxPlotGraph2 = htl.html `

${title2} ${plot2}

${viewof legendAl} ${viewof legendMa} ${viewof legendTu} ${cssLegend} ${viewof rWidth}

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

Lecture : En Algérie en 2014, pour 100 femmes de 20-24 ans, 8 enfants sont nés.

Note : Les valeurs entre parenthèses indiquent l’âge moyen à la maternité, calculé à partir des taux de fécondité par classe d’âges.

Champ : Femmes de 15-49 ans.

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

`31:[{"id":"1732f7fe493c9572a489e4e49879c8599d483f42bdbd28249a6bffbb231c2eb493c5a0f1a58155fca6382f708493131af8206d5a1f0ef6b344772acd1b2a1711","href":"https://static.observableusercontent.com/files/1732f7fe493c9572a489e4e49879c8599d483f42bdbd28249a6bffbb231c2eb493c5a0f1a58155fca6382f708493131af8206d5a1f0ef6b344772acd1b2a1711","name":"df2.csv","type":"text/csv","lastModified":1786635701660.765,"size":4224}] 2d:{"title":"n644 new G2","cells":[{"id":0,"value":"# n644 new G2","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":153,"value":"title2 = html`

Figure 2. Taux de fécondité par classe d’âges de la mère au Maghreb (2004-2024)

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"df2 = FileAttachment(\"df2.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"df2b = df2.map(d => ({\n ...d,\n paysShort: d.paysFr.split('-')[0]\n}));","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"domain2Tot = [...new Set(df2b.map(d=>(d.paysFr)))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"domain2Al = domain2Tot.slice(0,3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"domain2Ma = domain2Tot.slice(3,6)","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"domain2Tu = domain2Tot.slice(6,9)","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"range2 = [\"#1f764f\",\"#33c081\",\"#9de5c5\", \"#c80900\", pal100[0], \"#ff9a95\", \"#00288d\", pal100[3], \"#5a88ff\" ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"range2P = {\n\nconst range2Al = [\"#1f764f\",\"#33c081\",\"#9de5c5\"];\nconst range2Ma = [\"#c80900\", pal100[0], \"#ff9a95\"];\nconst range2Tu = [\"#00288d\", pal100[3], \"#5a88ff\"]\n\nreturn {range2Al,range2Ma,range2Tu}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"viewof legendAl = legend(domain2Al, range2P.range2Al , { lang: \"fr\", shape:\"line\", swatchWidth:55, selectAll:false, dashArray:[\"\", \"13,7\",\"4,4\"], fontSize: \"clamp(10px,2cqw,15px)\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"viewof legendMa = legend(domain2Ma, range2P.range2Ma , { lang: \"fr\", shape:\"line\", swatchWidth:55, selectAll:false, dashArray:[\"\", \"13,7\",\"4,4\"], fontSize: \"clamp(10px,2cqw,15px)\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"viewof legendTu = legend(domain2Tu, range2P.range2Tu , { lang: \"fr\", shape:\"line\", swatchWidth:55, selectAll:false, \n dashArray:[\"\", \"13,7\",\"4,4\"], fontSize: \"clamp(10px,2cqw,15px)\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"select = {\n \nconst al = df2b.filter(d=>legendAl.includes(d.paysFr) && d.paysShort==\"Algérie\");\nconst ma = df2b.filter(d=>legendMa.includes(d.paysFr) && d.paysShort==\"Maroc\");\nconst tu = df2b.filter(d=>legendTu.includes(d.paysFr) && d.paysShort==\"Tunisie\");\n\nconst filter2 = [... al, ...ma, ...tu]\n\nreturn {filter2}\n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"### plot","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"### Fonctions","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"import {legend, cssLegend} from \"@wsthevenin/mtinput\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"cssLegend","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"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"}],"files":"$W31","stdlib":"1","titling":"auto"}