28:null 29:["$","title",null,{"children":"Accroissement pop GRAPH (3720) | Marc Thevenin | Observable"}] 2e:Tb59,plotA = Plot.plot({ width: rWidth, width: rWidth, height: rWidth>900 ? 0.60*rWidth : rWidth>600 ? 0.7*rWidth : 350, marginTop: rWidth >900 ? 40 : 30, marginLeft: rWidth>900 ? 60 : rWidth>600 ? 50: 35, marginRight: rWidth>600 ? 30 : 20, marginBottom: width>900 ? 50 : rWidth> 600 ? 40 : 35, color: {legend: false, domain: ["Naissances", "Décès"], range: [pal100[0], pal100[3]]}, y: {label: "Nombre (milliers)", labelArrow: false, grid: true, domain: [501,900], ticks: 8, inset: 0}, x: {tickFormat: "d", label: "Année", labelArrow: false, domain: [1970, 2075], ticks: width>600 ? 10 : 5, grid:true,}, marks: [ Plot.frame({strokeWidth:.5}), // Naissances Plot.lineY(df, {filter: d=> d.stat === "naissances" && d.type==="Observations" , x: "année", y: "n", stroke: pal100[0], strokeWidth: width>600 ? 4 :2.5, curve: "catmull-rom"}), Plot.lineY(df, {filter: d=> d.stat === "naissances" && d.type==="Projections" , x: "année", y: "n", stroke: pal100[0], strokeDasharray: [2,7], strokeWidth: width>600 ? 4 :2.5, curve: "catmull-rom"}), // Décès Plot.lineY(df, {filter: d=> d.stat === "décès" && d.type==="Observations" , x: "année", y: "n", stroke: pal100[3], strokeWidth: width>600 ? 4 :2.5, curve: "catmull-rom" }), Plot.lineY(df, {filter: d=> d.stat === "décès" && d.type==="Projections" , x: "année", y: "n", stroke: pal100[3], strokeDasharray: [2,7], strokeWidth: width>600 ? 4 :2.5, curve: "catmull-rom" }), // Artefact pour Tip Plot.lineY(df, {x: "année", y: "n", z: "stattype", stroke: "transparent", channels: { annee: {value: "année", label: ""}, stat: {value: "stat", label: "Indicateur:"}, type: {value: "type", label: ""}, n: {value: "n", label: "Nombre:" } }, tip: {format: {annee: "d", type: true, stat: true, x:false, y: false, z: false, n: (d) => `${d} 000` }, stroke: "transparent"} }), Plot.ruleX([2024.1], {y1: 500, y2: 900, strokeWidth:.3, stroke: "black"}), Plot.text(["Fin du baby boom"], {x: d =>1978, y: d=>860, lineWidth:6, textAnchor:"start", className:"label"}), Plot.arrow([1],{x2: d=>1973, x1:d=>1977.5, y1: d=>870, y2: d=>870, bend: -20,strokeWidth:1}), Plot.text(["Canicule"], {x: d =>1999, y: d=>600, lineWidth:6, textAnchor:"end", className:"label"}), Plot.arrow([1],{x1: d=>1999.5, x2:d=>2003, y1: d=>600, y2: d=>568, bend: 20,strokeWidth:1}), Plot.text(["Covid"], {x: d =>2012, y: d=>680, lineWidth:6, textAnchor:"end", className:"label"}), Plot.arrow([1],{x1: d=>2012.5, x2:d=>2020, y1: d=>680, y2: d=>675, bend: 20, strokeWidth:1}), Plot.text(["2024"], {x:d=>2024.1, y: d=>914}), ] })2f:T96d,plotB= Plot.plot({ width: rWidth, height: rWidth>900 ? 0.60*rWidth : rWidth>600 ? 0.7*rWidth : 350, marginTop: rWidth >900 ? 40 : 30, marginLeft: rWidth>900 ? 60 : rWidth>600 ? 50: 35, marginRight: rWidth>600 ? 30 : 20, marginBottom: width>900 ? 50 : rWidth> 600 ? 40 : 35, y: {label: "Solde (en milliers)", labelArrow: false, grid: true, domain: [-400,400], ticks: 8, tickSize: width>500 ? 10 :5}, x: {tickFormat: "d", label: "Année", labelArrow: false, labelAnchor: "center", domain: [1970, 2075], ticks: width>600 ? 10 : 5, tickSize: width>500 ? 10 :5, grid:true,}, marks: [ Plot.frame({strokeWidth:.5}), Plot.lineY(dfSn, {filter: d=> d.type==="Observations" , x: "année", y: d=> d.naiss - d.deces, stroke: pal100[4], strokeWidth: width>600 ? 4 :2.5, curve: "catmull-rom"}), Plot.lineY(dfSn, {filter: d=> d.type==="Projections" , x: "année", y: d=> d.naiss - d.deces, stroke: pal100[4], strokeWidth: width>600 ? 4 :2.5, curve: "catmull-rom", strokeDasharray: [2,7]}), Plot.text(["Fin du baby boom"], {x: d =>1978, y: d=>320, lineWidth:6, textAnchor:"start", className:"label"}), Plot.arrow([1],{x2: d=>1973.50, x1:d=>1977.5, y1: d=>300, y2: d=>300, bend: -20,strokeWidth:1}), Plot.text(["Canicule"], {x: d =>1999, y: d=>140, lineWidth:6, textAnchor:"end", className:"label"}), Plot.arrow([1],{x1: d=>1999.5, x2:d=>2002.5, y1: d=>150, y2: d=>220, bend: 20, strokeWidth:1}), Plot.text(["Covid"], {x: d =>2012, y: d=>-68, lineWidth:6, textAnchor:"end", className:"label"}), Plot.arrow([1],{x1: d=>2012.5, x2:d=>2019.5, y1: d=>-50, y2: d=>60, bend: 20, strokeWidth:1}), Plot.ruleX([2024.1], {y1: -400, y2: 400, strokeWidth:.3, stroke: "black"}), Plot.ruleY([0], { strokeWidth:.3, stroke: "black"}), Plot.lineY(dfSn, { x: "année", y: d=> d.naiss - d.deces, stroke: "transparent", curve: "catmull-rom", channels: { annee: {value: "année", label:""}, type: {value: "type", label:""}, n: {value: d=> d.naiss -d.deces, label:"Solde:"} }, tip: {format: {x: false, y: false, annee: "d", type: true, n: d=> `${d} 000` }, strokeWidth:0} }), Plot.text(["2024"], {x:d=>2024.1, y: d=>417}), ] })30:Tef3,boxPlot = htl.html `

${viewof rWidth}

${viewof typeG}

${display}

Gilles Pison, Laurent Toulemon, Population & Sociétés, n° 631, mars 2025, Ined.

Source : Insee (observations) ; auteurs (projections).

`31:Tb1d,plotAEn = Plot.plot({ width: rWidth, height: rWidth>900 ? 0.60*rWidth : rWidth>600 ? 0.7*rWidth : 350, marginTop: rWidth >900 ? 40 : 30, marginLeft: rWidth>900 ? 60 : rWidth>600 ? 50: 35, marginRight: rWidth>600 ? 30 : 20, marginBottom: width>900 ? 50 : rWidth> 600 ? 40 : 35, y: {label: "Number (in thousands)", labelArrow: false, grid: true, domain: [501,900], ticks: 8, inset: 0}, x: {tickFormat: "d", label: "Year", labelArrow: false, labelAnchor:"center", domain: [1970, 2075], ticks: width>600 ? 10 : 5, grid:true,}, marks: [ Plot.frame(), // Naissances Plot.lineY(df, {filter: d=> d.statEn === "births" && d.type==="Observations" , x: "année", y: "n", stroke: pal100[0], strokeWidth: rWidth>600 ? 4 : 2.5, curve: "catmull-rom"}), Plot.lineY(df, {filter: d=> d.statEn === "births" && d.type==="Projections" , x: "année", y: "n", stroke: pal100[0], strokeDasharray: [2,7], strokeWidth: rWidth>600 ? 4 : 2.5 , curve: "catmull-rom"}), // Décès Plot.lineY(df, {filter: d=> d.statEn === "deaths" && d.type==="Observations" , x: "année", y: "n", stroke: pal100[3], strokeWidth: rWidth>600 ? 4 : 2.5, curve: "catmull-rom" }), Plot.lineY(df, {filter: d=> d.statEn === "deaths" && d.type==="Projections" , x: "année", y: "n", stroke: pal100[3], strokeDasharray: [2,7], strokeWidth: rWidth>600 ? 4 : 2.5, curve: "catmull-rom" }), // Artefact pour Tip Plot.lineY(df, {x: "année", y: "n", z: "stattype", stroke: "transparent", channels: { annee: {value: "année", label: ""}, stat: {value: "statEn", label: "Indicator:"}, type: {value: "type", label: ""}, n: {value: "n", label: "Number:" } }, tip: {format: {annee: "d", type: true, stat: true, x:false, y: false, z: false, n: (d) => `${d},000` }, strokeWidth: "transparent"} }), Plot.ruleX([2024.1], {y1: 500, y2: 900, strokeWidth:.3, stroke: "black"}), Plot.text(["End of baby boom"], {x: d =>1978, y: d=>860, lineWidth:6, textAnchor:"start", className:"label"}), Plot.arrow([1],{x2: d=>1973, x1:d=>1977.5, y1: d=>870, y2: d=>870, bend: -20, strokeWidth:1}), Plot.text(["Heat wave"], {x: d =>1999, y: d=>600, lineWidth:6, textAnchor:"end", className:"label"}), Plot.arrow([1],{x1: d=>1999.5, x2:d=>2003, y1: d=>600, y2: d=>568, bend: 20, strokeWidth:1}), Plot.text(["Covid"], {x: d =>2012, y: d=>680, lineWidth:6, textAnchor:"end", className:"label"}), Plot.arrow([1],{x1: d=>2012.5, x2:d=>2020, y1: d=>680, y2: d=>675, bend: 20, strokeWidth:1}), Plot.text(["2024"], {x:d=>2024.1, y: d=>914, className:"label"}), ] })32:T98f,plotBEn= Plot.plot({ width: rWidth, height: rWidth>900 ? 0.60*rWidth : rWidth>600 ? 0.7*rWidth : 350, marginTop: rWidth >900 ? 40 : 30, marginLeft: rWidth>900 ? 60 : rWidth>600 ? 50: 35, marginRight: rWidth>600 ? 30 : 20, marginBottom: width>900 ? 50 : rWidth> 600 ? 40 : 35, y: {label: "Balance (in thousands)", labelArrow: false, grid: true, domain: [-400,400], ticks: 8, tickSize: width>500 ? 10 :5}, x: {tickFormat: "d", label: "Year", labelArrow: false, labelAnchor: "center", domain: [1970, 2075], ticks: width>600 ? 10 : 5, tickSize: width>500 ? 10 :5, grid:true,}, marks: [ Plot.frame({strokeWidth:.5}), Plot.text(["2024"], {x:d=>2024.1, y: d=>417, className:"label"}), Plot.lineY(dfSn, {filter: d=> d.type==="Observations" , x: "année", y: d=> d.naiss - d.deces, stroke: pal100[4], strokeWidth: rWidth>600 ? 4 : 2.5, curve: "catmull-rom"}), Plot.lineY(dfSn, {filter: d=> d.type==="Projections" , x: "année", y: d=> d.naiss - d.deces, stroke: pal100[4], strokeWidth: rWidth>600 ? 4 : 2.5, curve: "catmull-rom", strokeDasharray: [2,7]}), Plot.text(["End of baby boom"], {x: d =>1978, y: d=>320, lineWidth:6, textAnchor:"start", className:"label"}), Plot.arrow([1],{x2: d=>1973.50, x1:d=>1977.5, y1: d=>300, y2: d=>300, bend: -20, strokeWidth:1}), Plot.text(["Heat wave"], {x: d =>1999, y: d=>140, lineWidth:6, textAnchor:"end", className:"label"}), Plot.arrow([1],{x1: d=>1999.5, x2:d=>2002.5, y1: d=>150, y2: d=>220, bend: 20, strokeWidth:1}), Plot.text(["Covid"], {x: d =>2012, y: d=>-68, lineWidth:6, textAnchor:"end", className:"label"}), Plot.arrow([1],{x1: d=>2012.5, x2:d=>2019.5, y1: d=>-50, y2: d=>60, bend: 20, strokeWidth:1}), Plot.ruleX([2024.1], {y1: -400, y2: 400, strokeWidth:.3, stroke: "black"}), Plot.ruleY([0], { strokeWidth:.3, stroke: "black"}), Plot.lineY(dfSn, { x: "année", y: d=> d.naiss - d.deces, stroke: "transparent", curve: "catmull-rom", channels: { annee: {value: "année", label:""}, type: {value: "type", label:""}, n: {value: d=> d.naiss -d.deces, label:"Balance:"} }, tip: {format: {x: false, y: false, annee: "d", type: true, n: d=> `${d},000` }, strokeWidth:0} }), ] })33:Tc83,boxPlotEn = htl.html `

${viewof rWidth}

${viewof typeGEn}

${displayEn}

Gilles Pison, Laurent Toulemon, Population & Societies, n° 631, March 2025, INED.

Source: INSEE (observations) ; authors (projections).

`34:T649,35:[] 2c:{"id":"07462839c9ee3c82","slug":null,"title":"Accroissement pop GRAPH (3720)","thumbnail":"a9181069d0128b8853ee2e8da52b4c7adfbc11b6df989029c42d85a550e0b548","access_level":"public","create_time":"$D2025-08-07T16:25:24.519Z","update_time":"$D2026-09-22T11:28:18.038Z","view_time":null,"first_public_time":"$D2025-08-07T17:01:03.985Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/6ae55bec6f9ba0bbe9597b60f19a08df8d2f5b06630eb6929919d0306a71b058","tier":"free_2026"},"version":555,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/ff86d75fca849a58a73d37988818fed6fa039e41541174c8654ac020ffc491f5","tier":null}],"members":[{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/ff86d75fca849a58a73d37988818fed6fa039e41541174c8654ac020ffc491f5","tier":null,"role":"editor"},{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/6ae55bec6f9ba0bbe9597b60f19a08df8d2f5b06630eb6929919d0306a71b058","tier":"free_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"23f0d565eea42491","slug":"accroissement-de-la-population","title":"Accroissement de la population","owner":{"id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin"}},"type":"notebook","body":{"titling":"auto","title":"Accroissement pop GRAPH (3720)","cells":[{"id":0,"value":"# Accroissement pop GRAPH (3720)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":355,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"currentTime = new Date()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"yearCaption = currentTime.getFullYear()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"pal100 = [\n \"#ff564e\", //rouge\n \"#ff7aad\", //rose\n \"#522673\", //mauve\n \"#0042eb\", //bleu\n \"#5cd49e\", //vert\n \"#ffb322\", //jaune\n \"#4f4f4f\", //gray\n \"#ff362d\", //red dark\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"df = d3.csv(\"https://raw.githubusercontent.com/mthevenin/tssp/refs/heads/main/Accroissement_population/graph.csv\", d3.autoType) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"dfN = df.filter(d=> d.stat===\"naissances\").map(d=> ({\n année: d.année,\n naiss: d.n, \n type: d.type,\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"dfD = df.filter(d=> d.stat===\"décès\").map(d=> ({\n année: d.année,\n deces: d.n,\n type: d.type\n})\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"dfSn = dfN.map((d, i) => ({\n ...d,\n ...dfD[i],\n\n}))\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"## FR","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"##### Naissances et décès en France de 1970 à 2024 et projections jusqu’en 2070 (scénario « 2024 »)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"title","database":"$undefined"},{"id":227,"value":"viewof typeG = Inputs.radio([\"Naissances et décès\", \"Solde naturel\"], {label: \"\", value: \"Naissances et décès\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"choixG = typeG===\"Naissances et décès\" ? plotA : plotB","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"display = typeG===\"Naissances et décès\" ? html`

${legendFr} ${cssLegend}

${plotA} ` : html` ${plotB} `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"legendFr = legend( [\"Naissances\", \"Décès\"],[pal100[0], pal100[3]], {shape:\"line\", swatchWidth:40, selectAll:false} )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"## EN","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"viewof typeGEn = Inputs.radio([\"Births and deaths\", \"Natural population change\"], {label: \"\", value: \"Births and deaths\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"choixGEn = typeGEn===\"Births and deaths\" ? plotAEn : plotBEn","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"displayEn = typeGEn===\"Births and deaths\" ? html`

${legendEn}

${cssLegend} ${plotAEn} ` : html` ${plotBEn} `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"legendEn = legend( [\"Births\", \"Deaths\"] ,[pal100[0], pal100[3]], {shape:\"line\", swatchWidth:40, selectAll:false} )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"cssGeneral","database":"$undefined"},{"id":437,"value":"import {legend, cssLegend} from \"@wsthevenin/mtinput\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"cssLegend","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 2d:"$2c:body"