2a:null 2b:["$","title",null,{"children":"Projet état des lieux de la dataVizIned 2026 - Packed circles - Work In Progress | Marc Thevenin | Observable"}] 30:T477,boxPlot1 = htl.html`

${title}

Les liens vers les pages sur le site de l'Ined, ou vers les notebooks d'Observable pour les visualisations en cours (graphiques interprétés) sont dans les vignettes au passage de la souris

On peut zoomer sur les différentes rubriques

${plotTssp}

` 31:T3205,plotTssp = { const height = 800; // ── Rayon ───────────────── const root = d3.hierarchy(tssp) .sum(d => d.value ?? 0) .sort((a, b) => b.value - a.value); const pack = d3.pack() .size([width - 4, height - 4]) .padding(4); pack(root); // Repositionnement des cercles en bas du parent ────────────────── function layoutChildren(parent) { if (!parent.children || parent.children.length === 0) return; const children = parent.children; const pr = parent.r; const padding = 3; children.forEach(d => { d.x -= parent.x; d.y -= parent.y; }); const sim = d3.forceSimulation(children) .force("gravity", d3.forceY(pr * 0.5).strength(0.15)) .force("centerX", d3.forceX(0).strength(0.02)) .force("collide", d3.forceCollide(d => d.r + padding).strength(1).iterations(6)) .force("contain", () => { for (const d of children) { const dist = Math.hypot(d.x, d.y); const maxDist = pr - d.r - padding; if (dist > maxDist && dist > 0) { d.x = (d.x / dist) * maxDist; d.y = (d.y / dist) * maxDist; } } }) .stop(); for (let i = 0; i < 400; i++) sim.tick(); children.forEach(d => { d.x += parent.x; d.y += parent.y; }); children.forEach(layoutChildren); } layoutChildren(root); // ── SVG ───────────────────────────────────────────────────────────────── const svg = d3.create("svg") .attr("width", width -100) .attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`) .attr("font-family", "Poppins, sans-serif") .attr("font-size", 13) .style("background", "white") .style("cursor", "pointer"); svg.append("defs").append("clipPath") .attr("id", "clip-view") .append("rect") .attr("width", width) .attr("height", height); const g = svg.append("g") .attr("clip-path", "url(#clip-view)") .style("will-change", "transform"); // hint navigateur : optimiser les transitions de transform // ── Tooltip ───────────────────────────────────────────────────────────────── // État : null = caché, "hover" = survol, "pinned" = épinglé au clic let tooltipState = null; let pinnedDatum = null; const tooltip = d3.select(document.body).append("div") .style("position", "absolute") .style("background", "#850600") .style("color", "#fff") .style("padding", "8px 28px 8px 10px") // padding-right pour la croix .style("border-radius", "8px") .style("pointer-events", "none") .style("font-size", "clamp(11px,2cqw,14px") .style("display", "none") .style("font-family", "Poppins, sans-serif") .style("max-width", "220px") .style("box-shadow", "0 4px 12px rgba(0,0,0,0.3)") .style("transition", "opacity 0.15s"); // Croix de fermeture (visible seulement quand épinglé) const closeBtn = tooltip.append("span") .style("position", "absolute") .style("top", "5px") .style("right", "7px") .style("font-size", "14px") .style("line-height", "1") .style("cursor", "pointer") .style("opacity", "0.7") .style("display", "none") .style("pointer-events", "all") .text("✕") .on("click", () => hideTooltip()); // Contenu du tooltip (div séparé pour ne pas interférer avec la croix) const tooltipContent = tooltip.append("div"); invalidation.then(() => tooltip.remove()); function showTooltip(d, x, y) { tooltipContent.html( `${d.data.name}
${d.data.remarque ?? ""}` + (d.data.vignette ? `

` : "") + (d.data.lien ? `
🔗 Lien vers le graphique (site ined ou notebook)` : "") ); tooltip .style("display", "block") .style("left", (x + 14) + "px") .style("top", (y - 28) + "px"); } function pinTooltip(d, x, y) { pinnedDatum = d; tooltipState = "pinned"; showTooltip(d, x, y); tooltip .style("pointer-events", "all") .style("outline", `2px solid white`); closeBtn.style("display", "block"); } function hideTooltip() { tooltipState = null; pinnedDatum = null; tooltip .style("display", "none") .style("pointer-events", "none") .style("outline", "none"); closeBtn.style("display", "none"); } // ── texte via canvas ────────────────────────────────────────────── const _canvas = document.createElement("canvas"); const _ctx = _canvas.getContext("2d"); function measureText(text, fontSize) { _ctx.font = `${fontSize}px Poppins, sans-serif`; return _ctx.measureText(text).width; } function splitLines(text, fontSize, maxWidth) { const words = String(text).split(" "); const lines = []; let current = ""; for (const word of words) { const candidate = current ? current + " " + word : word; if (measureText(candidate, fontSize) <= maxWidth) { current = candidate; } else { if (current) lines.push(current); current = word; } } if (current) lines.push(current); return lines; } function applyLines(textEl, lines, lineHeight, startY) { textEl.attr("y", startY); textEl.selectAll("tspan").remove(); lines.forEach((line, i) => { textEl.append("tspan") .attr("x", 0) .attr("dy", i === 0 ? 0 : lineHeight) .text(line); }); } // ── Palette de couleurs (sélectionnée via l'input radio) ────────────────── // colorScheme = [depth0, depth1, depth2, depth3+] const fillFor = d => colorScheme[Math.min(d.depth, colorScheme.length - 1)]; // ── Zoom state ────────────────────────────────────────────────────────────── let currentFocus = root; const ZOOM_DURATION = 650; const ZOOM_EASE = d3.easeCubicOut; const shadow = DOM.uid("shadow"); svg.append("filter") .attr("id", shadow.id) .append("feDropShadow") .attr("flood-opacity", 0.3) .attr("dx", 0) .attr("dy", 5); const node = g.selectAll("g") .data(root.descendants()) .join("g") .attr("filter", shadow) .attr("transform", d => `translate(${d.x},${d.y})`); const circle = node.append("circle") .attr("r", d => d.r) .attr("fill", fillFor) .attr("stroke", "white") .attr("stroke-width", 0.8) .style("cursor", d => (d.depth > 0 && d.children) ? "zoom-in" : d.children ? "default" : "pointer") .on("mouseover", (event, d) => { if (tooltipState === "pinned") return; // ne pas écraser un tooltip épinglé tooltipState = "hover"; showTooltip(d, event.pageX, event.pageY); }) .on("mousemove", (event) => { if (tooltipState !== "hover") return; tooltip .style("left", (event.pageX + 14) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", () => { if (tooltipState === "hover") { tooltipState = null; tooltip.style("display", "none"); } }) .on("click", (event, d) => { event.stopPropagation(); // Gestion du tooltip épinglé if (tooltipState === "pinned" && pinnedDatum === d) { // Même bulle → désépingler hideTooltip(); } else { // Nouvelle bulle ou pas encore épinglé → épingler pinTooltip(d, event.pageX, event.pageY); } // Zoom (uniquement pour les nœuds intermédiaires) if (d.depth > 0 && d.children) zoomTo(d); }); // Labels dernier niveau — node.filter(d => !d.children && d.r > 18) .append("text") .attr("text-anchor", "middle") .attr("fill", "#222330") .attr("font-weight", "normal") .attr("pointer-events", "none") .each(function(d) { const fontSize = Math.min(d.r / 3.5, 13); const lineHeight = fontSize * 1.1; const maxWidth = d.r * 1.01; const lines = splitLines(d.data.name, fontSize, maxWidth); const blockHeight = lines.length * lineHeight; const startY = -blockHeight / 2 + fontSize * 0.35; d3.select(this).attr("font-size", fontSize); applyLines(d3.select(this), lines, lineHeight, startY); }); // Labels intermédiaires — en HAUT du cercle node.filter(d => d.children && d.r > 14 && d.depth > 0) .append("text") .attr("text-anchor", "middle") .attr("fill", "#222330") .attr("font-weight", "bold") .attr("pointer-events", "none") .each(function(d) { const fontSize = Math.min(d.r / 3.5, 13); const lineHeight = fontSize * 1.01; const maxWidth = d.r * 1.7; const lines = splitLines(d.data.name, fontSize, maxWidth); const startY = -d.r + fontSize + 12; d3.select(this).attr("font-size", fontSize); applyLines(d3.select(this), lines, lineHeight, startY); }); // Hint const hint = svg.append("text") .attr("x", width/2) .attr("y", height +20) .attr("text-anchor", "middle") .attr("font-size", 15) .attr("fill", "#414141") .text("Cliquez sur un cercle pour épingler le tooltip · Cliquez sur le fond pour revenir"); // Bouton retour const backBtn = svg.append("g") .attr("transform", "translate(16, 16)") .style("cursor", "pointer") .style("display", "none") .on("click", () => zoomTo(root)); backBtn.append("rect") .attr("rx", 6).attr("ry", 6) .attr("width", 110).attr("height", 28) .attr("fill", "#ffffff").attr("opacity", 0.85); backBtn.append("text") .attr("x", 55).attr("y", 19) .attr("text-anchor", "middle") .attr("fill", "#222330") .attr("font-size", 12) .attr("font-weight", "bold") .text("← Vue globale"); // Clic sur le fond → dézoom + désépingler svg.on("click", () => { hideTooltip(); if (currentFocus !== root) zoomTo(root); }); // Suivi du timer d'activation/désactivation des ombres pour éviter les conflits let shadowTimer = null; function zoomTo(focus) { currentFocus = focus; const isRoot = focus === root; const scale = isRoot ? 1 : Math.min(width, height) / (2 * focus.r) * 0.92; const tx = isRoot ? 0 : width / 2 - focus.x * scale; const ty = isRoot ? 0 : height / 2 - focus.y * scale; // Stoppe toute transition en cours pour éviter les à-coups en cas de double-clic g.interrupt(); node.interrupt(); if (shadowTimer) clearTimeout(shadowTimer); // Les ombres portées (feDropShadow) forcent le navigateur à re-rasteriser // chaque bulle à chaque frame pendant un changement d'échelle : on les // désactive le temps de l'animation pour un rendu bien plus fluide, // puis on les réactive une fois la transition terminée. node.attr("filter", null); const t = g.transition() .duration(ZOOM_DURATION) .ease(ZOOM_EASE) .attr("transform", `translate(${tx},${ty}) scale(${scale})`) .on("end interrupt", () => { shadowTimer = setTimeout(() => node.attr("filter", shadow), 50); }); // Le fondu des bulles hors-cadre suit la même durée/ease que le zoom // pour une transition cohérente et sans saccade. node.transition(t) .style("opacity", d => { if (isRoot) return 1; let a = d; while (a) { if (a === focus) return 1; a = a.parent; } return 0.08; }); // Les changements non-visuels (pointer-events, curseur) sont appliqués // immédiatement, sans transition, pour ne pas alourdir l'animation. node.style("pointer-events", d => { if (isRoot) return null; let a = d; while (a) { if (a === focus) return null; a = a.parent; } return "none"; }); circle.style("cursor", d => { if (isRoot) return (d.depth > 0 && d.children) ? "zoom-in" : d.children ? "default" : "pointer"; return d.children ? "default" : "pointer"; }); backBtn.style("display", isRoot ? "none" : null); hint.text(isRoot ? "Cliquez sur une bulle pour épingler le tooltip · Cliquez sur le fond pour revenir" : `Zoom sur « ${focus.data.name} » · Cliquez sur le fond ou ← pour revenir`); } return svg.node(); }32:T47a,tssp = { const root = { name: "Tout Savoir Sur la Population", remarque: "Contenu avec graphique dynamique et/ou intéractif dans cette section du site de l'Ined", vignette: "", children: [] }; for (const row of data) { // niveau1 let n1 = root.children.find(d => d.name === row.niveau2); if (!n1) { n1 = { name: row.niveau2, remarque: row.remarque2 ?? "-", vignette: "", children: [] }; root.children.push(n1); } // niveau2 const n2key = String(row.niveau3); let n2 = n1.children.find(d => d.name === n2key); if (!n2) { n2 = { name: n2key, remarque: row.remarque3 ?? "-", vignette: row.vignette ?? "", lien: row.Lien ?? "", children: [] }; n1.children.push(n2); } // niveau3 (leaf) if (row.niveau4 != null) { n2.children.push({ name: row.niveau4, remarque: row.remarque4, value: row.value4 ?? 1, vignette: row.vignette, lien: row.Lien}); } else { n2.value = row.value3 ?? 1; delete n2.children; } } return root; }33:[{"id":"7f0a6c33db6a8c822262c6aa85d0ad747625bea0f8e035af496efca66127fb4253846acdea25f9566de3ad8299d89af9c11c1d2e4a9b824f7d3e54245f21fbcb","href":"https://static.observableusercontent.com/files/7f0a6c33db6a8c822262c6aa85d0ad747625bea0f8e035af496efca66127fb4253846acdea25f9566de3ad8299d89af9c11c1d2e4a9b824f7d3e54245f21fbcb","name":"data@48.csv","type":"text/csv","lastModified":1787566104276.43,"size":11363},{"id":"c62aa8c3a0eea506a5d46482a633a0cf974201163faf325278ce98f6298b876e77851e406effdfb07e12c6ff604ad0b87527de7d2203a410474f94482b1e4841","href":"https://static.observableusercontent.com/files/c62aa8c3a0eea506a5d46482a633a0cf974201163faf325278ce98f6298b876e77851e406effdfb07e12c6ff604ad0b87527de7d2203a410474f94482b1e4841","name":"data@49.csv","type":"text/csv","lastModified":1788162449042.847,"size":11242},{"id":"352c5f52691c606a32f49840f720a131ec258b79e7b6ec7b70201db96b309890ed173186982bbf3e941f303bcdbac879cb8fcd31d7bd3ac689301356a106a982","href":"https://static.observableusercontent.com/files/352c5f52691c606a32f49840f720a131ec258b79e7b6ec7b70201db96b309890ed173186982bbf3e941f303bcdbac879cb8fcd31d7bd3ac689301356a106a982","name":"data@45.csv","type":"text/csv","lastModified":1784202805832.991,"size":10261},{"id":"38c6f4e620a4368ca2a6c2982142a50ef634f8ad08376791f6ba17639ef7c896409e2e65c6e3851e3ac03ab26fc8b38f2c00ea4b1d2654f3d4a38853343291d7","href":"https://static.observableusercontent.com/files/38c6f4e620a4368ca2a6c2982142a50ef634f8ad08376791f6ba17639ef7c896409e2e65c6e3851e3ac03ab26fc8b38f2c00ea4b1d2654f3d4a38853343291d7","name":"data@41.csv","type":"text/csv","lastModified":1784196558642.435,"size":8002},{"id":"3165fc4b20e49bee4d30248ae5f9d72e3204d6dd2da5dc6b6c0515ef3b8fded2a7baa7808e73ec0fb03350f8121eeae3f4e4bd03e0cb4b6a4c289d35f9733cef","href":"https://static.observableusercontent.com/files/3165fc4b20e49bee4d30248ae5f9d72e3204d6dd2da5dc6b6c0515ef3b8fded2a7baa7808e73ec0fb03350f8121eeae3f4e4bd03e0cb4b6a4c289d35f9733cef","name":"data@42.csv","type":"text/csv","lastModified":1784196691186.548,"size":7978},{"id":"99e4b1e27dbd19db409513c0acb839a333dfe2fc32e26506d2bb07b4a4e9af8c1221203a96a262bd6d8df72189264546f0ef225145e70d008775e29d1b107d22","href":"https://static.observableusercontent.com/files/99e4b1e27dbd19db409513c0acb839a333dfe2fc32e26506d2bb07b4a4e9af8c1221203a96a262bd6d8df72189264546f0ef225145e70d008775e29d1b107d22","name":"data@43.csv","type":"text/csv","lastModified":1784197777327.634,"size":8557},{"id":"f938178559de46f95920b0691d8d59c6f33bffd8a0e2ccc3e1f2498c4fc3511b71c9a7cbb20da72a9e46c5dda614dae6e9294d55652f4e650ba6ab17c06c2ecf","href":"https://static.observableusercontent.com/files/f938178559de46f95920b0691d8d59c6f33bffd8a0e2ccc3e1f2498c4fc3511b71c9a7cbb20da72a9e46c5dda614dae6e9294d55652f4e650ba6ab17c06c2ecf","name":"data@44.csv","type":"text/csv","lastModified":1784199178437.155,"size":9419},{"id":"6873f99f27e2dedb0d33d5a0d9b200d8d51c345069944389d04aaf425fc13097cf6eedcfd58480f374b8e5d0c1c3a7890628748b1eace71cec734dcd828c4cf1","href":"https://static.observableusercontent.com/files/6873f99f27e2dedb0d33d5a0d9b200d8d51c345069944389d04aaf425fc13097cf6eedcfd58480f374b8e5d0c1c3a7890628748b1eace71cec734dcd828c4cf1","name":"data@46.csv","type":"text/csv","lastModified":1787226519964.567,"size":11534},{"id":"7f0a6c33db6a8c822262c6aa85d0ad747625bea0f8e035af496efca66127fb4253846acdea25f9566de3ad8299d89af9c11c1d2e4a9b824f7d3e54245f21fbcb","href":"https://static.observableusercontent.com/files/7f0a6c33db6a8c822262c6aa85d0ad747625bea0f8e035af496efca66127fb4253846acdea25f9566de3ad8299d89af9c11c1d2e4a9b824f7d3e54245f21fbcb","name":"data@47.csv","type":"text/csv","lastModified":1787295436021.999,"size":11363},{"id":"070b55da42b58034fdee23e179b1ef99f705dd385e8cdaa577aeffeaac94ff93620d2f00f36cb2e323b02074665afe966d1dd399d315ff22c5a86253a25ae9f5","href":"https://static.observableusercontent.com/files/070b55da42b58034fdee23e179b1ef99f705dd385e8cdaa577aeffeaac94ff93620d2f00f36cb2e323b02074665afe966d1dd399d315ff22c5a86253a25ae9f5","name":"data@53.csv","type":"text/csv","lastModified":1789631196831.722,"size":11251},{"id":"c12a8dd0eaf7a1f59e8d5dce46603a2afa6ed251303b1b5e3e15ceb221163a9f2a593baaf40cdfb1b120122070916d677560838dc0f58a06136d8ff5d9974b22","href":"https://static.observableusercontent.com/files/c12a8dd0eaf7a1f59e8d5dce46603a2afa6ed251303b1b5e3e15ceb221163a9f2a593baaf40cdfb1b120122070916d677560838dc0f58a06136d8ff5d9974b22","name":"data@50.csv","type":"text/csv","lastModified":1789625596287.338,"size":11234},{"id":"76ab9852aa49b6748156ced9b409ebce6f93b9e6889b276d3ac4b66a56a438e65b29dba9af06d6667f56ad27892686d4f899e0a509517991b8be89b631c70646","href":"https://static.observableusercontent.com/files/76ab9852aa49b6748156ced9b409ebce6f93b9e6889b276d3ac4b66a56a438e65b29dba9af06d6667f56ad27892686d4f899e0a509517991b8be89b631c70646","name":"data@52.csv","type":"text/csv","lastModified":1789631146637.074,"size":11242},{"id":"76ab9852aa49b6748156ced9b409ebce6f93b9e6889b276d3ac4b66a56a438e65b29dba9af06d6667f56ad27892686d4f899e0a509517991b8be89b631c70646","href":"https://static.observableusercontent.com/files/76ab9852aa49b6748156ced9b409ebce6f93b9e6889b276d3ac4b66a56a438e65b29dba9af06d6667f56ad27892686d4f899e0a509517991b8be89b631c70646","name":"data@51.csv","type":"text/csv","lastModified":1789626738938.885,"size":11242}] 2e:{"id":"660a0736f3a0ff7f","slug":"cartovizined","title":"Projet état des lieux de la dataVizIned 2026 - Packed circles - Work In Progress","thumbnail":"22c75634981d65615f36f5f5072d007d70ce344facd29b5c0dc59fcf3679f729","access_level":"public","create_time":"$D2026-07-15T07:09:00.314Z","update_time":"$D2026-09-17T07:46:36.635Z","view_time":null,"first_public_time":"$D2026-07-16T07:54:29.545Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/6ae55bec6f9ba0bbe9597b60f19a08df8d2f5b06630eb6929919d0306a71b058","tier":"free_2026"},"version":488,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/ff86d75fca849a58a73d37988818fed6fa039e41541174c8654ac020ffc491f5","tier":null}],"members":[{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/6ae55bec6f9ba0bbe9597b60f19a08df8d2f5b06630eb6929919d0306a71b058","tier":"free_2026","role":"editor"}],"comments":[{"id":"04ca4c515d89d53d","reply_to_id":null,"content":"=> Prévoir quelque chose pour les Populations et Sociétés.\n=> les regroupements sont fait sur mon activité, \n=> Graphique interprétés <=> fabstat ????\n=> Où rentre la pyramide des âges","create_time":"$D2026-07-17T06:15:28.441Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/ff86d75fca849a58a73d37988818fed6fa039e41541174c8654ac020ffc491f5","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"07b353288c97ff3c","slug":"divers/2","title":"Divers","owner":{"id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin"}},"type":"notebook","body":{"titling":"auto","title":"Projet état des lieux de la dataVizIned 2026 - Packed circles - Work In Progress","cells":[{"id":1,"value":"# Projet état des lieux de la dataVizIned 2026 - Packed circles - Work In Progress","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"title = html`

Tout Savoir sur la population

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"palRouge = [\"#ff564e\", \"#ffaaa6\", \"#ffdddc\", \"#ffffff\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"palGray = [\"#6e6e6e\", \"#a6a6a6\", \"#d6d6d6\", \"#ffffff\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"viewof colorScheme = Inputs.radio(\n new Map([\n [\"🔴 Rouge (actuel)\", palRouge],\n [\"⬛ Grayscale C (foncé → clair)\", palGray]\n ]),\n {label: \"Palette de couleurs (test)\", value: palRouge}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"pal100 = [\n \"#ff564e\", //rouge 0\n \"#ff7aad\", //rose 1\n \"#522673\", //mauve 2 \n \"#2361ff\", //bleu 3\n \"#5cd49e\", //vert 4 \n \"#ffb322\", //jaune 5\n \"#4f4f4f\", //gray 6\n \"#0036bc\", //blue dark 7\n \"#44ce90\", //green dark +40% 8\n \"#ff362d\", //red dark +10% 9\n \"#e6a527\", //dark yellow 10\n \n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"//df = FileAttachment(\"data@45.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"df = FileAttachment(\"data@53.csv\").csv({typed:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"data = df.filter(d=> d.niveau1===\"Tout savoir sur la population\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"X = {\n const root = { name: \"root\", children: [] };\n\n for (const row of data) {\n // niveau1\n let n1 = root.children.find(d => d.name === row.niveau1);\n if (!n1) {\n n1 = { name: row.niveau1, children: [] };\n root.children.push(n1);\n }\n\n // niveau2\n const n2key = String(row.niveau2);\n let n2 = n1.children.find(d => d.name === n2key);\n if (!n2) {\n n2 = { name: n2key, children: [] };\n n1.children.push(n2);\n }\n\n // niveau3\n let n3 = n2.children.find(d => d.name === row.niveau3);\n if (!n3) {\n n3 = { name: row.niveau3, children: [] };\n n2.children.push(n3);\n }\n\n // niveau4 (leaf)\n if (row.niveau4 != null) {\n n3.children.push({ name: row.niveau4, value: row.value4 ?? 1 });\n } else {\n n3.value = row.value3 ?? 1;\n delete n3.children;\n }\n }\n\n return root;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"#### Tout savoir sur la population","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":442,"value":"data[21]","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2"}} 2f:"$2e:body"