2f:T812,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>1000 ? 20 : rWidth>500 ? 10 : 5, ticks: rWidth>600 ? [1900,1950,2000,2050,2100] : [1900,1950, 2000,2050,2100], domain: [1900,2100], label: "Year", labelArrow: false, labelAnchor:"center", grid: true}, y: {tickSize: rWidth>1000 ? 15 : 5, ticks:10, domain: [0,150], label: "Inhabitants (millions)", 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: "dataEn", label:""}, n: {value: "n", label:"" } }, tip: {format:{x:false,y:false,z:false,annee:"d",data:true, n: d=> `${d.toFixed(1)} 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(["High\nscenario"], {x:2102,y:135, lineAnchor:"middle", textAnchor: "start", className:"scenario"}), Plot.text(["Low\nscenario"], {x:2102,y:60, lineAnchor:"middle", textAnchor: "start", className:"scenario"}), Plot.text(["Medium\nscenario"], {x:2102,y:95, lineAnchor:"middle", textAnchor: "start", className:"scenario"}), Plot.ruleX([2023.5]), ] })30:Tb6b,boxPlotGraph1 = htl.html `

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

G. Pison, C. Scornet, Population & Societies, 645, June 2026, INED.

Sources: Prior to 1950, population censuses; from 1950, United Nations [1].

`31:Tbc9,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>1000 ? 20 : rWidth>500 ? 10 : 5, ticks: width>600 ? [1950,1960,1970,1980,1990,2000,2010,2020] : [1950,1970,1990,2010], label: "Year", labelArrow: false, grid: true}, y: {tickSize: rWidth>1000 ? 10 : 5, ticks: rWidth>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: "Age", labelArrow: false, grid: true}, color: {legend:false, domain:domain2,range:range2}, marks: [ Plot.frame({strokeWidth:.5}), Plot.line(df2, {filter: d=> legend2.includes(d.paysEn), x:"annee",y: "n", stroke:"paysEn", sort: "paysEn", strokeWidth: d=> d.paysNum==4 && rWidth>1000 ? 7 : d.paysNum==4 && rWidth>500 ? 5 : d.paysNum==4 && rWidth<=500 ? 3 : d.paysNum!=4 && rWidth>1000 ? 4 : d.paysNum!=4 && rWidth>500 ? 2 : 1, curve:"catmull-rom", channels: { pays: {value:"paysFlagEn", label:""}, annee: {value:"annee", label:""}, n: {value: "n", label:"Age:" } }, tip: {format:{x:false,y:false,z:false,stroke:false,strokeWidth:false, pays: true, annee:"d", n: d=> `${d.toFixed(1)}`}, strokeWidth:0} }), // guerre d'indochine Plot.text([legend2.includes("Vietnam") ? "First indochina\nwar (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("Vietnam") ? "#222330" : "transparent", strokeWidth: rWidth>500 ? 2 : 1, }), // guerre de corée Plot.text([legend2.includes("South Korea") ? "Korean war\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("South Korea") ? "#222330" : "transparent", strokeWidth: rWidth>500 ? 2 : 1 }), // grand bond Chine Plot.text([legend2.includes("China") ? "China's Great Leap\nForward (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("China") ? "#222330" : "transparent", strokeWidth: rWidth>500 ? 2 : 1}) , // guerre vietnam Plot.text([legend2.includes("Vietnam") ? "Vietnam war\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("Vietnam") ? "#222330" : "transparent", strokeWidth: rWidth>500 ? 2 : 1}) , ] })32:Td89,boxPlotGraph2 = htl.html `

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

* Collective farming and rapid industrialization policy led by Mao Zedong to accelerate production, leading to widespread famine in China.

G. Pison, C. Scornet, Population & Societies, 645, June 2026, INED.

Source: United Nations [1].

`33:T74e,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>1000 ? 20 : rWidth>500 ?10 : 5, ticks: rWidth>600 ? [1950,1960,1970,1980,1990,2000,2010,2020] : [1950,1970,1990,2010], label: "Year", labelArrow: false, grid: true}, y: {tickSize: rWidth>1000 ? 10 : 5, ticks:10, domain: [0,8.5], label: "Number of children", labelArrow: false, grid: true}, color: {legend:false, domain:domain3,range:range3}, marks: [ Plot.frame({strokeWidth:.5}), Plot.line(df3, {filter: d=> legend3.includes(d.paysEn), x:"annee",y: "n", stroke:"paysEn", sort: "paysEn", 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:"paysFlagEn", label:""}, annee: {value:"annee", 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(".",",")} child(ren)`}, strokeWidth:0} }), // grand bond Chine Plot.text([legend3.includes("China") ? "China's Great Leap\nForward (1958-1960)**" : ""], {x:1962.5, y: 2.9, textAnchor:"middle", lineAnchor:"top"}), Plot.arrow([1], {x1: 1960.2, x2:1961, y1: 3, y2:3.75, bend:30, stroke: legend3.includes("China") ? "#222330" : "transparent", strokeWidth: rWidth>500 ? 2 : 1}) , Plot.ruleY([2], {strokeWidth:.5}), ] })34:Te47,boxPlotGraph3 = htl.html `

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

* Average number of children per woman (total fertility rate).

** Collective farming and rapid industrialization policy led by Mao Zedong to accelerate production, leading to widespread famine in China.

G. Pison, C. Scornet, Population & Societies, 645, June 2026, INED.

Source: United Nations [1].

