viewof sankeyChart = { const width = 1440; const height = 900; const nodeWidth = 20; const labelMargin = 400; const verticalMargin = 10; const { sankey, sankeyLinkHorizontal } = d3sankey; // --- Color palette --- const categoryColors = new Map(Object.entries({ "Group Climate": "#00A5D2", "Concerns Regarding Supervision": "#8DC63F", "Safety, Health, and Physical Environment": "#E9532B", "Peer and Colleague Relationships": "#C8DA2B", "Services/Administrative Concerns": "#F57F29", "Career Progression and Development": "#00B6C9", "Legal and Integrity Issues": "#63CCEC", "External Party": "#BBDD8C", "Values and Ethics Concerns": "#FDB515", "Compensation and Benefits": "#6EA03C" })); // --- Additional color logic --- const defaultConcernColor = "#007DB7"; const interventionPalette = ["#00A5D2", "#00B6C9", "#63CCEC", "#8DC63F", "#C8DA2B", "#F2E600", "#E9532B", "#F57F29", "#FDB515"]; const interventionColor = d3.scaleOrdinal(interventionPalette); const neutralColor = "#007DB7"; const fontFamily = "Inter, Segoe UI, Roboto, sans-serif"; const textColor = "#000"; // --- Detect columns dynamically --- const concernKey = Object.keys(data[0]).find(k => k.toLowerCase().includes("concern")); const issueKey = Object.keys(data[0]).find(k => k.toLowerCase().includes("issue")); const interventionKey = Object.keys(data[0]).find(k => k.toLowerCase().includes("intervention")); const countKey = Object.keys(data[0]).find(k => k.toLowerCase().includes("count")); // --- Dropdown options --- const concernOptions = [...new Set(data.map(d => d[concernKey]).filter(Boolean))]; const interventionOptions = ["All", ...new Set(data.map(d => d[interventionKey]).filter(Boolean))]; // --- Custom select factory --- function createSelect(label, options, defaultValue = "All") { const select = html``; select.addEventListener("focus", () => { select.style.boxShadow = "0 0 0 2px rgba(0, 165, 210, 0.3)"; select.style.borderColor = "#00A5D2"; }); select.addEventListener("blur", () => { select.style.boxShadow = "0 2px 4px rgba(0,0,0,0.05)"; select.style.borderColor = "rgba(0,0,0,0.1)"; }); return { wrapper: html`

${select}

`, select }; } // --- Create both filters --- const { wrapper: interventionFilter, select: interventionSelect } = createSelect("Intervention", interventionOptions); const { wrapper: concernFilter, select: concernSelect } = createSelect("Concern", concernOptions, "Group Climate"); // --- Reset button --- const resetButton = html``; resetButton.onmouseenter = () => { resetButton.style.background = "#005C8A"; resetButton.style.transform = "translateY(-1px)"; }; resetButton.onmouseleave = () => { resetButton.style.background = "#007DB7"; resetButton.style.transform = "translateY(0)"; }; resetButton.onclick = () => { concernSelect.value = "Group Climate"; interventionSelect.value = "All"; updateChart(); }; const filterContainer = html`

Intervention: ${interventionFilter.querySelector("select")}

Concern: ${concernFilter.querySelector("select")} ${resetButton}

`; const container = html`

`; container.append(filterContainer); // --- Function to render chart (no changes to highlight logic) --- function renderChart(filteredData) { const clean = filteredData .map(d => ({ concern: (d[concernKey] || "").trim(), issue: (d[issueKey] || "").trim(), intervention: (d[interventionKey] || "").trim(), count: +d[countKey] || 0 })) .filter(d => d.concern && d.issue && d.intervention && d.count > 0); if (!clean.length) { return html`

⚠️ No data for this filter.

`; } // --- Aggregate duplicates --- const aggregated = Array.from( d3.rollup( clean, v => d3.sum(v, d => d.count), d => d.intervention, d => d.issue, d => d.concern ), ([intervention, issueMap]) => Array.from(issueMap, ([issue, concernMap]) => Array.from(concernMap, ([concern, total]) => ({ intervention, issue, concern, count: total })) ) ).flat(2); // --- Build nodes --- // --- Compute totals for sorting --- const interventionTotals = d3.rollup( aggregated, v => d3.sum(v, d => d.count), d => d.intervention ); const issueTotals = d3.rollup( aggregated, v => d3.sum(v, d => d.count), d => d.issue ); // --- Sort nodes from highest → lowest flow --- const interventions = Array.from(new Set(aggregated.map(d => d.intervention))) .sort((a, b) => (interventionTotals.get(b) || 0) - (interventionTotals.get(a) || 0)); const issues = Array.from(new Set(aggregated.map(d => d.issue))) .sort((a, b) => (issueTotals.get(b) || 0) - (issueTotals.get(a) || 0)); const nodes = [ ...interventions.map(name => ({ name, layer: 0 })), ...issues.map(name => ({ name, layer: 1 })) ]; const nodeIndex = new Map(nodes.map((d, i) => [d.name, i])); const totalCount = d3.sum(aggregated, d => d.count); const scaleFactor = (height - 2 * verticalMargin) / totalCount; const links = aggregated.map(d => ({ source: nodeIndex.get(d.intervention), target: nodeIndex.get(d.issue), value: d.count * scaleFactor, concern: d.concern })); const sankeyGen = sankey() .nodeId((d, i) => i) .nodeWidth(nodeWidth) .nodePadding(12) .extent([ [labelMargin, verticalMargin], [width - labelMargin, height - verticalMargin] ]) .nodeAlign(d3sankey.sankeyLeft) .nodeSort(null) // ← FORCE your custom sort .linkSort(null); // ← keeps link ordering stable const graph = sankeyGen({ nodes: nodes.map(d => ({ ...d })), links: links.map(d => ({ ...d })) }); // --- SVG setup + everything else unchanged --- const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("preserveAspectRatio", "xMidYMid meet") .attr("width", "100%") .attr("height", "auto") .style("background", "#fff"); const defs = svg.append("defs"); const tooltip = html`

`; const chartContainer = html`

${svg.node()}${tooltip}

`; // --- Highlight helpers with smooth fade --- function highlightNode(svg, node) { svg.selectAll(".link") .transition().duration(250) .attr("stroke-opacity", l => l.source === node || l.target === node ? 0.9 : 0.05 ); svg.selectAll(".node") .transition().duration(250) .attr("opacity", n => n === node || graph.links.some(l => (l.source === node && l.target === n) || (l.target === node && l.source === n) ) ? 1 : 0.2 ); svg.selectAll(".label") .transition().duration(250) .style("opacity", l => l === node || graph.links.some(link => (link.source === node && link.target === l) || (link.target === node && link.source === l) ) ? 1 : 0.15 ); } function highlightLink(svg, link) { svg.selectAll(".link") .transition().duration(250) .attr("stroke-opacity", l => (l === link ? 0.9 : 0.05)); svg.selectAll(".node") .transition().duration(250) .attr("opacity", n => (n === link.source || n === link.target ? 1 : 0.2)); svg.selectAll(".label") .transition().duration(250) .style("opacity", l => (l === link.source || l === link.target ? 1 : 0.15)); } function resetHighlight(svg) { svg.selectAll(".link") .transition().duration(200) .attr("stroke-opacity", 0.35); svg.selectAll(".node") .transition().duration(200) .attr("opacity", 1); svg.selectAll(".label") .transition().duration(200) .style("opacity", 0.6); } // --- Links with gradients --- svg.append("g") .attr("fill", "none") .selectAll("path") .data(graph.links) .join("path") .attr("class", "link") .attr("d", sankeyLinkHorizontal()) .attr("stroke", (d, i) => { const sourceColor = d.source.layer === 0 ? interventionColor(d.source.name) : categoryColors.get(d.concern) || defaultConcernColor; let targetColor; const targetNode = d.target; const relatedConcerns = new Set( graph.links.filter(l => l.target.index === targetNode.index).map(l => l.concern) ); targetColor = relatedConcerns.size > 1 ? "#007DB7" : categoryColors.get([...relatedConcerns][0]) || defaultConcernColor; const gradientId = `grad-${i}`; const grad = defs.append("linearGradient") .attr("id", gradientId) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d.source.x1) .attr("x2", d.target.x0) .attr("y1", (d.source.y0 + d.source.y1) / 2) .attr("y2", (d.target.y0 + d.target.y1) / 2); grad.append("stop").attr("offset", "0%").attr("stop-color", sourceColor); grad.append("stop").attr("offset", "100%").attr("stop-color", targetColor); return `url(#${gradientId})`; }) .attr("stroke-width", d => Math.max(1, d.width)) .attr("stroke-opacity", 0.35) .on("mouseover", (event, d) => { highlightLink(svg, d); tooltip.style.visibility = "visible"; tooltip.innerHTML = `${d.source.name} → ${d.target.name}`; }) .on("mousemove", (event) => { const rect = event.currentTarget.ownerSVGElement.getBoundingClientRect(); tooltip.style.left = `${event.clientX - rect.left + 10}px`; tooltip.style.top = `${event.clientY - rect.top - 30}px`; }) .on("mouseout", () => { resetHighlight(svg); tooltip.style.visibility = "hidden"; }) .each(function () { const path = d3.select(this); const totalLength = this.getTotalLength(); // Cancel any ongoing transition first path.interrupt(); // Restart the animation cleanly path .attr("stroke-dasharray", `${totalLength} ${totalLength}`) .attr("stroke-dashoffset", totalLength) .transition() .duration(1200) .ease(d3.easeCubicOut) .on("start", () => path.attr("stroke-dashoffset", totalLength)) .on("end", () => path.attr("stroke-dasharray", null).attr("stroke-dashoffset", null)) .attr("stroke-dashoffset", 0); }); // --- Nodes --- svg.append("g") .attr("stroke", "#fff") .selectAll("rect") .data(graph.nodes) .join("rect") .attr("class", "node") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => Math.max(1, d.y1 - d.y0)) .attr("width", nodeWidth) .attr("rx", 0) .style("filter", "drop-shadow(0 2px 4px rgba(0,0,0,0.15))") .attr("fill", d => { if (d.layer === 0) return interventionColor(d.name); const relatedConcerns = new Set( graph.links.filter(l => l.source.index === d.index || l.target.index === d.index).map(l => l.concern) ); if (relatedConcerns.size === 1) { const c = [...relatedConcerns][0]; return categoryColors.get(c) || defaultConcernColor; } return neutralColor; }) .on("mouseover", (event, d) => { highlightNode(svg, d); tooltip.style.visibility = "visible"; tooltip.innerHTML = `${d.name}`; }) .on("mousemove", (event) => { const rect = event.currentTarget.ownerSVGElement.getBoundingClientRect(); tooltip.style.left = `${event.clientX - rect.left + 10}px`; tooltip.style.top = `${event.clientY - rect.top - 30}px`; }) .on("mouseout", () => { resetHighlight(svg); tooltip.style.visibility = "hidden"; }); // --- Labels --- const labelGroup = svg.append("g") .style("font-size", "18px") .style("fill", textColor) .style("font-weight", "500"); const labels = labelGroup.selectAll("text") .data(graph.nodes) .join("text") .attr("class", "label") .attr("x", d => d.x0 < width / 2 ? d.x0 - 12 : d.x1 + 12) .attr("y", d => (d.y0 + d.y1) / 2) .attr("text-anchor", d => d.x0 < width / 2 ? "end" : "start") .attr("dy", "0.35em") .style("opacity", 0.6) // base dimmed state .text(d => d.name); return chartContainer; } // --- Render chart + reactive filters --- let currentChart = renderChart(data); container.append(currentChart); // Preselect on load: concernSelect.value = "Group Climate"; updateChart(); function updateChart() { const selectedConcern = concernSelect.value; const selectedIntervention = interventionSelect.value; const isFiltered = selectedConcern !== "All" || selectedIntervention !== "All"; resetButton.style.display = isFiltered ? "inline-block" : "none"; currentChart.style.opacity = "0"; setTimeout(() => { const filtered = data.filter(d => (!selectedConcern || d[concernKey] === selectedConcern) && (selectedIntervention === "All" || d[interventionKey] === selectedIntervention) ); const newChart = renderChart(filtered); currentChart.replaceWith(newChart); currentChart = newChart; newChart.style.opacity = "0"; requestAnimationFrame(() => { newChart.style.transition = "opacity 0.6s ease"; newChart.style.opacity = "1"; }); }, 200); } interventionSelect.onchange = updateChart; concernSelect.onchange = updateChart; // return container; return html`

${container}

`; }