28:null 29:["$","title",null,{"children":"New Graph D3.js FR (4555) | Marc Thevenin | Observable"}] 2e:T799,graphBoxPlot = { plot._update(checkbox); return htl.html`

${viewof rWidth}

${viewof checkbox} ${cssLegend}

${plot}

Champ : France.

Source : Insee – RRP 2017 (EAR 2015 à 2019)

`; }2f:Taa2,30:T1ded,plot = (containerWidth => { const marginTop = 30, marginRight = rWidth>600 ? 75 : 60, marginBottom = 40, marginLeft = rWidth>600 ? 55 : 35; const wrapper = document.createElement("div"); wrapper.style.cssText = "width:100%;"; const xScale = d3.scaleLinear().domain([-0.7, 0.7]); const yScale = d3.scaleLinear().domain([d3.min(pivotH, d => d.age), 110]); const colorScale = d3.scaleOrdinal().domain(structureListe).range(range2); const areaGen = d3.area() .curve(d3.curveCatmullRom) .y(d => yScale(d.age)) .x0(d => xScale(d.x0)) .x1(d => xScale(d.x1)); const svg = d3.select(wrapper).append("svg") .attr("style", "max-width:100%; height:auto; display:block; font-family: poppins, sans-serif;"); const gBg = svg.append("g"); const gLayersH = svg.append("g"); const gLayersF = svg.append("g"); const gRule = svg.append("g"); const gAxisX = svg.append("g"); const gAxisY = svg.append("g"); const gLabels = svg.append("g"); const gAxisLabels = svg.append("g"); const gPointer = svg.append("g").style("pointer-events", "none"); function totalPoints(pivot) { return pivot.map(d => ({age: d.age, x0: 0, x1: d3.sum(structureListe, k => d[k])})); } const bgH = totalPoints(pivotH), bgF = totalPoints(pivotF); function stackFor(pivot, selectedSet) { const zeroed = pivot.map(d => { const obj = {age: d.age}; for (const k of structureListe) obj[k] = selectedSet.has(k) ? d[k] : 0; return obj; }); const stacked = d3.stack().keys(structureListe)(zeroed); return structureListe.map((k, i) => ({ key: k, points: stacked[i].map((p, j) => ({age: zeroed[j].age, x0: p[0], x1: p[1]})) })); } let currentSelection = structureListe; let width = containerWidth || 800; let height = width > 500 ? 0.7 * width : 340; function join(g, layers, animate, stagger) { const sel = g.selectAll("path").data(layers, d => d.key); const entered = sel.enter().append("path") .attr("fill", d => colorScale(d.key)) .attr("fill-opacity", 0.85) .attr("stroke", "#414141") .attr("stroke-width", 1) .attr("d", d => areaGen(d.points)); const merged = entered.merge(sel); if (animate) { merged.transition() .delay(d => stagger ? structureListe.indexOf(d.key) * 90 : 0) .duration(750).ease(d3.easeCubicInOut) .attr("d", d => areaGen(d.points)); } else { merged.attr("d", d => areaGen(d.points)); } sel.exit().remove(); } function render(selectedKeys, animate, stagger) { const selectedSet = new Set(selectedKeys); join(gLayersH, stackFor(pivotH, selectedSet), animate, stagger); join(gLayersF, stackFor(pivotF, selectedSet), animate, stagger); } function draw(w) { width = rWidth; height = rWidth > 600 ? 0.7 * rWidth : 300; xScale.range([marginLeft, width - marginRight]); yScale.range([height - marginBottom, marginTop]); svg.attr("viewBox", [0, 0, width, height]).attr("width", width).attr("height", height); gBg.selectAll("path").data([bgH, bgF]).join("path").attr("fill", "#eaeaea").attr("d", areaGen); gAxisX.attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(xScale).ticks(6).tickFormat(d => Math.abs(d).toString().replace(".", ","))); gAxisY.attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(yScale).tickValues(d3.range(10, 101, 10))); gRule.selectAll("line").data([0]).join("line") .attr("x1", xScale(0)).attr("x2", xScale(0)) .attr("y1", marginTop).attr("y2", height - marginBottom) .attr("stroke", "#222330"); gLabels.selectAll("text").data(["HOMMES", "FEMMES"]).join("text") .attr("x", d => d === "HOMMES" ? xScale(-0.55) : xScale(0.55)) .attr("y", marginTop - 6) .attr("text-anchor", d => d === "HOMMES" ? "start" : "end") .attr("font-size", 12).attr("font-weight", 600).attr("fill", "#414141") .text(d => d); gAxisLabels.selectAll("text.xlabel").data([0]).join("text") .attr("class", "xlabel") .attr("x", xScale(0.7)).attr("y", height - marginBottom + 32) .attr("text-anchor", "end").attr("font-size", 11).attr("fill", "#414141") .text("%"); gAxisLabels.selectAll("text.ylabel").data([0]).join("text") .attr("class", "ylabel") .attr("x", marginLeft - 8).attr("y", yScale(110)) .attr("dy", "0.32em").attr("text-anchor", "end").attr("font-size", 11).attr("fill", "#222330") .text("Âge"); render(currentSelection, false); } // Crosshair et tooltip const ages = pivotH.map(d => d.age); const bisectAge = d3.bisector(d => d).center; const pointerLine = gPointer.append("line").attr("stroke", "#414141").attr("stroke-width", 1).attr("opacity", 0); const pointerLabel = gPointer.append("text").attr("font-size", 11).attr("font-weight", 600).attr("fill", "black").attr("opacity", 0); const overlay = svg.append("rect").attr("fill", "transparent").style("pointer-events", "all"); overlay .on("mousemove", function(event) { const [mx, my] = d3.pointer(event, svg.node()); if (my < marginTop || my > height - marginBottom) { pointerLine.attr("opacity", 0); pointerLabel.attr("opacity", 0); tooltip.hide(); return; } const rawAge = yScale.invert(my); const idx = bisectAge(ages, rawAge); const ageIdx = Math.max(0, Math.min(ages.length - 1, idx)); const age = ages[ageIdx]; const y = yScale(age); pointerLine.attr("x1", marginLeft).attr("x2", width - marginRight).attr("y1", y).attr("y2", y).attr("opacity", 1); pointerLabel.attr("x", width - marginRight + 4).attr("y", y).attr("dy", "0.32em").text(`${age} ans`).attr("opacity", 1); const isHommes = mx < xScale(0); const pivot = isHommes ? pivotH : pivotF; const selectedSet = new Set(currentSelection); const layers = stackFor(pivot, selectedSet); const value = xScale.invert(mx); let found = null; for (const layer of layers) { const p = layer.points[ageIdx]; if (!p) continue; const lo = Math.min(p.x0, p.x1), hi = Math.max(p.x0, p.x1); if (hi - lo > 0 && value >= lo && value <= hi) { found = layer.key; break; } } if (found) { tooltip.show(event.clientX, event.clientY, { sexe: isHommes ? "Hommes" : "Femmes", age, categorie: found, couleur: colorScale(found) }); } else { tooltip.hide(); } }) .on("mouseleave", function() { pointerLine.attr("opacity", 0); pointerLabel.attr("opacity", 0); tooltip.hide(); }); // le resize.observer let roWidth = 0; const ro = new ResizeObserver(entries => { const newW = entries[0].contentRect.width; if (newW > 0 && Math.abs(newW - roWidth) > 1) { roWidth = newW; draw(newW); overlay.attr("width", width).attr("height", height); } }); ro.observe(wrapper); invalidation.then(() => ro.disconnect()); draw(width); overlay.attr("x", 0).attr("y", 0).attr("width", width).attr("height", height); // API accrochée directement au wrapper — pas d'objet séparé, pas de cellule de câblage à côté wrapper._update = (selection) => { const prev = new Set(currentSelection); const next = new Set(selection); const changed = structureListe.filter(k => prev.has(k) !== next.has(k)); if (changed.length === 0) return; // rien à faire, évite tout appel redondant currentSelection = selection; render(selection, true, changed.length > 1); }; return wrapper; })(width)31:T481,tooltip = { const el = d3.select(document.body).append("div") .attr("class", "pyramid-tooltip") .style("position", "fixed") .style("pointer-events", "none") .style("background", "white") .style("border", "1px solid #ccc") .style("border-radius", "4px") .style("padding", "6px 10px") .style("font-size", "clamp(10px,1.5cqw,13px)") // .style("color", "clamp(10px,1.5cqw,13px)x") .style("font-family", "poppins, sans-serif") .style("box-shadow", "0 1px 4px rgba(0,0,0,0.15)") .style("opacity", 0) .style("z-index", 1000); invalidation.then(() => el.remove()); return { show(clientX, clientY, {sexe, age, categorie, couleur}) { el.html(`

