chart = { // ========================= // SIZE // ========================= const width = 1400; const height = width; const cx = width / 2; const cy = height / 2; const radius = width / 2 - 120; // ========================= // TREE LAYOUT // ========================= const tree = d3.cluster() .size([2 * Math.PI, radius]) .separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth ); // ========================= // ROOT // ========================= const root = tree( d3.hierarchy(data) .sort((a, b) => d3.ascending(a.data.name, b.data.name) ) ); // ========================= // SVG // ========================= const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr( "viewBox", [-cx, -cy, width, height] ) .style("width", "100%") .style("height", "auto") .style("background", "#0f172a") .style("font", "11px sans-serif"); // ========================= // TITLE // ========================= svg.append("text") .attr("x", 0) .attr("y", -height / 2 + 40) .attr("text-anchor", "middle") .attr("fill", "white") .style("font-size", "26px") .style("font-weight", "700") .text("Superstore Radial Hierarchy"); // ========================= // ZOOM GROUP // ========================= const g = svg.append("g"); // ========================= // ZOOM // ========================= svg.call( d3.zoom() .scaleExtent([0.6, 6]) .on("zoom", (event) => { g.attr("transform", event.transform); }) ); // ========================= // LINKS // ========================= const links = g.append("g") .attr("fill", "none") .attr("stroke", "#64748b") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.2) .selectAll() .data(root.links()) .join("path") .attr( "d", d3.linkRadial() .angle(d => d.x) .radius(d => d.y) ); // ========================= // TOOLTIP // ========================= const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("background", "#111827") .style("color", "white") .style("padding", "10px 14px") .style("border-radius", "10px") .style("font-size", "12px") .style("pointer-events", "none") .style("opacity", 0) .style("border", "1px solid #334155") .style("box-shadow", "0 4px 20px rgba(0,0,0,0.35)"); // ========================= // NODES // ========================= const circles = g.append("g") .selectAll() .data(root.descendants()) .join("circle") .attr( "transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)` ) .attr("fill", d => { if (d.depth === 0) return "#facc15"; if (d.depth === 1) return "#ff6b6b"; if (d.depth === 2) return "#4ecdc4"; if (d.depth === 3) return "#1a73e8"; if (d.depth === 4) return "#f7b731"; return "#94a3b8"; }) .attr("r", d => { if (d.depth === 0) return 9; if (d.depth === 1) return 5; return 3; }) .style("cursor", "pointer") // ========================= // CLICK FILTER // ========================= .on("click", function(event, clickedNode) { circles.transition() .duration(400) .attr("opacity", d => { let current = d; while (current) { if (current === clickedNode) return 1; current = current.parent; } return 0.06; }); labels.transition() .duration(400) .attr("opacity", d => { let current = d; while (current) { if (current === clickedNode) return 1; current = current.parent; } return 0.06; }); links.transition() .duration(400) .attr("opacity", d => { let current = d.target; while (current) { if (current === clickedNode) return 1; current = current.parent; } return 0.03; }); }) // ========================= // DOUBLE CLICK RESET // ========================= .on("dblclick", function() { circles.transition() .duration(400) .attr("opacity", 1); labels.transition() .duration(400) .attr("opacity", 1); links.transition() .duration(400) .attr("opacity", 1); }) // ========================= // HOVER EFFECT // ========================= .on("mouseover", function(event, d) { d3.select(this) .transition() .duration(200) .attr("r", 7) .attr("stroke", "white") .attr("stroke-width", 2); tooltip .style("opacity", 1) .html(`

${d.data.name}

Depth: ${d.depth}

Children: ${d.children ? d.children.length : 0}

`) .style("left", (event.pageX + 15) + "px") .style("top", (event.pageY - 20) + "px"); }) .on("mouseout", function(event, d) { d3.select(this) .transition() .duration(200) .attr("r", d.depth === 0 ? 9 : d.depth === 1 ? 5 : 3) .attr("stroke", "none"); tooltip.style("opacity", 0); }); // ========================= // LABELS // ========================= const labels = g.append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 4) .selectAll() .data(root.descendants()) .join("text") .attr( "transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) rotate(${d.x >= Math.PI ? 180 : 0})` ) .attr("dy", "0.31em") .attr( "x", d => d.x < Math.PI === !d.children ? 8 : -8 ) .attr( "text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end" ) .attr("paint-order", "stroke") .attr("stroke", "#0f172a") .attr("fill", "white") .style("font-size", d => { if (d.depth <= 2) return "11px"; return "9px"; }) .style("font-weight", d => { if (d.depth <= 2) return "700"; return "400"; }) .text(d => { // LIMIT LABELS if (d.depth > 4) return ""; return d.data.name; }); return svg.node(); }