28:null 29:["$","title",null,{"children":"Graph FR (4556) | Marc Thevenin | Observable"}] 2e:Taec,plot = Plot.plot({ width: rWidth, height: rWidth>900 ? 0.60*rWidth : rWidth>600 ? 0.7*rWidth : 350, marginTop: rWidth>600 ? 40 : 30, marginLeft: rWidth>900 ? 50 : rWidth>600 ? 40: 30, marginRight: rWidth>600 ? 30 : 20, marginBottom: rWidth>900 ? 100 : rWidth> 600 ? 80 : 60, y: {domain: [0,50], grid: true, label: "%", labelArrow: false, ticks: width>500 ? 10 : 5, tickSize: width>500 ? 10 : 5}, x: {label:"Génération de naissance", labelAnchor:"center", labelArrow:false, domain: [1,23], ticks: [1,4,8,12,16,20,23], tickSize: rWidth>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: "enfFr", stroke:"#efefef"}), Plot.line(df, {filter: d=> Legend.includes(d.enfFr), x: "gen", y:"n", stroke:"enfFr", strokeWidth: width>800 ? 7 : width>500 ? 5 : 1.8, channels: { gen : {value: "genFr", label: "Génération:" }, enf : {value: "enfFr", label: "" }, n : {value: "n", label: "" }, }, tip: {format: {x:false, y:false, stroke: false, z: false, gen: true, enf: true, n: d=> `${d.toFixed(1).replace(".",",")}%`}, strokeWidth:0} }), Plot.frame(), Plot.text([rWidth>600 ? "Fin de la transition\ndémographique" : "①"], {x:4.5, y:47.5, className:"period"}), Plot.text([rWidth> 600 ? "Entre-\ndeux-guerre" : "②"], {x:10, y:47.5, className:"period"}), Plot.text([rWidth>600 ? "Début\nbaby-boom" : "③"], {x:14, y:47.5, className:"period"}), Plot.text([rWidth>600 ? "2e partie\nbaby-boom" : "④"], {x:18, y:47.5, className:"period"}), Plot.text([rWidth> 600 ? "Post\nbaby-boom" : "⑤"], {x:21.5, y:47.5, className:"period"}), //générations Plot.text(["<\nà\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:Tc72,boxPlotGraph = htl.html `

${viewof rWidth}

${viewof Legend} ${cssLegend} ${viewof graph}

${choixG} ${periodes}

Inspiré de la figure 5 de S.Brée, 2017, Évolution de la taille des familles au fil des générations en France (1850-1966), Population, n°2, vol. 72.

* Afin de donner une idée de la période de fécondité, l’âge moyen à la naissance (28 ans) a été ajouté aux générations de naissance. Par exemple les générations nées entre 1891 et 1911 ont eu leurs enfants pendant l’entre-deux-guerres.

Source : Insee, Recensement de la population, 1931, 1946 ; Insee, enquêtes Famille, 1954, 1975, 1982, 1990, 1999, 2011.

`30:Tb7b,plotB = Plot.plot({ width: rWidth, height: rWidth>900 ? 0.60*rWidth : rWidth>600 ? 0.7*rWidth : 350, marginTop: rWidth>600 ? 40 : 30, marginLeft: rWidth>900 ? 50 : rWidth>600 ? 40: 30, marginRight: rWidth>600 ? 30 : 20, marginBottom: rWidth>900 ? 100 : rWidth> 600 ? 80 : 60, y: {domain: [0,100], grid: true, label: "%", labelArrow: false, ticks: width>500 ? 10 : 5, tickSize: width>500 ? 10 : 5}, x: {label:"Génération de naissance", labelAnchor:"center", labelArrow:false, domain: [1,23], ticks: [1,4,8,12,16,20,23], tickSize: width>600 ? 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.enfFr), x: "gen", y:"n", fill:"enfFr", stroke: "white", channels: { gen : {value: "genFr", label: "Génération:" }, enf : {value: "enfFr", label: "" }, n : {value: "n", label: "" }, }, tip: {format: {x:false, y:false, fill: false, z: false, gen: true, enf: true, n: d=> `${d.toFixed(1).replace(".",",")}%`}, 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([rWidth>600 ? "Fin de la transition\ndémographique" : "①"], {x:4.5, y:102, lineAnchor: "bottom", className:"period"}), Plot.text([rWidth> 600 ? "Entre-\ndeux-guerre" : "②"], {x:10, y:102, lineAnchor: "bottom", className:"period"}), Plot.text([rWidth>600 ? "Début\nbaby-boom" : "③"], {x:14, y:102, lineAnchor: "bottom", className:"period"}), Plot.text([rWidth>600 ? "2e partie\nbaby-boom" : "④"], {x:18, y:102, lineAnchor: "bottom", className:"period"}), Plot.text([rWidth> 600 ? "Post\nbaby-boom" : "⑤"], {x:21.5, y:102, lineAnchor: "bottom", className:"period"}), Plot.text(["<\nà\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:T6d6,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:T6c6,filterLegendEn = ( 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; }; 33:Taa9, 34:[] 2c:{"id":"195078ea12388f9e","slug":null,"title":"Graph FR (4556)","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-04-20T07:32:39.992Z","update_time":"$D2026-08-17T20:03:03.290Z","view_time":null,"first_public_time":"$D2026-04-20T07:32:39.992Z","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":492,"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":1,"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 FR (4556)","cells":[{"id":0,"value":"# Graph FR (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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"domain = [\"0 enfant\", \"1 enfant\", \"2 enfants\", \"3 enfants\", \"4 enfants et plus\"]","pinned":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"viewof Legend = legend(domain, range)","pinned":true,"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 = rWidth>600 ? -1.7 : -2.5","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([\"Courbes\", \"Aires empilées\"], {value: \"Courbes\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"choixG = graph===\"Courbes\" ? 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":25,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$33","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"cssInput","database":"$undefined"},{"id":435,"value":"import {legend, cssLegend} from '@wsthevenin/mtinput'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"cssLegend","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 2d:"$2c:body"