2f:Ta8b,plot4 = Plot.plot({ width, height: height, marginBottom: mBottom, marginTop: mTop, marginLeft: mLeft, color: {legend: false, domain: domain, range: range}, x: {tickFormat: "d", tickSize: width>500 ? 10 : 5, label: "Année", labelArrow: false, grid: true, domain: [slider[0], slider[1]], ticks: width>800 ? 5 : width>500 ?4 : 3}, y: {grid: true, domain: [minY,maxY+4], label: "Nombre d'années", labelArrow: false, inset: 20, ticks: 5}, fx: {label: null, axis: null, padding: paddingFx }, marks: [ Plot.line(filter, { fx: "sexeFr", x: "annee", y:"edv", z:"index", stroke:"#414141", strokeWidth:.2, curve:"catmull-rom"}), Plot.frame({strokeWidth:.5, stroke: "black"}), Plot.line(filter, {filter: d=> checkbox.includes(d.zone), fx: "sexeFr", x: "annee", y:"n", stroke:"zone", //curve: "catmull-rom", strokeWidth: d=> d.pays==="France" ? 2*strokeW : strokeW, channels: { zone: {value: "zone", label:""}, annee: {value: "annee", label:""}, edv: {value:"n", label: ""}, flag: {value: "flag", label: ""}, }, tip: {format: {flag: true, pays: true, annee: true, edv: d=> `${d.toFixed(1).replace('.',',')} ans` ,fx: false, y: false, x:false, z: false, stroke: false, strokeWidth: false, annee: "d"}, render(index, scales, values, dimensions, context, next) { // Filter and highlight the paths with the same *z* as the hovered point. const path = d3.select(context.ownerSVGElement).selectAll("[aria-label=line] path"); if (index.length) { const z = values.z[index[0]]; path.style("stroke", "#d1d1d1") //path.style("stroke-width", 2.9) .filter(([i]) => values.z[i] === z) .style("stroke", null) .raise(); } else path.style("stroke", null); // Render the tip. return next(index, scales, values, dimensions, context); }, fillOpacity: 1, stroke: "black", strokeWidth:1 }, }), Plot.text(["Femmes"], {fx: ["Femmes"], x: (slider[0]+slider[1])/2, y: maxY+3, textAnchor: "middle", className:"label"}), Plot.text(["Hommes"], {fx: ["Hommes"], x: (slider[0]+slider[1])/2, y: maxY+3, textAnchor: "middle", className:"label"}), ] })30:Tea5,boxPlot4 = htl.html `

${viewof checkbox} ${viewof slider}
${plot4}

Champ : France hexagonale.

Source : Calculs de l’autrice à partir des données de la French Human Mortality Database.

`31:T6c8,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:Ta96,33:[{"id":"5b1775973f4002466a3ffbd69a5473d07df4a424a52b7ec4350d4bf61d2967360828c2c6b8a7a8b1db96c08eb4f85d932e6028ac9497ca22a31d2f1d06b7681a","href":"https://static.observableusercontent.com/files/5b1775973f4002466a3ffbd69a5473d07df4a424a52b7ec4350d4bf61d2967360828c2c6b8a7a8b1db96c08eb4f85d932e6028ac9497ca22a31d2f1d06b7681a","name":"df.csv","type":"text/csv","lastModified":1768202402301.443,"size":15437}] 2d:{"title":"Espérance de vie FR (24020)","cells":[{"id":0,"value":"# Espérance de vie FR (24020)","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"df = FileAttachment(\"df.csv\").csv({typed:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"pal100 = [\n \"#ff564e\", //rouge\n \"#ff7aad\", //rose\n \"#522673\", //mauve\n \"#0042eb\", //bleu\n \"#5cd49e\", //vert\n \"#ffb322\", //jaune\n \"#4f4f4f\", //gray\n \"#ff362d\", //red dark\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"domain = [...new Set(df.map(d => d.zone))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"range = [pal100[2],pal100[3],pal100[4]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"maxYear = d3.max(df, d=> d.annee)","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"viewof slider = rangeSlider({\n min: 1968,\n max: maxYear,\n step: 1,\n value: [1968,maxYear],\n label: \"Choisir une période\",\n color: \"black\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"sexPosition = Math.round((slider[0]+slider[1])/2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"viewof checkbox = filterLegend(domain, range, domain)","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"filter = df.filter(d => d.annee>=slider[0] && d.annee<=slider[1] )","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"minY = d3.min(filter,d=> d.n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"maxY = d3.max(filter,d=> d.n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"### Évolution de l’espérance de vie à la naissance selon le sexe et le type de départements de l’Hexagone depuis 1968*","pinned":false,"hidden":false,"mode":"md"},{"id":69,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"* Données non disponibles pour les Dom.\nChamp : France hexagonale.\nSource : Calculs de l’autrice à partir des données de la French Human Mortality Database","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"height = {\nlet n; \n if (width>=1000) {return n =0.48*width} \n if (width>=600) {return n =0.55*width}\n if (width>=500) {return n =0.65*width} \n else {return n = 350} \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"mBottom = {\n let n;\n if (width>600) {return n=70} \n if (width>500) {return n=50} \n if (width>400) {return n=40} \n else {return n=40}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"mTop = {\n let n;\n if (width>=400) {return n=45} \n else {return n=20}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":" mLeft = {\n let n;\n if (width>=800) {return n=45}\n if (width>=600) {return n=40} \n if (width>=400) {return n=35} \n else {return n=25}\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"paddingFx = {\n let n;\n if (width>800) {return n=0.1}\n else {return n=0.18}\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"strokeW = {\nlet n; \n if (width>=1200) {return n =3} \n if (width>=700) {return n =2.5}\n if (width>=500) {return n =2} \n if (width>=400) {return n =1.5}\n // if (size>=400 & size<500) {return n = 1.5 }\n else {return n = 1.5} \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"### Fonctions","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"import {rangeSlider} from \"@mootari/range-slider\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"$32","pinned":true,"hidden":false,"mode":"html"}],"files":"$W33","stdlib":"1","titling":"auto"}