2f:T82b, plot = addAnimation(Plot.plot({ height: width>500 ? .6*width : 350, width: width, marginBottom: 70, marginLeft: 70, marginTop: 60, x: {reverse: false, ticks: [0,10,20,30,40,50,60,70,80,90], grid: true, label: "Âge", }, y: {reverse: true, ticks: width>500 ? [1946, 1955,1965,1975,1985,1995,2005,2015,2024] : [1946,1966,1986,2006,2024], tickFormat: "d", label: "Années", // tickRotate: width> 500 ? 0 : -45 }, fx: {label: null}, color: {legend: true, label: null, scheme:"Cubehelix", type: "symlog", tickFormat: "d", ticks: [0,10,50, 200,1000,6000], domain: [0,6000], width: 320, reverse: true}, caption: "La valeur du quotient de mortalité sont représentés sur une échelle log-symétrique", //subtitle: `Quotients de mortalité pour 10 000 de ${slider[0]} à ${slider[1]} ans`, marks: [ //Plot.rect(df4, {fx: "sexe", x1:1946,x2:2024,y1:0,y2:100, stroke: "#fafafa", fill:"#fafafa"}), Plot.cell(df4b, {fx: "sexe", filter: (d) => d.q !== null && legend.includes(d.qCat), y: "annee", x: "age", fill: (d) => (null !== d.q ? d.q/10 : -100), fillOpacity: 0, strokeWidth: 0, insetLeft: -2, insetRight: -2, insetBottom: -2, //stroke: d=> d.q/10, channels: { annee: {value: "annee", label: ""}, age: {value: "age", label: ""}, gen: {value: "gen", label: ""}, q: {value: d=> d.q/10 , label: ""} }, tip: {format: {fx: false,x: false,y: false, fill: false, stroke: false, z: false, annee: "d", age: d=> `${d} ans`, gen: d=> `Nés en ${d}`, q: d=> `${d.toLocaleString()} décès pour 10 000`}, fillOpacity:0.50} }), //Plot.crosshair(df4, {fx: "sexe", filter: (d) => d.q !== null && legend.includes(d.qCat), x: "annee", y: "age"}), ] }), { type: "rect", delay: 0.1, replay} )30:T668,boxPlot = htl.html `

Quotients de mortalité selon le sexe de 1946 à 2024

${viewof legend} ${viewof slider} ${viewof slider2} ${plot}

`31:Td90,32: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`","pinned":false,"hidden":false,"mode":"html"},{"id":137,"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":139,"value":"filterLegend = (domain, range) => {\n const value = new Map(domain.map(d => [d, true]));\n const _set = () => set(node, [...value].filter(d => d[1]).map(d => d[0]));\n const oninput = e => (value.set(e.target.id, e.target.checked), _set());\n const node = htl.html`

\n ${domain.map((d, i) => htl.html`

\n \n ${d}\n

`)}\n

`;\n _set();\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":424,"value":"import {rangeInput} from '@mootari/range-slider'\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":418,"value":"function randomScope(prefix = 'scope-') {\n return prefix + (performance.now() + Math.random()).toString(32).replace('.', '-');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":420,"value":"cssLength = v => v == null ? null : typeof v === 'number' ? `${v}px` : `${v}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"plot1 = Plot.plot({\n marks: [\n Plot.areaY(aapl, {x: \"Date\", y: \"Close\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"value":"plot2 = Plot.plot({\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\", sort: {x: \"y\", reverse: true}}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":504,"value":"viewof radios = Inputs.radio( [\"Aire\", \"Histogramme\"], {label: \"Select one\", value: \"Aire\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"test = \n\nradios==\"Aire\" ? \n\nhtl.html`\n${viewof radios}\n
\n${plot1}\n`\n : \n \nhtl.html`\n${viewof radios}\n
\n${plot2}\n`\n\n\n","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}