`35:T656,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: rWidth>600 ? 60 : 40, marginRight: 10, x: {tickFormat: "d", tickSize: rWidth>1000 ? 20 : rWidth>500 ? 10 : 5, ticks: rWidth>600 ? [1950,1960,1970,1980,1990,2000,2010,2020] : [1950,1970,1990,2010], label: "Year", labelArrow: false, grid: true}, y: {tickSize: width>1000 ? 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: "Number of boys per 100 girls\nat birth", labelArrow: false, grid: true}, color: {legend:false, domain:domain4,range:range4}, marks: [ Plot.frame({strokeWidth:.5}), Plot.line(df4, {filter: d=> legend4.includes(d.paysEn), x:"annee",y: "n", stroke:"paysEn", 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:"paysFlagEn", label:""}, annee: {value:"annee", 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(".",",")} per 100 girls`}, strokeWidth:0} }), ] })36:Td20,boxPlotGraph4 = htl.html `

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

G. Pison, C. Scornet, Population & Societies, 645, June 2026, INED.

Source: United Nations [1].

`37:Tcf1, 38:[{"id":"7a9167b3747d6524dfde4001a73f3e622980c0e9cf4ea9e5d3ec75372d41cfb6298ac866bdf558acb081dd3bc41cc539919bfc868905792687d1d8194df3e9fa","href":"https://static.observableusercontent.com/files/7a9167b3747d6524dfde4001a73f3e622980c0e9cf4ea9e5d3ec75372d41cfb6298ac866bdf558acb081dd3bc41cc539919bfc868905792687d1d8194df3e9fa","name":"n645_1@1.csv","type":"text/csv","lastModified":1781676079340.589,"size":12404},{"id":"5342d667908ee787d74edd89a9e1239f3db83da60063944656adc1a3742eff970a0bf1689b7a04cd751f7a3d735a7e624a815cc3af944aab9f4abcbcf73ab2f1","href":"https://static.observableusercontent.com/files/5342d667908ee787d74edd89a9e1239f3db83da60063944656adc1a3742eff970a0bf1689b7a04cd751f7a3d735a7e624a815cc3af944aab9f4abcbcf73ab2f1","name":"n645_2@3.csv","type":"text/csv","lastModified":1781676079340.589,"size":24334},{"id":"33e01dc5ba816c090691cbf3b6ed226216807fe56beca2fe94c12fadc734593a92608c62ce70d89d510b046341a38ff0d22560a6f1b951578302a9e1773fdb31","href":"https://static.observableusercontent.com/files/33e01dc5ba816c090691cbf3b6ed226216807fe56beca2fe94c12fadc734593a92608c62ce70d89d510b046341a38ff0d22560a6f1b951578302a9e1773fdb31","name":"n645_3.csv","type":"text/csv","lastModified":1781676079340.589,"size":23416},{"id":"d867bd638c6004b46b8141fb56914f552b3dea0338889d9c1cec3890e63cc7a42caedc5a61a1ee72527643d80251c4fecf632487312639bf736ee235a3f95748","href":"https://static.observableusercontent.com/files/d867bd638c6004b46b8141fb56914f552b3dea0338889d9c1cec3890e63cc7a42caedc5a61a1ee72527643d80251c4fecf632487312639bf736ee235a3f95748","name":"n645_4.csv","type":"text/csv","lastModified":1781676079340.589,"size":23416},{"id":"eb5d7557f160cbd62895f9a9a2b8e5e71f11feb182612c8f005baab34ad40a331ebab4623ec48c7fb4ff8da2800dc06e087df11e516653e07d3908ae679dc9b6","href":"https://static.observableusercontent.com/files/eb5d7557f160cbd62895f9a9a2b8e5e71f11feb182612c8f005baab34ad40a331ebab4623ec48c7fb4ff8da2800dc06e087df11e516653e07d3908ae679dc9b6","name":"n645_1.csv","type":"text/csv","lastModified":1781676696143.928,"size":14637}] 2d:{"title":"Population & societies: n645 G1-G4 EN","cells":[{"id":0,"value":"# Population & societies: n645 G1-G4 EN","pinned":false,"hidden":false,"mode":"md"},{"id":566,"value":"* Link to the article on the INED website : ","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.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"title1 = html`

Figure 1. Population of Vietnam since 1900 and projections up to 2100

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"$30","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"title2 = html`

Figure 2. Male-to-female birth ratio in Vietnam,South Korea, and China since 1950

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"domain2 = [...new Set(df2.map(d=>(d.paysEn)))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"range2 = [\"#222330\",pal100[4],pal100[0],pal100[3]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":592,"value":"viewof legend2 = legend(domain2, range2, { lang: \"en\", shape:\"line\", selectAll: true })","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"title3 = html`

Figure 3. Fertility* in Vietnam, South Korea, China, and Thailand (1950–2023)

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"domain3 = [...new Set(df3.map(d=>(d.paysEn)))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"range3 = [\"#222330\",pal100[4],pal100[0],pal100[3]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"viewof legend3 = legend(domain3, range3, { lang: \"en\", shape:\"line\", selectAll: true })","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":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"title4 = html`

Figure 4. Male-to-female birth ratio in Vietnam, South Korea, and China since 1950

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"domain4 = [...new Set(df4.map(d=>(d.paysEn)))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"range4 = [\"#222330\",pal100[4],pal100[0],pal100[3]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":605,"value":"viewof legend4= legend(domain4, range4, { lang: \"en\", shape:\"line\", selectAll: true })","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":571,"value":"import {legend, cssLegend, toggle, cssToggle} from \"@wsthevenin/mtinput\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":589,"value":"cssLegend ","pinned":true,"hidden":false,"mode":"ojs"},{"id":637,"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":"$W38","stdlib":"1","titling":"auto"}