2f:T818,plot1 = Plot.plot({ width: rWidth, height: width>1000 ? 0.6*rWidth : rWidth>500 ? 0.7*rWidth : 350 , marginLeft: rWidth>600 ? 50 : 30, marginBottom: rWidth> 600 ? 50 : 30, marginTop: 30, marginRight: rWidth>600 ? 90 : 50, x: {tickFormat: "d", tickSize: rWidth>600 ? 10 : 5, ticks: rWidth>600 ? [1900,1950,2000,2050,2100] : [1900,1950, 2000,2050,2100], domain: [1900,2100], label: "Année", labelArrow: false, labelAnchor:"center", grid: true}, y: {tickSize: width>6000 ? 10 : 5, ticks:10, domain: [0,150], label: "Millions d'habitants", labelArrow: false, grid: true}, marks: [ Plot.frame({strokeWidth:.5}), Plot.line(df1, {x:"annee",y:"n", z:"dataNum", stroke: "transparent", channels: { annee: {value:"annee", label:""}, data: {value: "dataFr", label:"Projection:"}, n: {value: "n", label:"" } }, tip: {format:{x:false,y:false,z:false,annee:"d",data:true, n: d=> `${d.toFixed(1).replace(".",",")} millions`}, strokeWidth:0}}), Plot.line(df1, {filter: d=>d.dataNum===1, x:"annee",y:"n", stroke: "#222330", strokeWidth: rWidth>600 ? 4 : 3,}), Plot.line(df1, {filter: d=>d.dataNum===2, x:"annee",y:"n", stroke: "#222330", strokeDasharray: [5,10], strokeWidth: rWidth>600 ? 4 : 3,}), Plot.line(df1, {filter: d=>d.dataNum===3, x:"annee",y:"n", stroke: pal100[3], strokeDasharray: [7,11], strokeWidth: rWidth>600 ? 4 : 3, }), Plot.line(df1, {filter: d=>d.dataNum===4, x:"annee",y:"n", stroke: pal100[0], strokeDasharray: [15,14], strokeWidth: rWidth>600 ? 4 : 3, }), Plot.text(["Scénario\nhaut"], {x:2102,y:135, lineAnchor:"middle", textAnchor: "start", className:"scenario"}), Plot.text(["Scénario\nbas"], {x:2102,y:60, lineAnchor:"middle", textAnchor: "start", className:"scenario"}), Plot.text(["Scénario\nmoyen"], {x:2102,y:95, lineAnchor:"middle", textAnchor: "start", className:"scenario"}), Plot.ruleX([2023.5]), ] })30:Tb80,boxPlotGraph1 = htl.html `

${title1} ${plot1} ${viewof rWidth}

G. Pison et C. Scornet, Population & Sociétés, 645, juin 2026, Ined.

Sources : Avant 1950 : recensements de la population ; à partir de 1950 : Nations unies [1].

`31:Tb9a,plot2 = Plot.plot({ width: rWidth, height: width>1000 ? 0.6*rWidth : rWidth>500 ? 0.7*rWidth : 350 , marginLeft: rWidth>600 ? 40 : 30, marginBottom: rWidth> 600 ? 50 : 30, marginTop: 30, marginRight: 10, x: {tickFormat: "d", tickSize: rWidth>600 ? 10 : 5, ticks: rWidth>600 ? [1950,1960,1970,1980,1990,2000,2010,2020] : [1950,1970,1990,2010], label: "Année", labelArrow: false, grid: true}, y: {tickSize: rWidth>600 ? 10 : 5, ticks: width>500 ? [20,25,30,35,40,45,50,55,60,65,70,75,80] : [20,30,40,50,60,70,80], domain:[15,85], label: "Âge", labelArrow: false, grid: true}, color: {legend:false, domain:domain2,range:range2}, marks: [ Plot.frame({strokeWidth:.5}), Plot.line(df2, {filter: d=> legend2.includes(d.paysFr), x:"annee",y: "n", stroke:"paysFr", sort: "paysFr", strokeWidth: d=> d.paysNum==4 && rWidth>600 ? 4 : d.paysNum==4 && rWidth<=600 ? 2.5 : d.paysNum!=4 && rWidth>600 ? 2 : 1.5, curve:"catmull-rom", channels: { pays: {value:"paysFlagFr", label:""}, annee: {value:"annee", label:""}, data: {value: "dataFr", label:""}, n: {value: "n", label:"" } }, tip: {format:{x:false,y:false,z:false,stroke:false,strokeWidth:false, pays: true, annee:"d",data:true, n: d=> `${d.toFixed(1).replace(".",",")} ans`}, strokeWidth:0} }), // guerre d'indochine Plot.text([legend2.includes("Viêt Nam") ? "Guerre d'indochine\n(1946-1954)" : ""], {x:1955, y: 75, textAnchor:"start", lineAnchor:"bottom"}), Plot.arrow([1], {x1: 1958, x2:1952, y1: 74, y2:51, bend:-10, stroke: legend2.includes("Viêt Nam") ? "#222330" : "transparent", strokeWidth: rWidth>500 ? 2 : 1, }), // guerre de corée Plot.text([legend2.includes("Corée du Sud") ? "Guerre de Corée\n(1950-1953)" : ""], {x:1957, y: 25, textAnchor:"start"}), Plot.arrow([1], {x1: 1956.5, x2:1952, y1: 25, y2:26, bend:30, stroke: legend2.includes("Corée du Sud") ? "#222330" : "transparent", strokeWidth: rWidth>500 ? 2 : 1 }), // grand bond Chine Plot.text([legend2.includes("Chine") ? "Grand bond\nen avant\nchinois (1958-1960)*" : ""], {x:1967, y: 35, textAnchor:"start"}), Plot.arrow([1], {x1: 1966.2, x2:1961, y1: 32.5, y2:33, bend:30, stroke: legend2.includes("Chine") ? "#222330" : "transparent", strokeWidth: rWidth>500 ? 2 : 1}) , // guerre vietnam Plot.text([legend2.includes("Viêt Nam") ? "Guerre du Viêt Nam\n(1955-1975)" : ""], {x:1982, y: 47, textAnchor:"start"}), Plot.arrow([1], {x1: 1981, x2:1972, y1: 46, y2:50.5, bend:30, stroke: legend2.includes("Viêt Nam") ? "#222330" : "transparent", strokeWidth: rWidth>500 ? 2 : 1}) , ] })32:Tdc5,boxPlotGraph2 = htl.html `

${title2} ${viewof legend2} ${cssLegend} ${viewof rWidth} ${plot2}

* Politique de collectivisation agricole et d’industrialisation rapide lancée par Mao Zedong pour accélérer la production et ayant entraîné une famine généralisée en Chine.

G. Pison et C. Scornet, Population & Sociétés, 645, juin 2026, Ined.

Source : Nations unies [1].

`33:T77a,plot3 = Plot.plot({ width: rWidth, height: width>1000 ? 0.6*rWidth : rWidth>500 ? 0.7*rWidth : 350 , marginLeft: rWidth>600 ? 30 : 20, marginBottom: rWidth> 600 ? 50 : 30, marginTop: 30, marginRight: 10, x: {tickFormat: "d", tickSize: rWidth>600 ? 10 : 5, ticks: rWidth>600 ? [1950,1960,1970,1980,1990,2000,2010,2020] : [1950,1970,1990,2010], label: "Année", labelArrow: false, grid: true}, y: {tickSize: rWidth>600 ? 10 : 5, ticks:10, domain: [0,8.5], label: "Nombre d'enfants", labelArrow: false, grid: true}, color: {legend:false, domain:domain3,range:range3}, marks: [ Plot.frame({strokeWidth:.5}), Plot.line(df3, {filter: d=> legend3.includes(d.paysFr), x:"annee",y: "n", stroke:"paysFr", sort: "paysFr", strokeWidth: d=> d.paysNum==4 && rWidth>600 ? 4 : d.paysNum==4 && rWidth<=600 ? 2.5 : d.paysNum!=4 && rWidth>600 ? 2 : 1.5, curve:"catmull-rom", channels: { pays: {value:"paysFlagFr", label:""}, annee: {value:"annee", label:""}, data: {value: "dataFr", label:""}, n: {value: "n", label:"" } }, tip: {format:{x:false,y:false,z:false,stroke:false,strokeWidth:false, pays: true, annee:"d",data:true, n: d=> `${d.toFixed(1).replace(".",",")} enfants`}, strokeWidth:0} }), // grand bond Chine Plot.text([legend3.includes("Chine") ? "Grand bond\nen avant\nchinois (1958-1960)**" : ""], {x:1964.5, y: 2.9, textAnchor:"middle", lineAnchor:"top"}), Plot.arrow([1], {x1: 1962.2, x2:1961, y1: 3, y2:3.75, bend:30, stroke: legend3.includes("Chine") ? "#222330" : "transparent", strokeWidth: rWidth>500 ? 1.5 : 1}) , Plot.ruleY([2], {strokeWidth:.5}), ] })34:Te93,boxPlotGraph3 = htl.html `

${title3} ${viewof legend3} ${cssLegend} ${plot3} ${viewof rWidth}

* Nombre moyen d'enfants par femme (indicateur conjoncturel de fécondité).

** Politique de collectivisation agricole et d’industrialisation rapide lancée par Mao Zedong pour accélérer la production et ayant entraîné une famine généralisée en Chine.

G. Pison et C. Scornet, Population & Sociétés, 645, juin 2026, Ined.

Source : Nations unies [1].

`35:T670,plot4 = Plot.plot({ width: rWidth, height: rWidth>1000 ? 0.6*rWidth : rWidth>500 ? 0.7*rWidth : 350 , marginLeft: rWidth>600 ? 60 : 40, marginBottom: rWidth> 600 ? 50 : 30, marginTop: 30, marginRight: 10, x: {tickFormat: "d", tickSize: rWidth>600 ? 10 : 5, ticks: rWidth>600 ? [1950,1960,1970,1980,1990,2000,2010,2020] : [1950,1970,1990,2010], label: "Année", labelArrow: false, grid: true}, y: {tickSize: rWidth>600 ? 10 : 5, ticks: rWidth>500 ? [103,105,107,109,111,113,115,117,119] : [103,107,111,115,119], domain: [102.5,119.5], label: "Garçons pour 100 filles", labelArrow: false, grid: true}, color: {legend:false, domain:domain4,range:range4}, marks: [ Plot.frame({strokeWidth:.5}), Plot.line(df4, {filter: d=> legend4.includes(d.paysFr), x:"annee",y: "n", stroke:"paysFr", sort: "paysFr", strokeWidth: d=> d.paysNum==4 && width>600 ? 4 : d.paysNum==4 && width<=600 ? 2.5 : d.paysNum!=4 && width>600 ? 2 : 1.5, curve:"catmull-rom", channels: { pays: {value:"paysFlagFr", label:""}, annee: {value:"annee", label:""}, data: {value: "dataFr", label:""}, n: {value: "n", label:"" } }, tip: {format:{x:false,y:false,z:false,stroke:false,strokeWidth:false, pays: true, annee:"d",data:true, n: d=> `${d.toFixed(1).replace(".",",")} pour 100 filles`}, strokeWidth:0} }), ] })36:Td3a,boxPlotGraph4 = htl.html `

${title4} ${viewof legend4} ${cssLegend} ${plot4} ${viewof rWidth}

G. Pison et C. Scornet, Population & Sociétés, 645, juin 2026, Ined.

Source : Nations unies [1].

`37:Tcf1, 38:T937,filterLegendLong = ( domain, range, subdomain = null ) => { const defaultChecked = subdomain === null ? domain : subdomain; const value = new Map( domain.map(d => [d, defaultChecked.includes(d)]) ); const _set = () => set( node, [...value].filter(d => d[1]).map(d => d[0]) ); const oninput = e => { value.set(e.target.id, e.target.checked); _set(); }; const selectAll = () => { domain.forEach(d => value.set(d, true)); node.querySelectorAll("input[type=checkbox]") .forEach(cb => cb.checked = true); _set(); }; const selectNone = () => { domain.forEach(d => value.set(d, false)); node.querySelectorAll("input[type=checkbox]") .forEach(cb => cb.checked = false); _set(); }; const node = htl.html`

${domain.map((d, i) => htl.html`

${d}

`)}

`; _set(); return node; }; 39:[{"id":"5342d667908ee787d74edd89a9e1239f3db83da60063944656adc1a3742eff970a0bf1689b7a04cd751f7a3d735a7e624a815cc3af944aab9f4abcbcf73ab2f1","href":"https://static.observableusercontent.com/files/5342d667908ee787d74edd89a9e1239f3db83da60063944656adc1a3742eff970a0bf1689b7a04cd751f7a3d735a7e624a815cc3af944aab9f4abcbcf73ab2f1","name":"n645_2@3.csv","type":"text/csv","lastModified":1779950911734.848,"size":24334},{"id":"33e01dc5ba816c090691cbf3b6ed226216807fe56beca2fe94c12fadc734593a92608c62ce70d89d510b046341a38ff0d22560a6f1b951578302a9e1773fdb31","href":"https://static.observableusercontent.com/files/33e01dc5ba816c090691cbf3b6ed226216807fe56beca2fe94c12fadc734593a92608c62ce70d89d510b046341a38ff0d22560a6f1b951578302a9e1773fdb31","name":"n645_3.csv","type":"text/csv","lastModified":1779952977759.336,"size":23416},{"id":"d867bd638c6004b46b8141fb56914f552b3dea0338889d9c1cec3890e63cc7a42caedc5a61a1ee72527643d80251c4fecf632487312639bf736ee235a3f95748","href":"https://static.observableusercontent.com/files/d867bd638c6004b46b8141fb56914f552b3dea0338889d9c1cec3890e63cc7a42caedc5a61a1ee72527643d80251c4fecf632487312639bf736ee235a3f95748","name":"n645_4.csv","type":"text/csv","lastModified":1779957426417.644,"size":23416},{"id":"7a9167b3747d6524dfde4001a73f3e622980c0e9cf4ea9e5d3ec75372d41cfb6298ac866bdf558acb081dd3bc41cc539919bfc868905792687d1d8194df3e9fa","href":"https://static.observableusercontent.com/files/7a9167b3747d6524dfde4001a73f3e622980c0e9cf4ea9e5d3ec75372d41cfb6298ac866bdf558acb081dd3bc41cc539919bfc868905792687d1d8194df3e9fa","name":"n645_1@1.csv","type":"text/csv","lastModified":1781589452852.379,"size":12404}] 2d:{"title":"Population & sociétés: n645 G1-G4 FR","cells":[{"id":0,"value":"# Population & sociétés: n645 G1-G4 FR","pinned":false,"hidden":false,"mode":"md"},{"id":528,"value":"* Lien sur l'article sur le site de l'ined : ","pinned":false,"hidden":false,"mode":"md"},{"id":52,"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":5,"value":"## Graphique 1","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"df1 = FileAttachment(\"n645_1@1.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"title1 = html`

Figure 1. Évolution de la population du Viêt Nam depuis 1900 et projections jusqu'en 2100

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"## Graphique 2","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"df2 = FileAttachment(\"n645_2@3.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"title2 = html`

Figure 2. Évolution de l'espérance de vie à la naissance au Viêt Nam, en Corée du Sud, en Chine et en Thaïlande (1950-2019)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"domain2 = [...new Set(df2.map(d=>(d.paysFr)))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"range2 = [\"#222330\",pal100[4],pal100[0],pal100[3]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"viewof legend2 = legend(domain2, range2, {\n //subdomain: [\"Naissances\", \"Décès\"], // les autres démarrent masquées\n selectAll: true,\n shape: \"line\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"## Graphique 3","pinned":false,"hidden":false,"mode":"md"},{"id":253,"value":"df3 = FileAttachment(\"n645_3.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"title3 = html`

Figure 3. Évolution de la fécondité* au Viêt Nam, en Corée du Sud, en Chine et en Thaïlande (1950-2023)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"domain3 = [...new Set(df3.map(d=>(d.paysFr)))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"range3 = [\"#222330\",pal100[4],pal100[0],pal100[3]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"viewof legend3 = legend(domain2, range2, {\n //subdomain: [\"\", \"\"], // les autres démarrent masquées\n selectAll: true,\n shape: \"line\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"## Graphique 4","pinned":false,"hidden":false,"mode":"md"},{"id":294,"value":"df4 = FileAttachment(\"n645_4.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"title4 = html`

Figure 4. Évolution du rapport de masculinité à la naissance au Viêt Nam, en Corée du Sud, en Chine et en Thaïlande depuis 1950

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"domain4 = [...new Set(df4.map(d=>(d.paysFr)))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"range4 = [\"#222330\",pal100[4],pal100[0],pal100[3]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"//viewof legend4 = filterLegendLong(domain4,range4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"viewof legend4 = legend(domain2, range2, {\n //subdomain: [\"\", \"\"], // les autres démarrent masquées\n selectAll: true,\n shape: \"line\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":314,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"## Fonctions et css","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"$37","pinned":false,"hidden":false,"mode":"html"},{"id":39,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"### Nouvelle légende","pinned":false,"hidden":false,"mode":"md"},{"id":602,"value":"import {legend, cssLegend, toggle, cssToggle} from \"@wsthevenin/mtinput\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":542,"value":"cssLegend","pinned":true,"hidden":false,"mode":"ojs"},{"id":623,"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":"$W39","stdlib":"1","titling":"auto"}