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:T478,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:Tc33,graph5 = { let v = viz.create({ domain: vietN, projection: "mercator", zoomable: false, width: width>600 ? 330 : 270, margin: [40,15,50,40], }); v.plot({ type: "outline", fill: "#b5dffd" }); v.path({ data: pays, fill: "#f1f1f1", stroke: "#d1d1d1", strokeWidth: 1.3, }); const data = vietN.features.map((d) => d.properties.n); const choro = viz.tool.choro(data, { breaks: [106,109,112,115,118,121], colors: "Reds", }); v.path({ data: vietN, fill: (d) => choro.colorize(d.properties.n), stroke: "#222330", strokeWidth: .5, tip: true, tip: d=> `Viêt Nam\n${d.properties.region}\n${d.properties.n.toFixed(1).replace(".",",")}`, tipstyle: { background: "white", stroke: "transparent", strokeWidth: 1, fontFamily: "Poppins", textDecoration: "none", overFill: (d) => choro.colorize(d.properties.n), overOpacity: 1, overFillOpacity: 1, overStroke: "#222330", overStrokeOpacity: 1, overStrokeWidth: .5, raise: true }, filter: v.effect.shadow({ stdDeviation: 1.5, fill: "#222330", fillOpacity: 1, dx: 2, dy: 2 }) }); // v.scalebar({ // tickValues: [0, 100], // distance: 200, // label: "Kilomètres", // }); // Texte pays et mers // cambodge v.text({ pos: [104.90370390000567,12.717655000614434], coords: "geo", text: "Cambodge", fontSize: 14, textAnchor:"middle", fontFamily: "poppins", fill: "#222330" }); // laos v.text({ pos: [102.77433185772236,19.5], coords: "geo", text: "Laos", fontSize: 14, textAnchor:"middle", fontFamily: "poppins", fill: "#222330" }); // Thailande v.text({ pos: [102.90641100652027,16.101036761473608], coords: "geo", text: "Thailande", fontSize: 14, textAnchor:"middle", fontFamily: "poppins", fill: "#222330" }); // laos v.text({ pos: [102.77433185772236,23.5], coords: "geo", text: "Chine", fontSize: 14, textAnchor:"middle", fontFamily: "poppins", fill: "#222330" }); // golfe thailande v.text({ pos: [102.40370390000567,10.417655000614434], coords: "geo", text: "Golfe\nde\nThaïlande", fontSize: 10, textAnchor:"middle", fontFamily: "poppins", fill: "#222330" }); // mer de chine méridionale v.text({ pos: [108.80641100652027,17.201036761473608], coords: "geo", text: "Mer\nde Chine\nméridionale", fontSize: 10, textAnchor:"middle", fontFamily: "poppins", fill: "#222330" }); // Golde du Tonkin v.text({ pos: [108.57433185772236,20.5], coords: "geo", text: "Golde\ndu\nTonkin", fontSize: 10, textAnchor:"middle", fontFamily: "poppins", fill: "#222330" }); return v.render(); }34:[{"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}] 2f:{"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"},{"id":233,"value":"title = html`

Tout Savoir sur la population

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"palRouge = [\"#ff564e\", \"#ffaaa6\", \"#ffdddc\", \"#ffffff\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"boxPlot1 = htl.html`\n\n

\n${title}\n\n

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/fabstat) sont inclus aux vignettes

\n${plotTssp}\n\n

\n\n\n\n` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"palGray = [\"#6e6e6e\", \"#a6a6a6\", \"#d6d6d6\", \"#ffffff\"]","pinned":true,"hidden":false,"mode":"ojs"},{"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":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":19,"value":"//df = FileAttachment(\"data@45.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"df = FileAttachment(\"data@49.csv\").csv({typed:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"data = df.filter(d=> d.niveau1===\"Tout savoir sur la population\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":100,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"#### Tout savoir sur la population","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":377,"value":"// Hiérarchie factice pour comparer les schémas de couleur\ndemoData = {\n const mk = (n, r) => ({name: `n${n}`, value: r});\n return {\n name: \"root\",\n children: d3.range(3).map(i => ({\n name: `A${i}`,\n children: d3.range(4).map(j => ({\n name: `B${i}${j}`,\n children: d3.range(3).map(k => mk(`${i}${j}${k}`, 5 + Math.random()*15))\n }))\n }))\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"chroma = (await import(\"https://cdn.jsdelivr.net/npm/chroma-js@2/+esm\")).default\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":470,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"2","titling":"auto"}