28:null 29:["$","title",null,{"children":"Espérance de vie en France FR (3707) | Marc Thevenin | Observable"}] 2e:Tf55,boxPlot = htl.html `

${viewof rWidth}

${display}

${plotDisplay}

Absence de données pour les hommes pendant la révolution de 1789
© Ined - ${yearCaption}

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

Champ: avant 1994, France hexagonale ; en 1994 et après, France entière (départements et régions d’outre-mer inclus).

Note: l'espérance de vie sexes réunis est calculée ici en faisant la moyenne des espérances de vie masculine et féminine.

Sources :

1740-1809 : repris de Bourgeois-Pichat J., 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 : calculs par J. Vallin et F. Meslé [lien].
Depuis 1946 : Insee, statistiques et estimations d'état civil.

`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:Td50,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, color: {legend: false, domain : domain , range: range}, x: {tickFormat: "d", grid: true, inset: 10, label: "Année", labelArrow: false, labelAnchor:"center", ticks: rWidth>600 ? 10 : 5, domain: [minA,maxA], tickSize: rWidth>600 ? 10 : 5}, y: {label: "Nombre d'années", labelArrow: false, grid: true, ticks:10, domain: [minY,maxY], ticks: rWidth>600 ? 10 : 5, }, marks: [ Plot.frame({strokeWidth:0.5, stroke: "black"}), Plot.areaY(filter, {filter: d=> d.TypeEn === "Women" && select2==="Par sexe" , 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.Type) && select2==="Par sexe" , x: "année", y: "valeur", strokeWidth: rWidth>600 ? 4 : 2.5 , stroke: "Type", curve: "catmull-rom", channels: { sexe: {value: "Type", label: ""}, année: {value: "année", label: ""}, valeur: {value: "valeur", label: "Nombre d'années:"}, diff: {value: "diff2", label: "Ecarts avec les hommes:" }, 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).replace(".",",")} years`, diff:".1f", diff: d => `+${d.toFixed(1).replace(".",",")} years`}, strokeWidth: 0}, className: "animation" }), Plot.line(filter2, {filter: d=> select2==="Sexes réunis" , 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: "Nombre d'années:"}, diff: {value: "diff2", label: "Ecarts avec les hommes:" }, 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).replace(".",",")} ans`, diff:".1f", diff: d => `+${d.toFixed(1).replace(".",",")} années`}, strokeWidth: 0}, className: "animation"}), Plot.text(["➀"], {x:1814,y: d=> select2==="Par sexe" ? 22 : 29, className:"bulle", lineAnchor: "top"}), Plot.text(["➁"], {x:1855,y: d=> select2==="Par sexe" ? 33 : 33, className:"bulle", lineAnchor: "top"}), Plot.text(["➂"], {x:1871,y: d=> select2==="Par sexe" ? 24 : 28, className:"bulle", lineAnchor: "top"}), Plot.text(["➃"], {x:1917,y: d=> select2==="Par sexe" ? 26 : 35, className:"bulle", lineAnchor: "top"}), Plot.text(["⑤"], {x:1943,y: d=> select2==="Par sexe" ? 40 : 46, className:"bulle", lineAnchor: "top"}), ] })31:T790,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:"Année" }, y: {label: "Ecarts femmes-hommes\n(en nombre d'années)", 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 : 2.5, channels: { annee: {value: "année", label: ""}, valeur: {value: "valeur", label: "Femmes:"}, infos: {value: "infos", label: "" }, donnees : {value: "donnees", label: ""} }, tip: {format: {x:false,y:false, annee: "d", valeur: d=> `+${d.toFixed(1).replace(".",",")} années`}, 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`