28:null 29:["$","title",null,{"children":"Life expectancy at birth in France EN (3707) | Marc Thevenin | Observable"}] 2e:Tf3a,boxPlot = htl.html `

${viewof rWidth}

${display}

${plotDisplay}

No data available for men during the Revolution of 1789.
© Ined - ${yearCaption}

${viewof checknote} ${cssToggle} ${infoBulles}

Scope : Before 1994, metropolitan France; from 1994 onward, all of France (including overseas departments and regions).

Note : Life expectancy for both sexes is calculated here by averaging male and female life expectancies.

Sources :

1740-1809 : adapted from J.Bourgeois-Pichat, 1952, Note sur l'évolution générale de la population Française depuis de XVIIIe siècle, Population, vol.7, n°2, pp. 319 329.
1810-1945 : calculations by J. Vallin et F. Meslé [Link].
From 1946 : INSEE, Division of Demographic Surveys and Studies.

`2f:Ta81,function Scrubber(values, { format = value => value, initial = 0, direction = 1, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Jouer"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }30:Td09,plot = Plot.plot({ width: rWidth, height: rWidth>900 ? 0.6*rWidth : rWidth>600 ? 0.65 : 350 , marginLeft: rWidth>600 ? 40 : 30, marginBottom: rWidth> 600 ? 50 : 30, marginTop: 30, marginRight: 10, x: {tickFormat: "d", grid: true, inset: 10, label: "Year", labelArrow: false, labelAnchor:"center", ticks: rWidth>600 ? 10 : 5, domain: [minA,maxA], tickSize: rWidth>600 ? 10 : 5 }, y: {label: "Number of years", labelArrow: false, inset: 10, grid: true, ticks:10, domain: [minY,maxY], ticks: rWidth>600 ? 10 : 5, }, color: {legend: false, domain : domain , range: range}, marks: [ Plot.frame({strokeWidth:0.5, stroke: "black"}), Plot.areaY(filter, {filter: d=> d.TypeEn === "Women" && select2==="By sex" , x: "année", y1: "hommes2", y2: "valeur", fill: "#e9e9e9", opacity:.6, stroke: "transparent", strokeWidth:0, curve: "catmull-rom"}), Plot.line(filter2, {filter: d=> d.Type!="diff" && checkbox.includes(d.TypeEn) && select2==="By sex" , x: "année", y: "valeur", strokeWidth: rWidth>600 ? 4 : 2.5, stroke: "TypeEn", curve: "catmull-rom", channels: { sexe: {value: "TypeEn", label: ""}, année: {value: "année", label: ""}, valeur: {value: "valeur", label: "Number of years :"}, diff: {value: "diff2", label: "Gap with men:" }, infos: {value: "infos", label: "" }, donnees : {value: "donneesEn", label: ""} }, tip: {format: {infos: true, sexe: true , année: "d",x: false, y: false, stroke: false, z: false, strokeWidth: false, valeur: d=> `${d.toFixed(1).replace(".",",")} years`, diff:".1f", diff: d => `+${d.toFixed(1)} years`}, strokeWidth: 0}, className: "animation" }), Plot.line(filter2, {filter: d=> select2==="Both sex" , x: "année", y: "valeur", curve: "catmull-rom", stroke: pal100[0], strokeWidth: rWidth>600 ? 4 : 2.5 , channels: { sexe: {value: "Type", label: ""}, année: {value: "année", label: ""}, valeur: {value: "valeur", label: "Number of years :"}, diff: {value: "diff2", label: "Gap with men :" }, infos: {value: "infos", label: "" }, donnees : {value: "donnees", label: ""} }, tip: {format: {infos: true, sexe: true , année: "d",x: false, y: false, stroke: false, z: false, strokeWidth: false, valeur: d=> `${d.toFixed(1)} years`, diff:".1f", diff: d => `+${d.toFixed(1)} years`}, strokeWidth: 0}, className: "animation"}), Plot.text(["➀"], {x:1814,y: d=> select2==="By sex" ? 22 : 29, className:"bulle", lineAnchor: "top"}), Plot.text(["➁"], {x:1855,y: d=> select2==="By sex" ? 33 : 33, className:"bulle", lineAnchor: "top"}), Plot.text(["➂"], {x:1871,y: d=> select2==="By sex" ? 24 : 28, className:"bulle", lineAnchor: "top"}), Plot.text(["➃"], {x:1917,y: d=> select2==="By sex" ? 26 : 35, className:"bulle", lineAnchor: "top"}), Plot.text(["⑤"], {x:1943,y: d=> select2==="By sex" ? 40 : 46, className:"bulle", lineAnchor: "top"}), ] })31:T7a9,plotDiff = Plot.plot({ width: rWidth, height: rWidth>900 ? 0.6*rWidth : rWidth>600 ? 0.65*rWidth : 350 , marginLeft: rWidth>600 ? 40 : 30, marginBottom: rWidth> 600 ? 50 : 30, marginTop: 50, marginRight: 10, x: {tickFormat: "d", grid: true, domain: [range1[0],range1[1]], label: "Année", labelArrow: false, labelAnchor:"center", ticks: rWidth>600 ? 10 : 5, domain: [minA,maxA], tickSize: rWidth>600 ? 10 : 5, label:"Year" }, y: {label: "Women-Men gaps\n(in number of years)", labelArrow: false, grid: true, ticks:10, domain: [0,maxYDiff+5], ticks: rWidth>600 ? 10 : 5, }, marks: [ Plot.frame({strokeWidth:0.5}), Plot.line(dataLong,{filter: d=> d.Type==="diff" && d.année>=range1[0] && d.année<=range1[1] , x:"année",y:"valeur", curve:"catmull-rom", stroke:"#b9b9b9", strokeWidth: rWidth>600 ? 4 : 5, channels: { annee: {value: "année", label: ""}, valeur: {value: "valeur", label: "Women :"}, infos: {value: "infosEn", label: "" }, donnees : {value: "donneesEn", label: ""} }, tip: {format: {x:false,y:false, annee: "d", valeur: d=> `+${d.toFixed(1)} years`}, strokeWidth:0}, }), Plot.text(["➀"], {x:1812.5, y: d=> select2==="By sex" ? 16 : 16 , className:"bulle", lineAnchor: "bottom"}), Plot.text(["➁"], {x:1855, y: d=> select2==="By sex" ? 5 : 5 , className:"bulle", lineAnchor: "bottom"}), Plot.text(["➂"], {x:1871, y: d=> select2==="By sex" ? 6 : 6 , className:"bulle", lineAnchor: "bottom"}), Plot.text(["➃"], {x:1915, y: d=> select2==="By sex" ? 26 : 26 , className:"bulle", lineAnchor: "bottom"}), Plot.text(["⑤"], {x:1942, y: d=> select2==="By sex" ? 17 : 17 , className:"bulle", lineAnchor: "bottom"}), ] })32:T93b, 33:T6d2,function interval(range = [], options = {}) { const [min = 0, max = 1] = range; const { step = .001, label = null, value = [min, max], format = ([start, end]) => `${start} … ${end}`, color, width = 360, theme, __ns__ = randomScope(), } = options; const css = ` #${__ns__} { /*font: 13px/1.2 var(--sans-serif);*/ font-size: calc(10px + .4vw); font-family: poppins, sans-serif; display: flex; align-items: baseline; flex-wrap: wrap; max-width: 100%; width: auto; } @media only screen and (min-width: 30em) { #${__ns__} { flex-wrap: nowrap; width: ${cssLength(width)}; } } #${__ns__} .label { width: 120px; padding: 5px 0 4px 0; margin-right: 6.5px; flex-shrink: 0; } #${__ns__} .form { display: flex; width: 100%; } #${__ns__} .range { flex-shrink: 1; width: 100%; } #${__ns__} .range-slider { width: 100%; } `; const $range = rangeInput({min, max, value: [value[0], value[1]], step, color, width: "100%", theme}); const $output = html``; const $view = html`

${label == null ? '' : html`

${label}`}

${$range}

${$output}

${html`