28:null 29:["$","title",null,{"children":"Graph EN (4556) | Marc Thevenin | Observable"}] 2e:Tb4f,plot = Plot.plot({ width, height: width>1000 ? 0.65*width : width>500 ? 0.7*width : 350, marginBottom: width>1000 ? 150 : width> 700 ? 100 : width>500 ? 90 : 70, marginLeft: width> 500 ? 70 : 30, marginRight: width> 700 ? 40 : 20, marginTop: width> 700 ? 40 : 30, y: {domain: [0,50], grid: true, label: "%", labelArrow: false, ticks: width>500 ? 10 : 5, tickSize: width>500 ? 10 : 5}, x: {label:"Birth cohort", labelAnchor:"center", labelArrow:false, domain: [1,23], ticks: [1,4,8,12,16,20,23], tickSize: width>550 ? 10 : 5}, color: {legend: false, domain: domain, range: range}, marks: [ Plot.rect(df, {x1:1,x2:8, y1:0,y2:50, fill: "#f1f1f1", fillOpacity:.11}), Plot.rect(df, {x1:8,x2:12, y1:0,y2:50, fill: "#f1f1f1", fillOpacity:0}), Plot.rect(df, {x1:12,x2:16, y1:0,y2:50, fill: "#f1f1f1", fillOpacity:.11}), Plot.rect(df, {x1:16,x2:20, y1:0,y2:50, fill: "#f1f1f1", fillOpacity:0}), Plot.rect(df, {x1:20,x2:23, y1:0,y2:50, fill: "#f1f1f1", fillOpacity:.11}), Plot.line(df, { x: "gen", y:"n", z: "enfEn", stroke:"#efefef"}), Plot.line(df, {filter: d=> legend.includes(d.enfEn), x: "gen", y:"n", stroke:"enfEn", strokeWidth: width>800 ? 7 : width>500 ? 5 : 1.8, channels: { gen : {value: "genEn", label: "Birth cohort:" }, enf : {value: "enfEn", label: "" }, n : {value: "n", label: "" }, }, tip: {format: {x:false, y:false, stroke: false, z: false, gen: true, enf: true, n: d=> `${d.toFixed(1)}%`}, strokeWidth:0} }), //Plot.ruleY([1]), Plot.ruleX([0]), Plot.frame(), Plot.text([width>600 ? "End of demographic\ntransition" : "①"], {x:4.5, y:47.5, className:"period"}), Plot.text([width> 600 ? "Interwar\nperiod" : "②"], {x:10, y:47.5, className:"period"}), Plot.text([width>600 ? "Beginning of\nbaby-boom" : "③"], {x:14, y:47.5, className:"period"}), Plot.text([width>600 ? "2nd part of\nbaby-boom" : "④"], {x:18, y:47.5, className:"period"}), Plot.text([width> 600 ? "Post\nbaby-boom" : "⑤"], {x:21.5, y:47.5, className:"period"}), //générations //Plot.text(["<\nà\n1857"], {x:1, y: width>1000 ? -3.2 : -6, className: "gen", lineAnchor:"bottom"}), Plot.text(["<\nto\n1857"], {x:1, y: yGen, className: "gen", lineAnchor:"top"}), Plot.text(["1872\n|\n1876"], {x:4, y: yGen, className: "gen", lineAnchor:"top"}), Plot.text(["1887\n|\n1891"], {x:8, y: yGen, className: "gen", lineAnchor:"top"}), Plot.text(["1907\n|\n1911"], {x:12, y: yGen, className: "gen", lineAnchor:"top"}), Plot.text(["1927\n|\n1931"], {x:16, y: yGen, className: "gen", lineAnchor:"top"}), Plot.text(["1947\n|\n1951"], {x:20, y: yGen, className: "gen", lineAnchor:"top"}), Plot.text(["1962\n|\n1966"], {x:23, y: yGen, className: "gen", lineAnchor:"top"}), ] })2f:T1112,boxPlotGraph = htl.html `

${viewof legend} ${viewof graph}

${choixG} ${periodes}

Adapted from Figure 5 in S. Brée, 2017, Changes in Family Size over the Generations in France (1850-1966), Population, n°2, vol. 72.

* To give an idea of the childbearing years, the average age at childbirth (28 years) has been added to the birth cohorts. For example, the cohorts born between 1891 and 1911 had their children during the interwar period.

Source : INSEE, Population Census, 1931, 1946; INSEE, Family Surveys, 1954, 1975, 1982, 1990, 1999, 2011.

`30:Tb4f,plotB = Plot.plot({ width, height: width>1000 ? 0.65*width : width>500 ? 0.7*width : 350, marginBottom: width>1000 ? 150 : width> 700 ? 100 : width>500 ? 90 : 70, marginLeft: width> 500 ? 70 : 30, marginRight: width> 700 ? 40 : 20, marginTop: width> 700 ? 70 : 50, y: {domain: [0,100], grid: true, label: "%", labelArrow: false, ticks: width>500 ? 10 : 5, tickSize: width>500 ? 10 : 5}, x: {label:"Birth cohort", labelAnchor:"center", labelArrow:false, domain: [1,23], ticks: [1,4,8,12,16,20,23], tickSize: width>550 ? 10 : 5}, color: {legend: false, domain: domain, range: range}, marks: [ Plot.rect(df, {x1:1,x2:8, y1:0,y2:100, fill: "#f1f1f1", fillOpacity:.11}), Plot.rect(df, {x1:8,x2:12, y1:0,y2:100, fill: "#f1f1f1", fillOpacity:0}), Plot.rect(df, {x1:12,x2:16, y1:0,y2:100, fill: "#f1f1f1", fillOpacity:.11}), Plot.rect(df, {x1:16,x2:20, y1:0,y2:100, fill: "#f1f1f1", fillOpacity:0}), Plot.rect(df, {x1:20,x2:23, y1:0,y2:100, fill: "#f1f1f1", fillOpacity:.11}), Plot.areaY(df, {filter: d=> legend.includes(d.enfEn), x: "gen", y:"n", fill:"enfEn", stroke: "white", channels: { gen : {value: "genEn", label: "Génération:" }, enf : {value: "enfEn", label: "" }, n : {value: "n", label: "" }, }, tip: {format: {x:false, y:false, fill: false, z: false, gen: true, enf: true, n: d=> `${d.toFixed(1)}%`}, strokeWidth:0} }), Plot.frame(), Plot.ruleX([8],{strokeWidth:0.5}), Plot.ruleX([12],{strokeWidth:0.5}), Plot.ruleX([16],{strokeWidth:0.5}), Plot.ruleX([20],{strokeWidth:0.5}), Plot.text([width>600 ? "End of demographic\ntransition" : "①"], {x:4.5, y:102, lineAnchor: "bottom", className:"period"}), Plot.text([width> 600 ? "Interwar\nperiod" : "②"], {x:10, y:102, lineAnchor: "bottom", className:"period"}), Plot.text([width>600 ? "Beginning of\nbaby-boom" : "③"], {x:14, y:102, lineAnchor: "bottom", className:"period"}), Plot.text([width>600 ? "2nd part of\nbaby-boom" : "④"], {x:18, y:102, lineAnchor: "bottom", className:"period"}), Plot.text([width> 600 ? "Post\nbaby-boom" : "⑤"], {x:21.5, y:102, lineAnchor: "bottom", className:"period"}), Plot.text(["<\nto\n1857"], {x:1, y: yGen, className: "gen", lineAnchor:"top"}), Plot.text(["1872\n|\n1876"], {x:4, y: yGen, className: "gen", lineAnchor:"top"}), Plot.text(["1887\n|\n1891"], {x:8, y: yGen, className: "gen", lineAnchor:"top"}), Plot.text(["1907\n|\n1911"], {x:12, y: yGen, className: "gen", lineAnchor:"top"}), Plot.text(["1927\n|\n1931"], {x:16, y: yGen, className: "gen", lineAnchor:"top"}), Plot.text(["1947\n|\n1951"], {x:20, y: yGen, className: "gen", lineAnchor:"top"}), Plot.text(["1962\n|\n1966"], {x:23, y: yGen, className: "gen", lineAnchor:"top"}), ] })31:T6c4,filterLegend = ( 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; }; 32:Taa9, 33:[] 2c:{"id":"8b202cb59aacb34a","slug":null,"title":"Graph EN (4556)","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-05-11T05:31:18.670Z","update_time":"$D2026-05-11T06:56:18.446Z","view_time":null,"first_public_time":"$D2026-05-11T05:31:18.670Z","has_unpublished_edits":null,"fork":{"id":"195078ea12388f9e","slug":null,"title":"Graph FR (4556)","owner":{"id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin"}},"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":472,"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":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/6ae55bec6f9ba0bbe9597b60f19a08df8d2f5b06630eb6929919d0306a71b058","tier":"free_2026","role":"editor"},{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/ff86d75fca849a58a73d37988818fed6fa039e41541174c8654ac020ffc491f5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"f081dfe73493bfc6","slug":"rangs-des-naissances","title":"Rangs des naissances","owner":{"id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin"}},"type":"notebook","body":{"titling":"auto","title":"Graph EN (4556)","cells":[{"id":0,"value":"# Graph EN (4556)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"currentTime = new Date()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"yearCaption = currentTime.getFullYear()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"df = d3.csv(\"https://raw.githubusercontent.com/mthevenin/tssp/refs/heads/main/Fecondite_naissance/Taille_fratries/graph2.csv\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"domain = [...new Set(df.map(d=>(d.enfEn)))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"range = [\n \"#c8d7ff\", //bleu 1\n \"#91b0ff\", // bleu 2 \n \"#5a88ff\", // bleu 3\n \"#0042eb\", //bleu 4\n \"#00288d\", //bleu 5\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"viewof legend = filterLegend(domain,range)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"periodes = htl.html`\n\n

① Fin de la transition démographique
② Entre-deux-guerre
③ Début du baby-boom
④ 2e partie du baby-boom
⑤ Post baby-boom

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"yGen = width>1000 ? -1.2 : -2.3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"viewof graph = Inputs.radio([\"Lines\", \"Stacked areas\"], {value: \"Lines\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"choixG = graph===\"Lines\" ? plot : plotB","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"## CSS & FONCTIONS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"cssInput","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 2d:"$2c:body"