chart = { // --- Dimensions --- const width = 1440; const height = 900; const radius = Math.min(width, height) / 6; // --- Color scale --- const color = d3.scaleOrdinal() .domain(issues.children.map(d => d.name)) .range([ "#00A5D2", "#8DC63F", "#E9532B", "#C8DA2B", "#F57F29", "#00B6C9", "#63CCEC", "#BBDD8C", "#FDB515", "#6EA03C", "#F2E600" ]); // --- Layout --- const hierarchy = d3.hierarchy(issues) .sum(d => d.value) .sort((a, b) => b.value - a.value); const root = d3.partition() .size([2 * Math.PI, hierarchy.height + 1])(hierarchy); root.each(d => (d.current = d)); let focus = root; // --- Arc generator --- const arc = d3.arc() .startAngle(d => d.x0) .endAngle(d => d.x1) .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.01)) // slightly larger padding .padRadius(radius * 1.4) // controls radial spacing .innerRadius(d => d.y0 * radius) .outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 2)); // --- SVG container --- const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("width", "100%") .attr("height", "auto") .attr("preserveAspectRatio", "xMidYMid meet") .style("font-family", "Inter, Segoe UI, Roboto, sans-serif") .style("font-size", "14px") .style("fill", "#444"); // .style("background", "#d3d3d3"); // --- Tooltip (HTML div) --- const tooltip = d3.create("div") .attr("class", "sunburst-tooltip") .style("position", "absolute") .style("pointer-events", "none") .style("background", "rgba(0, 0, 0, 0.8)") .style("color", "#fff") .style("padding", "10px 14px") .style("border-radius", "10px") .style("font-family", "Inter, Segoe UI, Roboto, sans-serif") .style("font-size", "14px") .style("line-height", "1.4em") .style("box-shadow", "0 4px 12px rgba(0,0,0,0.3)") .style("visibility", "hidden"); // --- Groups --- const gArcs = svg.append("g"); const gLabels = svg.append("g") .attr("text-anchor", "middle") .style("user-select", "none") .style("pointer-events", "auto"); const format = d3.format(",d"); // --- Draw arcs --- const path = gArcs.selectAll("path") .data(root.descendants().slice(1)) .join("path") .attr("fill", d => { // Walk up to the top-level ancestor let ancestor = d; while (ancestor.depth > 1) ancestor = ancestor.parent; // Find this top-level ancestor's index among root.children const index = root.children.indexOf(ancestor); // Assign color based on index (so Level 1 follows palette order) return color.range()[index % color.range().length]; }) .attr("fill-opacity", d => { if (!arcVisible(d.current)) return 0; if (d.depth === 1) return 0.9; // Level 1 if (d.depth === 2) return 0.55; // Level 2 (lighter) return 0.65; // fallback }) .attr("pointer-events", d => arcVisible(d.current) ? "auto" : "none") .attr("d", d => arc(d.current)) .style("cursor", "pointer"); // --- Tooltip (disabled on level 3 & center) --- path .on("mousemove", (event, d) => { if (focus.depth === 1) { tooltip.style("visibility", "hidden"); return; } // Skip tooltips for hidden or too-deep arcs if (!arcVisible(d.current) || (focus && focus.depth >= 3) || d.depth >= 3) { tooltip.style("visibility", "hidden"); return; } // Prevent tooltip near the center const dx = event.offsetX - width / 2; const dy = event.offsetY - height / 2; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < radius * 0.8) { tooltip.style("visibility", "hidden"); return; } // 🟢 Compute the path (breadcrumb style) const pathString = d.ancestors() .reverse() .filter(a => a.depth > 0) .map(a => a.data.name) .join(" › "); // 🟢 Compute relative proportion within siblings let proportionText = ""; if (d.parent) { const siblings = d.parent.children; const siblingTotal = d3.sum(siblings, s => s.value); const ratio = (d.value / siblingTotal) * 100; proportionText = `${ratio.toFixed(1)}% of ${d.parent.data.name}`; } else { // top-level node — compare to root’s direct children const siblings = root.children; const siblingTotal = d3.sum(siblings, s => s.value); const ratio = (d.value / siblingTotal) * 100; proportionText = `${ratio.toFixed(1)}% of total`; } // 🟢 Tooltip HTML layout tooltip.html(`

${pathString}

Total Issues: ${format(d.value)} issues
Proportion: ${proportionText}

`); // 🟢 Smart positioning (keeps your original logic) tooltip .style("visibility", "hidden") .style("opacity", 0) .style("left", "-9999px") .style("top", "-9999px"); const tmpNode = tooltip.node(); const tipRect = tmpNode.getBoundingClientRect(); const tipH = tipRect.height || 100; const offset = 20; const isBottomHalf = event.offsetY > height / 2; const left = event.offsetX + offset; const top = isBottomHalf ? (event.offsetY - tipH - offset) : (event.offsetY + offset); tooltip .style("visibility", "visible") .style("opacity", 1) .style("left", left + "px") .style("top", top + "px"); }) .on("mouseout", () => tooltip.style("visibility", "hidden")); // --- Center label (shows when a Level 2 slice is highlighted) --- const gCenterLabel = svg.append("g") .attr("class", "center-label") .attr("transform", "translate(0, -30)") .style("opacity", 0); let activeSlice = null; // Track the active highlighted slice path.on("click", (event, d) => { if (d.depth >= 3) return; // 🟢 When at root and a Level 2 slice is clicked, if (focus === root && d.depth === 2) { // Step 1: Zoom into the parent (Level 1) clicked(event, d.parent); // Step 2: After zoom ends... svg.transition().duration(900).on("end", () => { // (a) Create L2 labels instantly at final positions, but hidden renderLabelsInstant(focus); // (b) Trigger your existing highlight flow (darken + center label + hide others) path.filter(p => p === d).dispatch("click"); // (c) Now, fade in ONLY the clicked slice's label on top of its arc const clickedName = d?.data?.name; gLabels.selectAll("text") .interrupt() .attr("transform", lbl => labelTransformFor(lbl)) .transition() .duration(250) .attr("opacity", lbl => (lbl?.data?.name === clickedName ? 1 : 0)); }); return; } // LEVEL 2 behavior — toggle darken + center label only when zoomed to Level 1 if (focus.depth === 1 && d.depth === 2) { // If clicking the same slice again → unselect if (activeSlice === d) { activeSlice = null; // Reset color of all slices path.transition().duration(300) .attr("fill", p => { let ancestor = p; while (ancestor.depth > 1) ancestor = ancestor.parent; const index = root.children.indexOf(ancestor); return color.range()[index % color.range().length]; }); // Remove center label gCenterLabel.transition().duration(300) .style("opacity", 0) .on("end", () => gCenterLabel.selectAll("*").remove()); // Restore all labels gLabels.selectAll("text") .transition().duration(300) .attr("opacity", 1); updateBackButton(); // reset position return; } // Otherwise, highlight this slice activeSlice = d; // Reset all Level 2 fills path.transition().duration(300) .attr("fill", p => { let ancestor = p; while (ancestor.depth > 1) ancestor = ancestor.parent; const index = root.children.indexOf(ancestor); return color.range()[index % color.range().length]; }); // Darken only the clicked slice const currentFill = d3.color(d3.select(event.currentTarget).attr("fill")); const darker = d3.color(currentFill).darker(0.8); d3.select(event.currentTarget) .transition().duration(200) .attr("fill", darker.formatHex()); // Fade out labels except the clicked slice (compare by name to survive rebinds) const clickedName = d?.data?.name; gLabels.selectAll("text") .interrupt() // cancel any in-flight "fly out" transitions .transition().duration(300) .attr("opacity", lbl => (lbl?.data?.name === clickedName ? 1 : 0)); // Show center label showCenterLabel(d); updateBackButton(); // move button up when highlighted return; // stop zoom } // Default zoom for Level 0 → 1 and Level 1 → 2 activeSlice = null; gCenterLabel.selectAll("*").remove(); gCenterLabel.style("opacity", 0); clicked(event, d); }); renderLabels(root); // --- Back Button (rounded rectangle) --- const parent = svg.append("g") .attr("class", "back-button") .attr("cursor", "pointer") .on("click", clicked); parent .on("mouseover", () => { parent.select("rect") .transition().duration(150) .attr("fill", "rgba(255, 255, 255, 0.9)") .attr("stroke", "rgba(0,0,0,0.25)"); }) .on("mouseout", () => { parent.select("rect") .transition().duration(150) .attr("fill", "rgba(255, 255, 255, 0.7)") .attr("stroke", "rgba(0,0,0,0.1)"); }); const backWidth = 120; const backHeight = 40; const cornerRadius = 10; parent.append("rect") .attr("x", -backWidth / 2) .attr("y", -backHeight / 2) .attr("width", backWidth) .attr("height", backHeight) .attr("rx", cornerRadius * 1.4) .attr("ry", cornerRadius * 1.4) .attr("fill", "rgba(255, 255, 255, 0.7)") .attr("stroke", "rgba(0,0,0,0.1)") .attr("stroke-width", 1) .attr("filter", "drop-shadow(0 2px 6px rgba(0,0,0,0.15)) blur(4px)") .attr("pointer-events", "all") .style("backdrop-filter", "blur(10px)") .attr("opacity", 0.95); parent.append("text") .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .style("font-size", "13.5px") .style("font-weight", "600") .style("pointer-events", "none") .style("fill", "#444") .style("font-family", "Inter, Segoe UI, Roboto, sans-serif") .text("← Back"); // Dynamically move the back button depending on zoom level / highlight function updateBackButton() { parent.style("display", focus === root ? "none" : "block"); const targetY = activeSlice ? -radius * 0.6 : // When slice is highlighted focus.depth === 1 ? 0 : // Level 1 zoom -radius * 0.6; // Level 2+ zoom parent.transition().duration(600) .attr("transform", `translate(0, ${targetY})`); } updateBackButton(); // Hide tooltip if needed function hideTooltipIfNeeded() { if (focus && focus.depth === 3) tooltip.style("visibility", "hidden"); } // ✅ Helper: consistent opacity during zoom (keeps Level 2 lighter) function getFillOpacity(d, p) { if (p && p.depth === 1 && d.depth === 3) return 0; // hide level 3 when zoomed into level 1 if (!arcVisible(d.target)) return 0; if (d.depth === 1) return 0.9; if (d.depth === 2) return 0.55; return 0.65; } // --- Zoom click handler --- function clicked(event, p) { focus = p; parent.datum(p.parent || root); if (p.depth === 3) tooltip.style("visibility", "hidden"); // Normal zoom transition setup root.each(d => d.target = { x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) }); const t = svg.transition().duration(event.altKey ? 7500 : 900); gLabels.selectAll("text") .interrupt() .transition() .duration(200) .attr("fill-opacity", 0) .remove(); // Animate arcs path.transition(t) .tween("data", d => { const i = d3.interpolate(d.current, d.target); return t => (d.current = i(t)); }) .filter(function (d) { return arcVisible(d.target) || +this.getAttribute("fill-opacity") > 0; }) // ✅ Use helper here .attr("fill-opacity", d => getFillOpacity(d, p)) .attr("pointer-events", d => { if (p.depth === 1 && d.depth === 3) return "none"; return arcVisible(d.target) ? "auto" : "none"; }) .attrTween("d", d => () => arc(d.current)) .on("end", function (d) { const isHidden = p.depth === 1 && d.depth === 3; d3.select(this) // ✅ Keep opacity via helper here as well .attr("fill-opacity", getFillOpacity(d, p)) .attr("pointer-events", isHidden ? "none" : (arcVisible(d.current) ? "auto" : "none")); }); // When zoom animation completes (e.g. back button clicked) t.on("end", () => { // Remove center label gCenterLabel.transition().duration(200) .style("opacity", 0) .on("end", () => gCenterLabel.selectAll("*").remove()); // Reset highlighted slice, if any activeSlice = null; path.transition().duration(200) .attr("fill", d => { let ancestor = d; while (ancestor.depth > 1) ancestor = ancestor.parent; const index = root.children.indexOf(ancestor); return color.range()[index % color.range().length]; }); // Restore labels and back button positions renderLabels(focus, svg.transition().duration(600)); updateBackButton(); hideTooltipIfNeeded(); }); } // --- Center label builder --- function showCenterLabel(d) { gCenterLabel.selectAll("*").remove(); // include both level 1 and 2 names const ancestors = d.ancestors() .reverse() .filter(a => a.depth > 0); // ignore root const MAX_WIDTH = 300; const LINE_HEIGHT = 1.3; // 🟢 Background container group const gBox = gCenterLabel.append("g").attr("class", "label-box"); // 🟢 Text block const text = gBox.append("text") .attr("text-anchor", "middle") .style("fill", "#444") .style("font-weight", "500") .style("font-family", "Inter, Segoe UI, Roboto, sans-serif") function wrapLine(lineText, dyStart, fontSize, fontWeight) { const words = lineText.split(/\s+/); let line = []; let tspan = text.append("tspan") .attr("x", 0) .attr("dy", dyStart + "em") .style("font-size", fontSize) .style("font-weight", fontWeight) .text(""); for (let i = 0; i < words.length; i++) { line.push(words[i]); tspan.text(line.join(" ")); if (tspan.node().getComputedTextLength() > MAX_WIDTH && line.length > 1) { line.pop(); tspan.text(line.join(" ")); line = [words[i]]; tspan = text.append("tspan") .attr("x", 0) .attr("dy", LINE_HEIGHT + "em") .style("font-size", fontSize) .style("font-weight", fontWeight) .text(words[i]); } } } // Level 1 › Level 2 path (always shows both if available) const level1 = ancestors.length >= 1 ? ancestors[0].data.name : ""; const level2 = ancestors.length >= 2 ? ancestors[1].data.name : ""; const parentPath = [level1, level2].filter(Boolean).join(" › "); if (parentPath) wrapLine(parentPath, 0, "16px", "600"); // 🟢 NEW: Display stats (only for Level 1 focus) if (focus.depth === 1 && d.depth === 2) { const siblings = d.parent.children; const siblingTotal = d3.sum(siblings, s => s.value); const ratio = (d.value / siblingTotal) * 100; text.append("tspan") .attr("x", 0) .attr("dy", LINE_HEIGHT * 1.8 + "em") .style("font-size", "14px") .style("opacity", 0.8) .text(`${format(d.value)} issues (${ratio.toFixed(1)}% of ${d.parent.data.name})`); } // Level 3 name/link from first child let level3Name = ""; let level3Link = ""; if (d.children && d.children.length > 0) { const firstChild = d.children[0]; level3Name = firstChild.data.name || ""; if (firstChild.data.link && firstChild.data.link !== "[insert link here if available]") { level3Link = firstChild.data.link; } } if (level3Name) wrapLine(level3Name, LINE_HEIGHT * 1.4, "14px", "400"); if (level3Link) { text.append("tspan") .attr("x", 0) .attr("dy", "2em") .attr("class", "label-link") .style("fill", "#D99A00") .style("cursor", "pointer") .style("pointer-events", "auto") .style("text-decoration", "underline") .text("Open Odibles ↗") .on("click", () => window.open(level3Link, "_blank")); } // 🟢 Background rectangle around text requestAnimationFrame(() => { const bbox = text.node().getBBox(); const paddingX = 16; const paddingY = 12; gBox.insert("rect", "text") .attr("x", bbox.x - paddingX) .attr("y", bbox.y - paddingY) .attr("width", bbox.width + paddingX * 2) .attr("height", bbox.height + paddingY * 2) .attr("rx", 16) .attr("ry", 16) .attr("fill", "rgba(255, 255, 255, 0.6)") .attr("stroke", "rgba(255,255,255,0.4)") .attr("stroke-width", 0.8) .attr("filter", "drop-shadow(0 4px 12px rgba(0,0,0,0.15))") .style("backdrop-filter", "blur(12px)"); }); // fade in smoothly gCenterLabel.transition().duration(300).style("opacity", 1); updateBackButton(); } // --- Label rendering (unchanged) --- function renderLabels(node, transition = null) { const MIN_ANGLE = 0.06; let data = node.children ? node.children.filter(d => { const n = d.current || d.target || d; return (n.x1 - n.x0) > MIN_ANGLE; }) : []; const labels = gLabels.selectAll("text").data(data, d => d.data.name); labels.exit().transition(transition || svg.transition().duration(200)) .attr("fill-opacity", 0) .remove(); const enters = labels.enter().append("text") .attr("text-anchor", "middle") .attr("fill-opacity", 0) .style("font-size", "14px") .style("pointer-events", "none") .style("fill", "#444") .style("font-weight", "500") .style("font-family", "Inter, Segoe UI, Roboto, sans-serif") .style("stroke", "rgba(255,255,255,0.6)") // semi-transparent white outline .style("stroke-width", "4px") .style("paint-order", "stroke") .text(d => d.data.name); const merged = enters.merge(labels); const t = transition || svg.transition().duration(600); merged.transition(t) .delay(100) .attr("fill-opacity", 1) .attr("transform", d => { const n = d.current || d.target || d; const xAngle = (n.x0 + n.x1) / 2; const rMid = ((n.y0 + n.y1) / 2) * radius; const deg = (xAngle * 180) / Math.PI - 90; return `rotate(${deg}) translate(${rMid},0) rotate(${xAngle < Math.PI ? 0 : 180})`; }); // (restored) wrap long labels requestAnimationFrame(() => wrapAllLabels()); function wrapAllLabels() { gLabels.selectAll("text").each(function (d) { const text = d3.select(this); const MAX_WIDTH = d.depth === 3 ? 300 : 160 - d.depth * 20; const fullText = text.text(); text.text(null); const words = fullText.split(/\s+/); let line = []; let tspan = text.append("tspan").attr("x", 0).attr("dy", 0).text(""); for (let i = 0; i < words.length; i++) { line.push(words[i]); tspan.text(line.join(" ")); if (tspan.node().getComputedTextLength() > MAX_WIDTH && line.length > 1) { line.pop(); tspan.text(line.join(" ")); line = [words[i]]; tspan = text.append("tspan").attr("x", 0).attr("dy", "1.2em").text(words[i]); } } }); } } function arcVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; } function labelTransformFor(node) { const n = node.current || node.target || node; const xAngle = (n.x0 + n.x1) / 2; const rMid = ((n.y0 + n.y1) / 2) * radius; const deg = (xAngle * 180) / Math.PI - 90; return `rotate(${deg}) translate(${rMid},0) rotate(${xAngle < Math.PI ? 0 : 180})`; } function renderLabelsInstant(node) { const MIN_ANGLE = 0.06; const data = node.children ? node.children.filter(d => { const n = d.current || d.target || d; return (n.x1 - n.x0) > MIN_ANGLE; }) : []; const labels = gLabels.selectAll("text").data(data, d => d.data.name); labels.exit().remove(); const enters = labels.enter().append("text") .attr("text-anchor", "middle") .style("font-size", "14px") .style("pointer-events", "none") .style("fill", "#444") .style("font-weight", "500") .style("font-family", "Inter, Segoe UI, Roboto, sans-serif") .style("stroke", "rgba(255,255,255,0.6)") .style("stroke-width", "4px") .style("paint-order", "stroke") .text(d => d.data.name); const merged = enters.merge(labels); // ✅ Set the final transform immediately, and keep them hidden for now merged .attr("transform", d => labelTransformFor(d)) .attr("opacity", 0); // word-wrap (same as your renderLabels) requestAnimationFrame(() => { gLabels.selectAll("text").each(function (d) { const text = d3.select(this); const MAX_WIDTH = d.depth === 3 ? 300 : 160 - d.depth * 20; const fullText = text.text(); text.text(null); const words = fullText.split(/\s+/); let line = []; let tspan = text.append("tspan").attr("x", 0).attr("dy", 0).text(""); for (let i = 0; i < words.length; i++) { line.push(words[i]); tspan.text(line.join(" ")); if (tspan.node().getComputedTextLength() > MAX_WIDTH && line.length > 1) { line.pop(); tspan.text(line.join(" ")); line = [words[i]]; tspan = text.append("tspan").attr("x", 0).attr("dy", "1.2em").text(words[i]); } } }); }); } svg.node().appendChild(gLabels.node()); // Bring center label group to the very front (above labels and back button) svg.node().appendChild(gCenterLabel.node()); return html`

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

`; }