2f:Ta48,boxPlotGraph = html`

${display} ${cssLegend} ${cssToggle} ${viewof rWidth}

Champ : Flux depuis et vers la France hexagonale et la Corse.

Source : Insee, recensement de la population 2022, exploitation complémentaire.

`30:T413,config = { const mobile = rWidth <= 600 // pour que l'espace entre aires n'apparaisse pas trop avec réduction de la taille de l'écran. const nodePadding = Math.max(10, Math.min(15, width * 0.05)) // largeur du rect à l'extrémité const nodeWidth = Math.max(8, Math.min(20, width * 0.02)) return { ///marges margin: {top: 20, right: rWidth>600 ? 150 : 100, bottom: 20, left: rWidth>600 ? 150 : 100}, //couleurs // range: [pal100[0],pal100[2], pal100[4], pal100[3], pal100[5]], //domain // domain: [...new Set(source.map(d=>d.origine))], // font param font: "poppins, sans-serif", //fontSize: !mobile ? "15px" : width>500 ? "12px" : "11px", fontSize: "clamp(11px,2cqw,15px" , colorText: "#414141", // ordre des noeuds // nodeOrder: [ // "Urbain", // "Semi Urbain", // "Rural" // ], domain: [...categoryColors.keys()], range: [...categoryColors.values()], nodeOrder: nodeOrder, nodePadding, nodeWidth }}31:T121a,plot = { const Width = rWidth const Height = Width > 600 ? 0.6 * Width : Width>400 ? 0.65* Width : 350 const color = d3.scaleOrdinal().domain(config.domain).range(config.range) const svg = d3.create("svg").attr("viewBox", [0, 0, Width, Height]) const {sankey, sankeyLinkHorizontal} = sankeyLib const graph = sankey() .nodeId(d => d.id) .nodeWidth(20) .nodeWidth(config.nodeWidth) .nodePadding(config.nodePadding) .nodeSort((a, b) => config.nodeOrder.indexOf(a.label) - config.nodeOrder.indexOf(b.label)) .extent([[config.margin.left, config.margin.top], [Width - config.margin.right, Height - config.margin.bottom]]) ({nodes: nodes.map(d => ({...d})), links: links.map(d => ({...d}))}) const linkSel = svg.append("g") .selectAll("path") .data(graph.links) .join("path") .attr("class", "flow-link") .attr("d", sankeyLinkHorizontal()) .attr("fill", "none") .attr("stroke", (d, i) => `url(#gradient-${i})`) .attr("stroke-opacity", d => isVisible(d) ? 0.5 : 0) .attr("stroke-linejoin", "round") .attr("stroke-width", d => Math.max(1, d.width)) .on("click", function(event, d) { if (!isVisible(d)) return createTooltip.toggleFreeze(linkTooltipHTML(d), event) }) .on("mouseover", function(event, d) { if (!isVisible(d)) return svg.selectAll("path.flow-link") .interrupt("hover").transition("hover").duration(200) .attr("stroke-opacity", p => isVisible(p) ? 0.1 : 0) d3.select(this) .interrupt("hover").transition("hover").duration(200) .attr("stroke-opacity", 1) createTooltip.show(linkTooltipHTML(d)) createTooltip.move(event) }) .on("mousemove", function(event, d) { if (!isVisible(d)) return createTooltip.move(event) }) .on("mouseout", function() { svg.selectAll("path.flow-link") .interrupt("hover").transition("hover").duration(200) .attr("stroke-opacity", d => isVisible(d) ? 0.5 : 0) createTooltip.hide() }) // flux const defs = svg.append("defs") graph.links.forEach((d, i) => { const gradient = defs.append("linearGradient") .attr("id", `gradient-${i}`) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d.source.x1).attr("x2", d.target.x0) .attr("y1", (d.y0 + d.y1) / 2).attr("y2", (d.y0 + d.y1) / 2) gradient.append("stop").attr("offset", "0%").attr("stop-color", color(d.source.label)) gradient.append("stop").attr("offset", "100%").attr("stop-color", color(d.target.label)) }) const node = svg.append("g").selectAll("g").data(graph.nodes).join("g") // rect gauche/droite node.append("rect") .attr("x", d => d.x0).attr("y", d => d.y0) .attr("width", d => d.x1 - d.x0).attr("height", d => d.y1 - d.y0) .attr("fill", d => color(d.label)) .attr("stroke", "black") .attr("stroke-width", 1) .on("mouseover", function(event, d) { const anchor = d.id.endsWith("_D") ? "left" : "right" createTooltip.show(nodeTooltipHTML(d), event, anchor) }) .on("mousemove", function(event, d) { const anchor = d.id.endsWith("_D") ? "left" : "right" createTooltip.move(event, anchor) }) .on("mouseout", function() { createTooltip.hide() }) .on("click", function(event, d) { const anchor = d.id.endsWith("_D") ? "left" : "right" createTooltip.toggleFreeze(nodeTooltipHTML(d), event, anchor) }) node.append("text") .attr("x", d => d.x0 < Width / 2 ? d.x0 - 10 : d.x1 + 10) .attr("y", d => (d.y0 + d.y1) / 2) .attr("text-anchor", d => d.x0 < Width / 2 ? "end" : "start") .style("font-family", config.font) .style("font-size", config.fontSize) .attr("fill", config.colorText) .each(function(d) { const lines = labelLines.get(d.label) ?? [d.label] const lineHeight = 1.1 const x = d.x0 < Width / 2 ? d.x0 - 10 : d.x1 + 10 const startDy = -((lines.length - 1) * lineHeight) / 2 + 0.35 d3.select(this) .selectAll("tspan") .data(lines) .join("tspan") .attr("x", x) .attr("dy", (line, i) => i === 0 ? `${startDy}em` : `${lineHeight}em`) .text(line => line) }) // titres de colonnes svg.append("text") .attr("x", config.margin.left+20).attr("y", 10).attr("text-anchor","end") .style("font-family", config.font).style("font-size", "clamp(11px,2cqw,15px").style("font-weight", "bold") .attr("fill", config.colorText).text("Avant migration") svg.append("text") .attr("x", Width - config.margin.right - 20).attr("y", 10).attr("text-anchor", "start") .style("font-family", config.font).style("font-size", "clamp(11px,2cqw,15px").style("font-weight", "bold") .attr("fill", config.colorText).text("Après migration") return svg.node() }32:T8a6,createTooltip = { const tooltip = d3.select(document.body) .append("div") .attr("class", "sankey-tooltip") .style("position", "fixed") .style("opacity", 0) .style("z-index", 1000) .style("background", "white") .style("border", "1px solid rgba(0,0,0,0.25)") .style("border-radius", "8px") .style("box-shadow", "0 4px 16px rgba(0,0,0,0.15)") .style("font-family", config.font) .style("font-size", "13px") .style("color", config.colorText) .style("overflow", "hidden") .style("max-width", "260px") .style("transition", "opacity 150ms ease") let frozen = false const closeBtn = tooltip.append("div") .style("position", "absolute") .style("top", "4px").style("right", "7px") .style("cursor", "pointer") .style("font-size", "13px") .style("color", "rgba(0,0,0,0.5)") .style("display", "none") .text("✕") .on("click", () => { frozen = false closeBtn.style("display", "none") tooltip.style("opacity", 0) }) const content = tooltip.append("div") function position(event, anchor = "right") { const offset = 14 if (anchor === "left") { tooltip.style("left", `${event.clientX - offset}px`).style("transform", "translate(-100%, 0)") } else { tooltip.style("left", `${event.clientX + offset}px`).style("transform", "translate(0, 0)") } tooltip.style("top", `${event.clientY + offset}px`) } function show(html, event, anchor = "right") { if (frozen) return content.html(html) if (event) position(event, anchor) tooltip.style("opacity", 1) } function move(event, anchor = "right") { if (!frozen) position(event, anchor) } function hide() { if (!frozen) tooltip.style("opacity", 0) } function toggleFreeze(html, event, anchor = "right") { if (frozen) { frozen = false closeBtn.style("display", "none") tooltip.style("opacity", 0) } else { frozen = true content.html(html) if (event) position(event, anchor) closeBtn.style("display", "block") tooltip.style("opacity", 1) } } invalidation.then(() => tooltip.remove()) return {show, hide, move, toggleFreeze} }33:T4ba,function linkTooltipHTML(d) { const c1 = colorScale(d.source.label) const c2 = colorScale(d.target.label) const gradient = `linear-gradient(to right, ${c1}, ${c2})` const value = Math.round(d.value).toLocaleString("fr-FR") let html if (sens === "Flux vers") { html = `${value} personnes quittent ${d.source.label} vers ${d.target.label}
soit ${d.pDep.toFixed(1).replace(".", ",")}% des départs de ${d.source.label}` } else { // ligne inversée pour retrouver le bon pArr, même logique que pour les rects const inverse = source.find(s => s.origine === d.target.label && s.destination === d.source.label) const pArr = inverse ? inverse.pArr : null html = `${value} personnes arrivent à ${d.target.label} depuis ${d.source.label}
soit ${pArr !== null ? pArr.toFixed(1).replace(".", ",") : "?"}% des arrivées à ${d.target.label}` } return `

${html}

` }34:Tdc2, 35:T42a,plotIntra = Plot.plot({ width: rWidth, marginLeft: rWidth>600 ? 100 : 70, marginRight: config.margin.right-50, marginTop:0, subtitle: "% de migrations dans le même type de territoire", x: {ticks: width>600 ? 10 : 5, tickFormat: d=> d.toLocaleString("fr"), label: null, grid: true, //domain:[0,synthese.total] }, y: {ticks:width>600 ? 5 : 3, label: null, tickSize:0, axis:false}, color: {legend:false, domain:domain,range:[pal100[0],pal100[2],pal100[3],pal100[4],pal100[5]]}, marks: [ Plot.barX(dfSynt,{x:"pIntraZ", y: "zone", fill: d=> d.zone==="Urbain" ? pal100[0] : d.zone==="Petites polarités" ? pal100[2] : d.zone==="Ruralités productives" ? pal100[3] : d.zone==="Ruralités touristiques" ? pal100[4] : pal100[5], sort: {y: "x"}, }), Plot.ruleX([0], {strokeWidth:.5}), ] })36:T512,boxPlotSynthese = html`

${viewof legendSynthese}

${plotTot} ${plotIntra} ${plotSolde} ${viewof rWidth}

`37:[{"id":"5799488c97713e2fbe65ee05b9e00faf8e3a10366eaa79604050b93ec27b6a22dda7125e01f19ac9bdc1b859c1a928c860717d6a701604e5b7e0d9ff2a618ad5","href":"https://static.observableusercontent.com/files/5799488c97713e2fbe65ee05b9e00faf8e3a10366eaa79604050b93ec27b6a22dda7125e01f19ac9bdc1b859c1a928c860717d6a701604e5b7e0d9ff2a618ad5","name":"Capture d’écran 2026-08-05 090116.png","type":"image/png","lastModified":1785913324619.096,"size":127563},{"id":"7b9e90bc495f9a2c57dba66e791f58100246425b04ed12cd983d8d42bd9c45870b7c1b57ea02383577d200f7e20066e24ce2488307e398884fb98ccfc7ad1a8b","href":"https://static.observableusercontent.com/files/7b9e90bc495f9a2c57dba66e791f58100246425b04ed12cd983d8d42bd9c45870b7c1b57ea02383577d200f7e20066e24ce2488307e398884fb98ccfc7ad1a8b","name":"dfD3@6.csv","type":"text/csv","lastModified":1785753005796.516,"size":2378}] 2d:{"title":"Sankey sur migrations internes version d3.js - FR (work in progress)","cells":[{"id":0,"value":"# Sankey sur migrations internes version d3.js - FR (work in progress)\n\n* Ajout d'une petite animation\n* Minibar sur tooltip sur les rects départ/arrivée\n* Dégradé sur les flux (dont tooltip)\n* Ajout d'un sous graph optionnel avec des éléments de synthèse (volumes des flux, % de flux dans un même type d'aire,soldes) ","pinned":false,"hidden":false,"mode":"md"},{"id":378,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"img = FileAttachment(\"Capture d’écran 2026-08-05 090116.png\").image({width:300})","pinned":true,"hidden":false,"mode":"ojs"},{"id":329,"value":"html`graphique d'origine (VE):
\n${img}
\nLien article dans Population\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"pal100 = [\n \"#ff564e\", //rouge\n \"#ff7aad\", //rose\n \"#522673\", //mauve\n \"#074dff\", //bleu\n \"#5cd49e\", //vert\n \"#ffb322\", //jaune\n \"#4f4f4f\", //gray\n \"#ff362d\", //red dark\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"source = FileAttachment(\"dfD3@6.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"// nodes : toujours les 5 zones, statique\nnodes = config.domain.flatMap(label => [\n {id: label + \"_O\", label},\n {id: label + \"_D\", label}\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"// links : TOUJOURS complet, jamais filtré — la structure du graphe ne bouge plus\nlinks = source.map(d => ({\n source: d.origine + \"_O\",\n target: d.destination + \"_D\",\n value: d.valeur,\n pDep: d.pDep,\n pArr: d.pArr\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"sankeyLib = require(\"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"nodeOrder = [\n \"Urbain\",\n \"Petites polarités\",\n \"Ruralités productives\",\n \"Ruralités résidentielles\",\n \"Ruralités touristiques\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"categoryColors = new Map([\n [\"Urbain\", pal100[0]],\n [\"Petites polarités\", pal100[2]],\n [\"Ruralités productives\", pal100[3]],\n [\"Ruralités résidentielles\", pal100[4]],\n [\"Ruralités touristiques\", pal100[5]]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"### config","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"### inputs","pinned":false,"hidden":false,"mode":"md"},{"id":165,"value":"viewof choixZone = legend(config.domain,config.range, {width:\"100%\", fontSize:\"clamp(8px,2cqw,13px)\"}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"viewof sens = Inputs.radio(\n [\"Partis de\", \"Arrivés à\"],\n {value: \"Partis de\", label: \"\"}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"function isVisible(d) {\n if (sens === \"Partis de\") return choixZone.includes(d.source.label)\n if (sens === \"Arrivés à\") return choixZone.includes(d.target.label)\n return choixZone.includes(d.source.label) && choixZone.includes(d.target.label) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"labelLines = new Map([\n [\"Urbain\", [\"Urbain\"]],\n [\"Petites polarités\", [\"Petites\", \"polarités\"]],\n [\"Ruralités productives\", [\"Ruralités\", \"productives\"]],\n [\"Ruralités résidentielles\", [\"Ruralités\", \"résidentielles\"]],\n [\"Ruralités touristiques\", [\"Ruralités\", \"touristiques\"]]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"## Plot","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"animatedPlot = {\n const svg = d3.select(plot)\n const linkSel = svg.selectAll(\"path.flow-link\")\n\n linkSel.each(function() {\n const length = this.getTotalLength()\n d3.select(this)\n .attr(\"stroke-dasharray\", `${length} ${length}`)\n .attr(\"stroke-dashoffset\", length)\n })\n\nlinkSel.transition(\"appear\")\n .delay((d, i) => (i / linkSel.size()) * 400)\n .duration(700)\n .ease(d3.easeCubicInOut)\n .attr(\"stroke-dashoffset\", 0)\n\n return plot\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"## Tooltip","pinned":false,"hidden":false,"mode":"md"},{"id":352,"value":"colorScale = d3.scaleOrdinal().domain(config.domain).range(config.range)","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"nodeTotals = {\n const totals = new Map()\n config.domain.forEach(label => {\n const totalOut = source.filter(d => d.origine === label).reduce((s, d) => s + d.valeur, 0)\n const totalIn = source.filter(d => d.destination === label).reduce((s, d) => s + d.valeur, 0)\n totals.set(label, {totalOut, totalIn})\n })\n return totals\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"=> mini barres pour tooltip","pinned":false,"hidden":false,"mode":"md"},{"id":453,"value":"function buildMiniBars(label, direction) {\n const rows = source.filter(d => d.origine === label) // même filtre dans les 2 cas\n const valueKey = direction === \"out\" ? \"pDep\" : \"pArr\" // seul ce qui change\n\n const items = rows\n .map(d => ({label: d.destination, value: d[valueKey]}))\n .sort((a, b) => b.value - a.value)\n\n const maxValue = d3.max(items, d => d.value) || 1\n const barHeight = 0\n const gap = 4\n const fullWidth = 0\n\n const bars = items.map(d => {\n const w = Math.max(2, (d.value / maxValue) * fullWidth)\n return `

`\n }).join(\"\")\n\n return `

${bars}

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"#### Pour ne pas avoir à se coltiner tout ça dans plot","pinned":false,"hidden":false,"mode":"md"},{"id":360,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"function nodeTooltipHTML(d) {\n const {totalOut, totalIn} = nodeTotals.get(d.label)\n const c = colorScale(d.label)\n const isOrigin = d.id.endsWith(\"_O\")\n const totalLabel = isOrigin ? \"Total partants\" : \"Total arrivants\"\n const value = isOrigin ? totalOut : totalIn\n const miniBars = buildMiniBars(d.label, isOrigin ? \"out\" : \"in\")\n\n return `

\n ${d.label}
\n ${totalLabel} : ${Math.round(value).toLocaleString(\"fr-FR\")}\n ${miniBars}\n

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"### Fonctions et css","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"$34","pinned":false,"hidden":false,"mode":"html"},{"id":192,"value":"import {legend, cssLegend, toggle, cssToggle} from \"@wsthevenin/mtinput\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"cssLegend","pinned":true,"hidden":false,"mode":"ojs"},{"id":620,"value":"cssToggle","pinned":true,"hidden":false,"mode":"ojs"},{"id":622,"value":"### Synthèse","pinned":false,"hidden":false,"mode":"md"},{"id":626,"value":"viewof choixSynthese = toggle({label:\"Afficher la synthèse\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"choixSynthese","pinned":true,"hidden":false,"mode":"ojs"},{"id":425,"value":"domain = new Set(source.map(d=>d.origine))","pinned":true,"hidden":false,"mode":"ojs"},{"id":478,"value":"Ajouter les soldes? Information synthétique sur les flux internes","pinned":false,"hidden":false,"mode":"md"},{"id":458,"value":"synthese = {\n const total = d3.sum(source, d => d.valeur);\n const intra = d3.sum(source.filter(d => d.origine === d.destination), d => d.valeur);\n const rows = config.domain.map(z => {\n const out = d3.sum(source.filter(d => d.origine === z), d => d.valeur); \n const inn = d3.sum(source.filter(d => d.destination === z), d => d.valeur);\n \n const totalZ = d3.sum(source.filter(d=>d.origine === z), d => d.valeur);\n const intraZ = d3.sum(source.filter(d => d.origine === d.destination && d.origine === z), d => d.valeur);\n \n return {zone: z, sorties: Math.round(out), entrées: Math.round(inn), solde: Math.round(inn - out),totalZ, intraZ, pIntraZ: intraZ/totalZ*100};\n });\n return {\n total: Math.round(total),\n fluxIntraZone: Math.round(intra),\n partIntraZone: (100 * intra / total).toFixed(1) + \" %\",\n bilans: rows\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":485,"value":"dfSynt = synthese.bilans","pinned":true,"hidden":false,"mode":"ojs"},{"id":499,"value":"df = dfSynt.flatMap(({ zone, sorties, entrées, solde }) => [\n { zone, type: \"Départs\", n: sorties },\n { zone, type: \"Arrivées\", n: entrées },\n { zone, type: \"solde\", n: solde },\n]).filter(d=> d.type!=\"solde\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":540,"value":"df2 = df.filter(d=> choixZone.includes(d.zone))","pinned":true,"hidden":false,"mode":"ojs"},{"id":709,"value":"viewof legendSynthese = legend(config.domain,config.range, {interactive:false, swatchWidth:20, scale:.8})","pinned":true,"hidden":false,"mode":"ojs"},{"id":945,"value":"viewof rWidth = {\n const div = html`

`;\n const ro = new ResizeObserver(entries => {\n const w = entries[0].contentRect.width;\n if (w > 0 && w !== div.value) {\n div.value = w;\n div.dispatchEvent(new CustomEvent(\"input\"));\n }\n });\n ro.observe(div);\n div.value = div.getBoundingClientRect().width || 800;\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":503,"value":"plotTot = Plot.plot({\n\nwidth: rWidth,\n\n marginLeft: rWidth>600 ? 100 : 70,\n marginRight: config.margin.right-50,\n marginTop:0, \n \nsubtitle: \"Volumes\", \n \nx: {ticks:width>600 ? 5 : 2, tickFormat: d=> d.toLocaleString(\"fr\"), label: null,domain:[0,synthese.total], grid: true}, \ny: {ticks:width>600 ? 5 : 3, label: null, tickSize:0, domain: [\"Départs\", \"Arrivées\"]}, \n \ncolor: {legend:false, domain:domain,range:[pal100[0],pal100[2],pal100[3],pal100[4],pal100[5]]},\n \nmarks: [ \nPlot.barX(df,{x:\"n\", y:\"type\", fill:\"zone\"}) \n]\n \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":573,"value":"plotSolde = Plot.plot({\n\nwidth: rWidth,\n\n marginLeft: rWidth>600 ? 100 : 70,\n marginRight: config.margin.right-50, \n marginTop:0, \n\n subtitle: \"Soldes\", \n \nx: {ticks:width>600 ? 5 : 3, tickFormat: d=> d.toLocaleString(\"fr\"), label: null, grid: true,\n //domain:[0,synthese.total]\n }, \ny: {ticks:width>600 ? 5 : 3, label: null, tickSize:0, axis:false}, \n \ncolor: {legend:false, domain:domain,range:[pal100[0],pal100[2],pal100[3],pal100[4],pal100[5]]},\n \nmarks: [\n\nPlot.barX(dfSynt,{x:\"solde\", y: \"zone\", fill: d=> d.zone===\"Urbain\" ? pal100[0] :\n d.zone===\"Petites polarités\" ? pal100[2] :\n d.zone===\"Ruralités productives\" ? pal100[3] :\n d.zone===\"Ruralités touristiques\" ? pal100[4] :\n pal100[5], \n sort: {y: \"x\"},\n \n }),\nPlot.ruleX([0], {strokeWidth:.5}), \n]\n \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":702,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":558,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"display = choixSynthese === true ? html`

${viewof sens} ${viewof choixZone}

\n ${animatedPlot}\n

${viewof choixSynthese} ${cssToggle}

\n ${boxPlotSynthese} ${cssToggle}` :\n html`

${viewof sens} ${viewof choixZone}

\n ${animatedPlot}\n

${viewof choixSynthese} ${cssToggle}

` ","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}