${sexe} de ${age} ans
${categorie}

`) .style("left", `${clientX + 14}px`) .style("top", `${clientY + 14}px`) .style("opacity", 1); }, hide() { el.style("opacity", 0); } }; }32:[{"id":"361c28f73a2703f2999b4a25dd9e720e0277ccd1e61b329275dee13bb5435a076b40daa00113558c1bd8de5c81d3f64b79900552db9176ea74dff66b4c38a638","href":"https://static.observableusercontent.com/files/361c28f73a2703f2999b4a25dd9e720e0277ccd1e61b329275dee13bb5435a076b40daa00113558c1bd8de5c81d3f64b79900552db9176ea74dff66b4c38a638","name":"graphH.csv","type":"text/csv","lastModified":1787143290601.495,"size":40455},{"id":"4d63815edfe711b083475d641872426632381ea17d6e30a3f5468bec7040c404fe74f5fa3e50ce08352afd4abecd6859b0b26aa5f7f50c9ef7300a05dfca6cbd","href":"https://static.observableusercontent.com/files/4d63815edfe711b083475d641872426632381ea17d6e30a3f5468bec7040c404fe74f5fa3e50ce08352afd4abecd6859b0b26aa5f7f50c9ef7300a05dfca6cbd","name":"graphF.csv","type":"text/csv","lastModified":1787143323444.617,"size":39889}] 2c:{"id":"1f66188ca12c7d98","slug":null,"title":"New Graph D3.js FR (4555)","thumbnail":"8765397d6df137471412e172fc0bb17758088cdcfb7c524f3ff718702b9c9e00","access_level":"public","create_time":"$D2026-08-18T13:39:33.854Z","update_time":"$D2026-09-18T21:28:16.954Z","view_time":null,"first_public_time":"$D2026-08-18T14:46:55.743Z","has_unpublished_edits":null,"fork":true,"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":1034,"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"},{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/ff86d75fca849a58a73d37988818fed6fa039e41541174c8654ac020ffc491f5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"ebd84fc83a53c8b9","slug":"familles","title":"Familles","owner":{"id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin"}},"type":"notebook","body":{"titling":"auto","title":"New Graph D3.js FR (4555)","cells":[{"id":307,"value":"# New Graph D3.js FR (4555)\n\n* En attendant les données pour plusieurs années afin d'animer tout cela","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":792,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":976,"value":"yearCaption = new Date().getFullYear()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"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":658,"value":"//hommes = d3.csv(\"https://raw.githubusercontent.com/mthevenin/tssp/refs/heads/main/Familles/graphH.csv\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":959,"value":"hommes = FileAttachment(\"graphH.csv\").csv({typed:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"hommes2 =hommes.filter(d=> d.age<111)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"//femmes = d3.csv(\"https://raw.githubusercontent.com/mthevenin/tssp/refs/heads/main/Familles/graphF.csv\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"femmes = FileAttachment(\"graphF.csv\").csv({typed:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"femmes2 =femmes.filter(d=> d.age<111)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"structure = hommes.map(d=> d.structure)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"structureListe = [...new Set(structure)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"domain = structureListe","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"range = [pal100[5], pal100[1], pal100[2], pal100[4], pal100[3], pal100[0]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"range2 = [\"#ff9a96\", pal100[0], \"#91b0ff\", pal100[3], \"#9ee5c5\", pal100[4]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"### Pyramide des âges en 2015 selon la situation familiale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"title","database":"$undefined"},{"id":343,"value":"height = {\n let n;\n if (width>500) {return n=.70*width}\n else {return n=340}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"//import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"//import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$2f","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"cssGraph","database":"$undefined"},{"id":771,"value":"import { legend,cssLegend} from \"@wsthevenin/mtinput\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"## New => aires empilées, lissage, transition)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"function pivotByAge(data, keys) {\n const byAge = d3.groups(data, d => d.age).sort((a, b) => a[0] - b[0]);\n return byAge.map(([age, rows]) => {\n const obj = {age};\n for (const k of keys) obj[k] = 0;\n for (const r of rows) obj[r.structure] = r.c * 100;\n return obj;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"pivotH = pivotByAge(hommes2, structureListe)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"pivotF = pivotByAge(femmes2, structureListe)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"viewof checkbox = legend(domain,range2, {swatchWidth:25}) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 2d:"$2c:body"