29:null 2a:["$","title",null,{"children":"Population pyramid with Plot | Éric Mauvière | Observable"}] 2f:T501,{ const plot = Plot.plot({ facet: {data: data_long, x: "Zensus"}, fx: {tickFormat: "", axis: "top", padding: 0.2, label: ""}, x: {tickFormat: Math.abs, ticks: 5, label: "Population", axis: null}, y: {axis: null}, color: {domain: ['ledig', 'verheiratet','geschieden','verwitwet'], range: colors, legend: true}, height: 500, width: Math.min(860, width), marginBottom: 30, marks: [ x_axis, // customized y_axis, // customized Plot.areaX(data_long, { y: "Alter_in_Jahren", x: d => -d.value, dx: -gap, fill: "categ", filter: d => d.sexe === "M" } ), Plot.areaX(data_long, { y: "Alter_in_Jahren", x: "value", dx: gap, fill: "categ", filter: d => d.sexe === "F" }), ] }) d3.select(plot).insert(() => html`

Bevölkerung nach Familienstand und AltersJahren

`, 'div') d3.select(plot).append(() => html`

Quelle: BIB2022, Daten: DeStatis

`) return plot }30:T426,pyr_anim = { const plot = Plot.plot({ x: {tickFormat: Math.abs, ticks: 5, label: "Population", axis: null}, y: {axis: null}, color: {domain: ['ledig', 'verheiratet','geschieden','verwitwet'], range: colors, legend: true}, height: 500, width: 400, marginBottom: 40, marginLeft:30, marginRight:30, marks: [ x_axis, // customized y_axis, // customized Plot.areaX(model, { y: "Alter_in_Jahren", x: d => -d.value, dx: -gap, fill: "categ", filter: d => d.sexe === "M" } ), Plot.areaX(model, { y: "Alter_in_Jahren", x: "value", dx: gap, fill: "categ", filter: d => d.sexe === "F" }), ] }) let t2 = Math.round(100*t) d3.select(plot).insert(() => html`

Bevölkerung nach Familienstand und AltersJahren ${t2 == 0 ? '(1991)' : t2 == 100 ? '(2021)' : ''}

`, 'div') return plot }31:T88c,interpol3 = l => { // aging pyramids let t = 2 * l aq.addFunction('decrease_with_aging', decrease_with_aging, { override: true }) aq.addFunction('increase_with_getting_younger', increase_with_getting_younger, { override: true }) if (l <= 0.5) { let decal = Math.round(15 * t), decal2 = 15 - decal let dt1991 = data_pivot.select(0,1,2,'y_1991') .derive({ y_1991: `op.decrease_with_aging(d.Alter_in_Jahren, d.sexe, ${decal}, d.y_1991)`} ) .derive({ Alter_in_Jahren: `d.Alter_in_Jahren + ${decal}` } ) .rename({ 'y_1991': 'y_1991_d' }) let dt1996 = data_pivot.select(0,1,2,'y_2006') .derive({ Alter_in_Jahren: `d.Alter_in_Jahren - ${decal2}`} ) .derive({ y_2006: `op.increase_with_getting_younger(d.Alter_in_Jahren, d.sexe, ${decal2}, d.y_2006)`} ) .rename({ 'y_2006': 'y_2006_d' }) return dt1991.join_full(dt1996) .orderby('Alter_in_Jahren').filter('d.Alter_in_Jahren >= 0 && d.Alter_in_Jahren < 85') .derive({ value: `d.y_1991_d === undefined ? d.y_2006_d : d.y_2006_d === undefined ? d.y_1991_d : ((1 - ${t*t}) * d.y_1991_d + ${t*t} * d.y_2006_d)`}) } else { t = 2 * (l - 0.5) let decal = Math.round(15 * t), decal2 = 15 - decal let dt2006 = data_pivot.select(0,1,2,'y_2006') .derive({ y_2006: `op.decrease_with_aging(d.Alter_in_Jahren, d.sexe, ${decal}, d.y_2006)`} ) .derive({ Alter_in_Jahren: `d.Alter_in_Jahren + ${decal}`}) .rename({ 'y_2006': 'y_2006_d' }) let dt2021 = data_pivot.select(0,1,2,'y_2021') .derive({ Alter_in_Jahren: `d.Alter_in_Jahren - ${decal2}`} ) .derive({ y_2021: `op.increase_with_getting_younger(d.Alter_in_Jahren, d.sexe, ${decal2}, d.y_2021)`} ) .rename({ 'y_2021': 'y_2021_d' }) return dt2006.join_full(dt2021) .orderby('Alter_in_Jahren').filter('d.Alter_in_Jahren >= 0 && d.Alter_in_Jahren < 85') .derive({ value: `d.y_2006_d === undefined ? d.y_2021_d : d.y_2021_d === undefined ? d.y_2006_d : ((1 - ${t*t}) * d.y_2006_d + ${t*t} * d.y_2021_d)`}) } }32:[{"id":"c1686f55419ce8b815dc633e8fa237754678d3fab264338d1000c476813c7a2818152cbbf6d423e3d21e407c5cc2c8fc022125c416c589322bf952dde0696dbc","href":"https://static.observableusercontent.com/files/c1686f55419ce8b815dc633e8fa237754678d3fab264338d1000c476813c7a2818152cbbf6d423e3d21e407c5cc2c8fc022125c416c589322bf952dde0696dbc","name":"bib_pyramiden_familienstand_long.csv","type":"text/csv","lastModified":1657951395153.171,"size":46244},{"id":"f7793666048fe00da0a79bf9ec8af2c9485f793abe291def0da9bd3b52ed0a106b5b494ae415eaa35e3985e0bd1e1a323c1320e2eb6863aa01db55a5f57240fb","href":"https://static.observableusercontent.com/files/f7793666048fe00da0a79bf9ec8af2c9485f793abe291def0da9bd3b52ed0a106b5b494ae415eaa35e3985e0bd1e1a323c1320e2eb6863aa01db55a5f57240fb","name":"bib_pyr.png","type":"image/png","lastModified":1657951395153.171,"size":150886},{"id":"712ad68e58c5d3e52b8453d07e6f4310068b7caef5b44ebfb8150dbff2e110a8bc969ff36a961249a77fa16e7cbee64e99f27c69c3f0b96d611f78f63f61d020","href":"https://static.observableusercontent.com/files/712ad68e58c5d3e52b8453d07e6f4310068b7caef5b44ebfb8150dbff2e110a8bc969ff36a961249a77fa16e7cbee64e99f27c69c3f0b96d611f78f63f61d020","name":"bib_pyr_r.png","type":"image/png","lastModified":1657951395153.171,"size":93486}] 2d:{"id":"124d93680bae41c2","slug":"population-pyramid-with-plot","title":"Population pyramid with Plot","thumbnail":"01a98f26a2e79ceea054b1920da16f1d24ef5b0cc45bce93b24a29768b6b252c","access_level":"public","create_time":"$D2022-07-16T06:03:15.153Z","update_time":"$D2022-07-20T07:24:28.962Z","view_time":null,"first_public_time":"$D2022-07-16T08:19:11.858Z","has_unpublished_edits":null,"fork":true,"stars":36,"starred":false,"owner":{"type":"team","id":"cd09b02ddc62abda","login":"ericmauviere","name":"Éric Mauvière","avatar_url":"https://avatars-next.observableusercontent.com/a35a91b5ca23c5dd084a628d6c4898fb6eefb2ede192b1801b0efae516f49017","tier":"starter_2024"},"version":1078,"publish_version":1078,"role":null,"authored":false,"authors":[{"type":"individual","id":"c86281fcf8f7c7cc","login":"ericmauviere","name":"Éric Mauvière","avatar_url":"https://avatars-next.observableusercontent.com/a35a91b5ca23c5dd084a628d6c4898fb6eefb2ede192b1801b0efae516f49017","tier":null}],"members":[{"type":"individual","id":"c86281fcf8f7c7cc","login":"ericmauviere","name":"Éric Mauvière","avatar_url":"https://avatars-next.observableusercontent.com/a35a91b5ca23c5dd084a628d6c4898fb6eefb2ede192b1801b0efae516f49017","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":12,"collection":{"id":"368f7e259b4938c1","slug":"community-spotlight","title":"Community Spotlight","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Population pyramid with Plot","cells":[{"id":0,"value":"# Population pyramid with Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":379,"value":"In a [recent publication](https://www.bib.bund.de/DE/Presse/Konferenzen/2022-07-11-Broschuere-Demografischen-Wandel-neu-entdecken.html), the German Federal Institute for Population Research (BiB) offers original perspectives on the demographic development in Germany between 1991 and 2021. This study is based on a collection of pyramids, superbly realized (with R - ggplot2) by [Cédric Scherer](https://www.cedricscherer.com/).\n\n**This gave me the opportunity to reproduce one of them with Observable Plot**, which demonstrates here its sumptuous flexibility and its beautiful elegance: live in the browser, SVG high res, concise code, CSS compatible.\n\n🙏 And big thanks to Philippe Rivière (Fil) for having provided me with a strong basis for that rebuilding!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"### Population by marital status and age\n- ledig: single - célibataire\n- verheiratet: married - marié·e\n- geschieden: divorced - divorcé·e\n- verwitwet: widowed - veuf·ve","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":703,"value":"## Animated version with Plot & Arquero
(interpolation between 1991, 2006 and 2021)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":637,"value":"viewof t = Scrubber(d3.range(0, 1.00333, 0.0333), {format: d => Math.round((1 - d) * 1991 + d * 2021), loop: false, autoplay: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1062,"value":"Not so easy to animate properly! You may browse different interpolation methods at the end of this document.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1067,"value":"model = interpol3(t)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"## Data\nFile source: https://github.com/z3tt/BiB-population-pyramids/tree/main/data\n\nPivoted to be arranged in a single csv file with few key columns.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"data_long = d3.csvParse(await FileAttachment(\"bib_pyramiden_familienstand_long.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"Inputs.table(data_long, {\n layout: \"auto\",\n width: 400,\n format: { Zensus: d => d.toString() } // c'est super agaçant ce formattage des dates :(\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"## Additional definitions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"gap = 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"ticks = [0, 250, 500, 750]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"colors = ['#69AEBE','#F1757A','#F2B678','#989D9E']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"x_axis = [\n Plot.ruleY([0], { x1: 0, x2: 800, dx: gap, strokeWidth: 0.5, stroke:'#999' }),\n Plot.ruleX(ticks, { x: d => d, y: 0, insetBottom: -5, dx: gap, stroke:'#999' }),\n Plot.text(ticks, { x: d => d, y: 0, dx: gap, dy: 12 }),\n\n Plot.ruleY([0], { x1: 0, x2: -800, dx: -gap, strokeWidth: 0.5, stroke:'#999' }),\n Plot.ruleX(ticks, { x: d => -d, y: 0, insetBottom: -5, dx: -gap, stroke:'#999' }),\n Plot.text(ticks, { x: d => -d, y: 0, dx: -gap, dy: 12 }),\n\n Plot.text(['← Männer in Tausend'], { x: 0, y: 0, dx: -gap, dy: 25, textAnchor: 'end', fontWeight: 'bold' }),\n Plot.text(['Frauen in Tausend → '], { x: 0, y: 0, dx: gap, dy: 25, textAnchor: 'start', fontWeight: 'bold' })\n ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"y_axis = [\n Plot.text(d3.range(0, 90, 10), { y: d => d }),\n Plot.text([\"Jahre\"], { y: 80, dy: 10, fontWeight: 400 }),\n Plot.ruleY(d3.range(5, 85, 5), { x1: d => d % 10 == 0 ? 0 : gap, x2: 100, dx: gap/2, strokeWidth: 0.2 }),\n Plot.ruleY(d3.range(5, 85, 5), { x1: d => d % 10 == 0 ? 0 : -gap, x2: -100, dx: -gap/2, strokeWidth: 0.2 })\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"CSS 👇","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":184,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"## Original graphic published by BiB","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"bib_pyr = FileAttachment(\"bib_pyr.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"## Base version made by Cédric Scherer with R - ggplot2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":387,"value":"bib_pyr_r = FileAttachment(\"bib_pyr_r.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"For comparison purposes: [R source code published by Cédric](https://github.com/z3tt/BiB-population-pyramids/blob/main/src/bib-pyramid-functions.R)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":727,"value":"### Interpolation resources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":819,"value":"data_pivot = aq.from(data_long)\n .derive({ Zensus: \"'y_' + d.Zensus\" })\n .groupby(\"Alter_in_Jahren\", \"sexe\", \"categ\")\n .pivot(\"Zensus\", \"value\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"Interpolation function first version: simply linear between 1991 and 2006, and between 2006 and 2021.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":615,"value":"interpol1 = l => { // version originale\n let t = 2 * l\n \n if (l < 0.5) {\n return data_pivot.derive({value: `(1 - ${t}) * d.y_1991 + ${t} * d.y_2006`})\n }\n \n else {\n t = 2 * (l - 0.5)\n \n return data_pivot.derive({value: `(1 - ${t}) * d.y_2006 + ${t} * d.y_2021`})\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"Interpolation function second version (thanks to fil) : Lagrange (quadratic) interpolation ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":749,"value":"interpol = (l) => {\n let t = 2 * l - 1\n\n return data_pivot.derive({\n value: `Math.max(0, ${(t * (t - 1)) / 2} * d.y_1991 \n + ${-(t + 1) * (t - 1)} * d.y_2006 \n + ${((t + 1) * t) / 2} * d.y_2021)`\n }) // Lagrange (quadratic) interpolation \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"Interpolation Test:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":762,"value":"interpol(0).orderby(0,1).view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"But it's not satisfying, a population pyramid changes as people grow older (and also with migrations). A third method interpolates 3 translated in age different pyramids, and also applies mortality rates (for 2005, which is median) :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":926,"value":"mortality_rate_by_age_sex = (age, sexe) => { // Germany mortality table, 2005: https://apps.who.int/gho/data/view.main.LT62050\n if (age < 40) return 1 \n if (age < 45) return sexe == \"M\" ? 2 : 1\n if (age < 50) return sexe == \"M\" ? 2.6 : 1.4\n if (age < 55) return sexe == \"M\" ? 6 : 3 \n if (age < 60) return sexe == \"M\" ? 8 : 4 \n if (age < 65) return sexe == \"M\" ? 13 : 6 \n if (age < 70) return sexe == \"M\" ? 20 : 10 \n if (age < 75) return sexe == \"M\" ? 32 : 17 \n if (age < 80) return sexe == \"M\" ? 54 : 32\n if (age < 85) return sexe == \"M\" ? 90 : 62 \n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"decrease_with_aging = (age0, sexe, decal, v) => {\n for (let i = 1; i < decal; i++) {\n v = v * (1 - mortality_rate_by_age_sex(age0 + decal, sexe) / 1000)\n }\n\n return v\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"increase_with_getting_younger = (age1, sexe, decal, v) => {\n return v\n for (let i = decal; i >=1; i--) {\n v = v / (1 - mortality_rate_by_age_sex(age1 - decal, sexe) / 1000)\n }\n\n return v\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"interpol3(0).view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"//https://www.ined.fr/fr/tout-savoir-population/chiffres/france/mortalite-cause-deces/taux-mortalite-sexe-age/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"