28:null 29:["$","title",null,{"children":"Graphique quotient de mortalité par âge et sexe (113) | Marc Thevenin | Observable"}] 2e:T626,plot = Plot.plot({ marginTop: margin.top, marginBottom: margin.bottom, marginLeft: margin.left, marginRight: margin.right, width: rWidth, height: rWidth>900 ? 0.60*rWidth : rWidth>600 ? 0.65*rWidth : 350, color: {legend: false, domain: domain, range: range}, x: {label: "Âge", labelArrow: false, grid: true, labelAnchor:"center"}, y: {label: "Quotients pour 10 000 personnes*", labelArrow: false, grid: true, domain: [.1,10000], type: "log", base: 10, grid: true, ticks: filter.length>10 ? 10 : filter.length, tickFormat: d => d.toLocaleString("fr-FR") }, marks: [ Plot.line(filter, { filter: d=> legendFr.includes(d.sexe), x: "age", y: d=>d.n/10, stroke: "sexe", strokeWidth: rWidth>600 ? 4 : 2.5, channels: { sexe: {value: "sexe", label: ""}, age: {value: "age", label: ""}, quotient: {value: d=> d.n/10, label: ""} }, tip: {format: {x: false, y: false, stroke: false, z: false, sexe: true, age: true, quotient: d=> `${d.toFixed(1).replace(".",",")} décès pour 10 000`, age: d=>`${d} ans`}, strokeWidth: 0} }), Plot.axisX({ labelArrow: false, tickFormat: d=> d.toFixed(0), tickSize: width>500 ? 10 : 5, ticks: width>500 ? 10 :5, labelAnchor:"center" }), Plot.crosshairX(filter, {x: "age",}) ] }) 2f:Tb54,boxPlot = htl.html `

${viewof rWidth}

${viewof slider}

${viewof legendFr}

${plot} ${cssLegend}

* Quotients reportés sur une échelle logarithmique.
© Ined - ${yearCaption}

Champ : France hors Mayotte jusqu'en 2013, France inclus Mayotte à partir de 2014.

Source : Insee, statistiques de l'état civil et estimations de population.

`30:T65e,plotEn = Plot.plot({ marginTop: margin.top, marginBottom: margin.bottom, marginLeft: margin.left, marginRight: margin.right, width: rWidth, height: rWidth>900 ? 0.60*rWidth : rWidth>600 ? 0.65*rWidth : 350, color: {legend: false, domain: domainEn, range: range}, x: {label: "Age", labelArrow: false, line: true, inset: 10, grid: true, tickFormat: d=> d.toFixed(0)}, y: {label: "Rate per 10,000*", labelArrow: false, inset: 10, grid: true, domain: [.1,10000], type: "log", base: 10, grid: true, ticks: filter.length>10 ? 10 : filter.length, tickFormat: d => d.toLocaleString("en-US") }, marks: [ Plot.line(filterEn, { filter: d=> checkboxEn.includes(d.sexeEn), x: "age", y: d=>d.n/10, stroke: "sexeEn", strokeWidth: rWidth>600 ? 4 : 2.5, curve: "catmull-rom", channels: { sexe: {value: "sexeEn", label: ""}, age: {value: "age", label: ""}, quotient: {value: d=> d.n/10, label: ""} }, tip: {format: {x: false, y: false, stroke: false, z: false, sexe: true, age: true, quotient: d=> `${d.toFixed(1)} deaths per 10,000`, age: d=>`${d} years`}, stroke: "black", strokeWidth: 0} }), Plot.axisX({ labelArrow: false, tickFormat: d=> d.toFixed(0), tickSize: width>500 ? 10 : 5, ticks: width>500 ? 10 :5, labelAnchor:"center" }), ] }) 31:Tb06,boxPlotEn = htl.html `

${viewof rWidth}

${viewof slider2}

${viewof checkboxEn} ${cssLegend}

${plotEn}

* Rates on a logarithmic scale.
© Ined - ${yearCaption}

Champ : France excluding Mayotte until 2013, France including Mayotte from 2014.

Source : INSEE, civil status statistics and population estimates.

`32:T6c5,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: 13px; 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`