chart = (() => { const height = 700; const outerRadius = 220; const innerRadius = 150; const middleRadius = 150; const innerInnerRadius = 100; const centerRadius = 100; // Create SVG with centered viewBox const svg = d3.create("svg") .attr("viewBox", [-width/2, -height/2, width, height]) .style("max-width", "100%") .style("height", "auto"); // State variables let focusedPair = null; let activeZoom = null; let currentRotation = 0; let cellVisibility = {}; // Step-by-step animation state let currentStep = 0; let isStepMode = false; let animationData = {}; let buildSteps = []; // Initialize cell visibility const cells = Object.keys(dialecticalData); cells.forEach(cell => { cellVisibility[cell] = { outer: true, // Start visible for normal mode middle: true, inner: true }; }); // Add background rectangle for reset clicks svg.append("rect") .attr("class", "background") .attr("x", -width/2) .attr("y", -height/2) .attr("width", width) .attr("height", height) .style("fill", "none") .style("pointer-events", "all") .on("click", resetZoom); // Main group (no translation needed since SVG is already centered) const g = svg.append("g"); // Add large invisible circle for better mobile touch target const dragCircle = g.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 280) // Larger than outerRadius (220) for easier touch .style("fill", "transparent") .style("pointer-events", "all") .style("cursor", "grab"); // Create zoom behavior (disable panning, only allow programmatic zoom) const zoom = d3.zoom() .scaleExtent([1, 8]) .filter(event => false) // Disable all zoom interactions .on("zoom", zoomed); svg.call(zoom); // Drag behavior for rotation with mobile optimization let dragStartAngle = 0; let dragStartRotation = 0; const drag = d3.drag() .filter(function(event) { // Allow drag on touch devices and mouse return !event.ctrlKey && !event.button; }) .touchable(true) // Explicitly enable touch support .on("start", dragStarted) .on("drag", dragged) .on("end", dragEnded); // Apply mobile-friendly styles and drag behavior svg.style("touch-action", "none") // Prevent default touch behaviors .style("user-select", "none"); // Prevent text selection // Add scroll-to-zoom functionality let hoveredCell = null; // Track hover state on cells function setHoveredCell(cell) { hoveredCell = cell; } // Add wheel event listener for scroll-to-zoom svg.on('wheel', function(event) { event.preventDefault(); if (hoveredCell) { // Scroll forward (negative deltaY) = zoom to cell // Scroll backward (positive deltaY) = reset zoom if (event.deltaY < 0) { // Scrolling forward - zoom to hovered cell (same as cmd+click) // But only if we're not already zoomed into this cell // Check if we're already zoomed into the hovered cell let isAlreadyZoomedToThisCell = false; if (activeZoom && activeZoom.data && activeZoom.data.unitId === hoveredCell.unitId) { // Find which ring the activeZoom belongs to const zoomedPath = svg.selectAll('path').nodes().find(path => path.__data__ === activeZoom); if (zoomedPath) { const parentClass = d3.select(zoomedPath.parentNode).attr("class"); const zoomedRingType = parentClass.includes("outer") ? "outer" : parentClass.includes("middle") ? "middle" : "inner"; isAlreadyZoomedToThisCell = (zoomedRingType === hoveredCell.ringType); } } if (!isAlreadyZoomedToThisCell) { console.log('Scroll forward on cell - zooming in'); // Find the actual path element for this cell const allPaths = svg.selectAll('path').nodes(); let targetPath = null; allPaths.forEach(path => { const pathData = path.__data__; if (pathData && pathData.data && pathData.data.unitId === hoveredCell.unitId) { const parentClass = d3.select(path.parentNode).attr("class"); if ((hoveredCell.ringType === "outer" && parentClass.includes("outer")) || (hoveredCell.ringType === "middle" && parentClass.includes("middle")) || (hoveredCell.ringType === "inner" && parentClass.includes("inner"))) { targetPath = path; } } }); if (targetPath) { // Create mock event for zoomToCell (same as cmd+click) const mockEvent = { stopPropagation: () => {}, metaKey: true, currentTarget: targetPath }; zoomToCell(mockEvent, targetPath.__data__); } } else { console.log('Scroll forward on already-zoomed cell - ignoring'); } } else if (event.deltaY > 0) { // Scrolling backward - reset zoom console.log('Scroll backward on cell - resetting zoom'); resetZoom(); } } else { // No cell hovered - scroll backward still resets zoom if (event.deltaY > 0) { console.log('Scroll backward (no hover) - resetting zoom'); resetZoom(); } } }); dragCircle.call(drag); g.call(drag); // Create pie generator const pie = d3.pie() .value(d => d.value) .sort(null); // Create arc generators const outerArc = d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius); const middleArc = d3.arc() .innerRadius(innerInnerRadius) .outerRadius(middleRadius); const innerArc = d3.arc() .innerRadius(30) // Add inner radius to make it a ring, not a pie .outerRadius(centerRadius); // Simple Text Rotation and Flipping Logic // Single function to calculate text orientation with consistent flipping function calculateTextTransform(d, arcGenerator) { const centroid = arcGenerator.centroid(d); // Get the slice middle angle in the original data const sliceMiddleAngle = (d.startAngle + d.endAngle) / 2; // Calculate the current visual angle (slice angle + wheel rotation) const currentVisualAngle = sliceMiddleAngle + currentRotation; // Normalize to [0, 2π] for consistent flipping logic const normalizedAngle = ((currentVisualAngle % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI); // Convert slice angle to degrees for text rotation let textRotationDegrees = (sliceMiddleAngle * 180) / Math.PI; // Simple flipping rule: flip text if it would be upside down // Text is upside down when the visual angle is in the bottom half (π/2 to 3π/2) if (normalizedAngle > Math.PI / 2 && normalizedAngle < 3 * Math.PI / 2) { textRotationDegrees += 180; } return `translate(${centroid[0]}, ${centroid[1]}) rotate(${textRotationDegrees})`; } // Reusable function to rotate wheel to center a slice at the top function rotateToSlice(unitId, duration = 800) { // Choose which data to use based on current mode const dataToUse = isStepMode && Object.keys(animationData).length > 0 ? animationData : nestedData; // Calculate rotation needed to center the slice at the top const pieData = pie(dataToUse.middle); const targetSlice = pieData.find(d => d.data.unitId === unitId); if (!targetSlice) return; // Calculate the current angle of the slice center in the original data const sliceAngle = (targetSlice.startAngle + targetSlice.endAngle) / 2; // Simple calculation: to center this slice at the top, // we need: sliceAngle + newRotation = 0 // Therefore: newRotation = -sliceAngle const newRotation = -sliceAngle; // Smooth transition to the new rotation const startRotation = currentRotation; let rotationDelta = newRotation - startRotation; // Normalize rotation delta to always take the shortest path (-π to π) while (rotationDelta > Math.PI) rotationDelta -= 2 * Math.PI; while (rotationDelta < -Math.PI) rotationDelta += 2 * Math.PI; // Use D3 transition for smooth rotation const rotationTransition = d3.transition() .duration(duration) .ease(d3.easeCubicInOut); rotationTransition.tween("rotate", function() { return function(t) { currentRotation = startRotation + rotationDelta * t; updateTransform(); }; }); } // Create groups for each ring const outerGroup = g.append("g").attr("class", "outer-ring"); const middleGroup = g.append("g").attr("class", "middle-ring"); const innerGroup = g.append("g").attr("class", "inner-ring"); // Create groups for labels const outerLabelsGroup = g.append("g").attr("class", "outer-labels"); const middleLabelsGroup = g.append("g").attr("class", "middle-labels"); const innerLabelsGroup = g.append("g").attr("class", "inner-labels"); // Add yellow center circle (axle/hub) g.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 30) // Same as inner radius of green ring .style("fill", "#F0E68C"); // Khaki - more vibrant yellow that still harmonizes // Add coordinate system BACK inside the main group so it gets zoom transforms const coordinateGroup = g.append("g").attr("class", "coordinate-system"); // Add circumference numbers at slice centers const numSlices = Object.keys(dialecticalData).length; const angleStep = (2 * Math.PI) / numSlices; const numberRadius = outerRadius + 15; // Place numbers at the center of each slice, starting from top and going clockwise for (let i = 0; i < numSlices; i++) { const angle = (i * angleStep) + (angleStep / 2) - Math.PI / 2; // Center of slice, start at top const x = numberRadius * Math.cos(angle); const y = numberRadius * Math.sin(angle); coordinateGroup.append("text") .attr("class", "coordinate-number") .attr("x", x) .attr("y", y) .style("text-anchor", "middle") .style("dominant-baseline", "central") .style("font-family", "Arial, sans-serif") .style("font-size", "12px") .style("font-weight", "bold") .style("fill", "#333") .text(i + 1); } // Add axis symbols at the center of each ring layer const ringRadii = [ (30 + centerRadius) / 2, // Inner ring center (between inner hole and outer edge) (innerInnerRadius + middleRadius) / 2, // Middle ring center (innerRadius + outerRadius) / 2 // Outer ring center ]; const symbols = ["a", "b", "c"]; // Positive, neutral, negative const colors = ["#C6E5B3", "white", "#F9C6CC"]; const textColors = ["#2d5a2d", "#333", "#8b1538"]; // Function to update axis positions based on focus function updateAxisPositions(focusedUnitId = null) { // Remove existing axis elements coordinateGroup.selectAll(".coordinate-circle").remove(); coordinateGroup.selectAll(".coordinate-symbol").remove(); let axisAngle; if (focusedUnitId) { // When focused, position axis at the left edge of the focused slice // Use the actual pie data to find the correct slice position const pieData = pie(nestedData.middle); const focusedSlice = pieData.find(d => d.data.unitId === focusedUnitId); if (focusedSlice) { // Position axis at the start angle of the slice (left edge) axisAngle = focusedSlice.startAngle - Math.PI / 2; } else { // Fallback to default const units = Object.keys(dialecticalData); const numSlices = units.length; const angleStep = (2 * Math.PI) / numSlices; axisAngle = (numSlices / 2 * angleStep) - Math.PI / 2; } } else { // Default: axis that bisects wheel, separating first half from second half const units = Object.keys(dialecticalData); const numSlices = units.length; const angleStep = (2 * Math.PI) / numSlices; // For even number of slices, position axis between middle slices // For 8 slices: between slice 4 and 5 (indices 3 and 4) axisAngle = (numSlices / 2 * angleStep) - Math.PI / 2; } // Create axis on both sides of the wheel const axisAngles = [axisAngle, axisAngle + Math.PI]; // Both sides axisAngles.forEach(angle => { ringRadii.forEach((radius, ringIndex) => { const x = radius * Math.cos(angle); const y = radius * Math.sin(angle); // Create circle background coordinateGroup.append("circle") .attr("class", "coordinate-circle") .attr("cx", x) .attr("cy", y) .attr("r", 8) .style("fill", colors[ringIndex]) .style("stroke", textColors[ringIndex]) .style("stroke-width", 1.5); // Add symbol text coordinateGroup.append("text") .attr("class", "coordinate-symbol") .attr("x", x) .attr("y", y) .style("text-anchor", "middle") .style("dominant-baseline", "central") .style("font-family", "Arial, sans-serif") .style("font-size", "12px") .style("font-weight", "bold") .style("fill", textColors[ringIndex]) .text(symbols[ringIndex]); }); }); } // Initialize axes updateAxisPositions(); // Color scales const outerColor = d3.scaleOrdinal() .domain(Object.keys(dialecticalData)) .range(Object.keys(dialecticalData).map(() => "#F9C6CC")); const middleColor = d3.scaleOrdinal() .domain(Object.keys(dialecticalData)) .range(Object.keys(dialecticalData).map(() => "#ffffff")); const innerColor = d3.scaleOrdinal() .domain(Object.keys(dialecticalData)) .range(Object.keys(dialecticalData).map(() => "#C6E5B3")); // Initialize data const nestedData = transformToNestedPieData(dialecticalData); // Arc tween function function arcTween(arcGenerator) { return function(a) { const i = d3.interpolate(this._current, a); this._current = i(0); return function(t) { return arcGenerator(i(t)); }; }; } // Function to hide individual cell (sucking into inner ring) function hideCell(unitId, ringType) { if (!cellVisibility[unitId] || !cellVisibility[unitId][ringType]) return; cellVisibility[unitId][ringType] = false; let group, labelsGroup, targetRadius; switch(ringType) { case "outer": group = outerGroup; labelsGroup = outerLabelsGroup; targetRadius = innerRadius; break; case "middle": group = middleGroup; labelsGroup = middleLabelsGroup; targetRadius = innerInnerRadius; break; case "inner": group = innerGroup; labelsGroup = innerLabelsGroup; targetRadius = 0; break; } // Hide cell with radius animation group.selectAll("path") .filter(d => d.data.unitId === unitId) .classed("hidden", true) .transition() .duration(800) .ease(d3.easeExpIn) .attrTween("d", function(d) { const currentData = d; return function(t) { let arcGen; if (ringType === "outer") { const newInnerRadius = d3.interpolate(innerRadius, targetRadius)(t); const newOuterRadius = d3.interpolate(outerRadius, targetRadius)(t); arcGen = d3.arc().innerRadius(newInnerRadius).outerRadius(newOuterRadius); } else if (ringType === "middle") { const newInnerRadius = d3.interpolate(innerInnerRadius, targetRadius)(t); const newOuterRadius = d3.interpolate(middleRadius, targetRadius)(t); arcGen = d3.arc().innerRadius(newInnerRadius).outerRadius(newOuterRadius); } else { const newInnerRadius = d3.interpolate(0, targetRadius)(t); const newOuterRadius = d3.interpolate(centerRadius, targetRadius)(t); arcGen = d3.arc().innerRadius(newInnerRadius).outerRadius(newOuterRadius); } return arcGen(currentData); }; }) .style("opacity", d3.interpolate(1, 0)) .on("end", function(d) { // Restore data binding after hide animation this._current = d; }); // Hide label labelsGroup.selectAll("text") .filter(d => d.data.unitId === unitId) .transition() .duration(800) .style("opacity", 0); } // Function to show individual cell (expanding from inner ring) function showCell(unitId, ringType) { if (!cellVisibility[unitId] || cellVisibility[unitId][ringType]) return; cellVisibility[unitId][ringType] = true; let group, labelsGroup, startRadius, endInnerRadius, endOuterRadius; switch(ringType) { case "outer": group = outerGroup; labelsGroup = outerLabelsGroup; startRadius = innerRadius; endInnerRadius = innerRadius; endOuterRadius = outerRadius; break; case "middle": group = middleGroup; labelsGroup = middleLabelsGroup; startRadius = innerInnerRadius; endInnerRadius = innerInnerRadius; endOuterRadius = middleRadius; break; case "inner": group = innerGroup; labelsGroup = innerLabelsGroup; startRadius = 0; endInnerRadius = 0; endOuterRadius = centerRadius; break; } // Show cell with radius animation group.selectAll("path") .filter(d => d.data.unitId === unitId) .classed("hidden", false) .transition() .duration(800) .ease(d3.easeExpOut) .attrTween("d", function(d) { const currentData = d; return function(t) { const newInnerRadius = d3.interpolate(startRadius, endInnerRadius)(t); const newOuterRadius = d3.interpolate(startRadius, endOuterRadius)(t); const arcGen = d3.arc().innerRadius(newInnerRadius).outerRadius(newOuterRadius); return arcGen(currentData); }; }) .style("opacity", d3.interpolate(0, ringType === "outer" ? 1 : ringType === "middle" ? 0.9 : 0.8)) .on("end", function(d) { // Restore data binding by updating _current to match actual pie data const arcGen = d3.arc().innerRadius(endInnerRadius).outerRadius(endOuterRadius); this._current = d; d3.select(this).attr("d", arcGen(d)); }); // Show label with position animation labelsGroup.selectAll("text") .filter(d => d.data.unitId === unitId) .transition() .duration(800) .ease(d3.easeExpOut) .attrTween("transform", function(d) { const currentData = d; return function(t) { const newInnerRadius = d3.interpolate(startRadius, endInnerRadius)(t); const newOuterRadius = d3.interpolate(startRadius, endOuterRadius)(t); const arcGen = d3.arc().innerRadius(newInnerRadius).outerRadius(newOuterRadius); // Use the simple text transform function return calculateTextTransform(currentData, arcGen); }; }) .style("opacity", 1) .on("end", function(d) { // After animation completes, ensure text content is properly wrapped const textElement = d3.select(this); textElement.selectAll("tspan").remove(); const text = d.data.fullText || d.data.name; // Get appropriate constraints for this ring and cell const constraints = getTextConstraints(ringType, d); // Apply enhanced text wrapping with three-tier approach wrapText(textElement, text, constraints); }); } // Change data function for smooth value transitions function changeData(ringType, newData, arcGenerator) { const group = ringType === "outer" ? outerGroup : ringType === "middle" ? middleGroup : innerGroup; const labelsGroup = ringType === "outer" ? outerLabelsGroup : ringType === "middle" ? middleLabelsGroup : innerLabelsGroup; const pieData = pie(newData); // Update paths with smooth transitions const paths = group.selectAll("path").data(pieData, d => d.data.name); paths.transition() .duration(750) .attrTween("d", arcTween(arcGenerator)) .style("opacity", d => { if (!cellVisibility[d.data.unitId] || !cellVisibility[d.data.unitId][ringType]) { return 0; } // Use data opacity combined with ring-specific opacity const baseOpacity = ringType === "outer" ? 1 : ringType === "middle" ? 0.9 : 0.8; return d.data.opacity * baseOpacity; }); // Update labels with opacity based on data value const labels = labelsGroup.selectAll("text").data(pieData, d => d.data.name); labels.transition() .duration(750) .attr("transform", function(d) { // Use the simple text transform function return calculateTextTransform(d, arcGenerator); }) .style("opacity", d => { // Hide if data value is 0 or if visibility is toggled off if (d.data.value === 0 || !cellVisibility[d.data.unitId] || !cellVisibility[d.data.unitId][ringType]) { return 0; } return d.data.opacity; }); } // Focus pair function function focusPair(clickedUnitId) { const isThesis = clickedUnitId.startsWith('T'); const pairId = isThesis ? clickedUnitId.replace('T', 'A') : clickedUnitId.replace('A', 'T'); const thesis = isThesis ? clickedUnitId : pairId; const antithesis = isThesis ? pairId : clickedUnitId; const isAlreadyFocused = focusedPair && focusedPair.thesis === thesis && focusedPair.antithesis === antithesis; // Choose which data to modify const dataToModify = isStepMode && Object.keys(animationData).length > 0 ? animationData : nestedData; if (isAlreadyFocused) { focusedPair = null; // Reset all opacities to 1 ["outer", "middle", "inner"].forEach(ringType => { dataToModify[ringType].forEach(item => { item.opacity = 1; }); }); // Reset axes to default positions updateAxisPositions(); } else { focusedPair = { thesis, antithesis }; // Rotate to center the clicked slice at the top rotateToSlice(clickedUnitId); // Dim all cells first ["outer", "middle", "inner"].forEach(ringType => { dataToModify[ringType].forEach(item => { item.opacity = 0.3; }); }); // Highlight the focused pair ["outer", "middle", "inner"].forEach(ringType => { dataToModify[ringType].forEach(item => { if (item.unitId === thesis || item.unitId === antithesis) { item.opacity = 1; } }); }); // Update axes to focus on the pair updateAxisPositions(clickedUnitId); } // Re-render with updated opacity if (isStepMode && Object.keys(animationData).length > 0) { changeData("outer", animationData.outer, outerArc); changeData("middle", animationData.middle, middleArc); changeData("inner", animationData.inner, innerArc); } else { updateAllRings(); } } // Zoom functions function zoomToCell(event, d) { if (activeZoom === d) return resetZoom(); g.selectAll("path").style("stroke-width", null); activeZoom = d; d3.select(event.currentTarget) .style("stroke", "#333") .style("stroke-width", 3); const parentClass = d3.select(event.currentTarget.parentNode).attr("class"); let arcGenerator; if (parentClass.includes("outer-ring")) { arcGenerator = outerArc; } else if (parentClass.includes("middle-ring")) { arcGenerator = middleArc; } else if (parentClass.includes("inner-ring")) { arcGenerator = innerArc; } else { arcGenerator = middleArc; } const centroid = arcGenerator.centroid(d); // Apply current rotation to the centroid coordinates const cos = Math.cos(currentRotation); const sin = Math.sin(currentRotation); const rotatedCentroid = [ centroid[0] * cos - centroid[1] * sin, centroid[0] * sin + centroid[1] * cos ]; const scale = 3; const translate = [-scale * rotatedCentroid[0], -scale * rotatedCentroid[1]]; svg.transition() .duration(750) .call(zoom.transform, d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale)); } function resetZoom() { g.selectAll("path.cell") // Only apply to pie chart cells, not arrows .style("stroke", function() { const ringType = d3.select(this.parentNode).attr("class"); return ringType && ringType.includes("middle") ? "#ddd" : "white"; // Light gray shadow for middle ring }) .style("stroke-width", function() { const ringType = d3.select(this.parentNode).attr("class"); return ringType && ringType.includes("middle") ? 1.5 : 2; }); activeZoom = null; svg.transition() .duration(750) .call(zoom.transform, d3.zoomIdentity) .on("end", () => { updateTransform(); }); } // Drag functions for rotation function dragStarted(event) { const rect = svg.node().getBoundingClientRect(); const centerX = width / 2; const centerY = height / 2; // Handle both mouse and touch events let clientX, clientY; if (event.sourceEvent.touches && event.sourceEvent.touches.length > 0) { clientX = event.sourceEvent.touches[0].clientX; clientY = event.sourceEvent.touches[0].clientY; } else { clientX = event.sourceEvent.clientX; clientY = event.sourceEvent.clientY; } const mouseX = clientX - rect.left; const mouseY = clientY - rect.top; dragStartAngle = Math.atan2(mouseY - centerY, mouseX - centerX); dragStartRotation = currentRotation; // Change cursor during drag dragCircle.style("cursor", "grabbing"); } function dragged(event) { const rect = svg.node().getBoundingClientRect(); const centerX = width / 2; const centerY = height / 2; // Handle both mouse and touch events let clientX, clientY; if (event.sourceEvent.touches && event.sourceEvent.touches.length > 0) { // Touch event clientX = event.sourceEvent.touches[0].clientX; clientY = event.sourceEvent.touches[0].clientY; } else if (event.sourceEvent.changedTouches && event.sourceEvent.changedTouches.length > 0) { // Touch event (for touchend) clientX = event.sourceEvent.changedTouches[0].clientX; clientY = event.sourceEvent.changedTouches[0].clientY; } else { // Mouse event clientX = event.sourceEvent.clientX; clientY = event.sourceEvent.clientY; } const mouseX = clientX - rect.left; const mouseY = clientY - rect.top; const currentAngle = Math.atan2(mouseY - centerY, mouseX - centerX); // Fix angle wrapping issue by using the shortest angular distance let angleDelta = currentAngle - dragStartAngle; // Normalize angle delta to be between -π and π (shortest path) while (angleDelta > Math.PI) angleDelta -= 2 * Math.PI; while (angleDelta < -Math.PI) angleDelta += 2 * Math.PI; currentRotation = dragStartRotation + angleDelta; // Always update both wheel and coordinate system together const currentTransform = d3.zoomTransform(svg.node()); const rotationDegrees = (currentRotation * 180) / Math.PI; // Update wheel rotation g.attr("transform", `translate(${currentTransform.x}, ${currentTransform.y}) scale(${currentTransform.k}) rotate(${rotationDegrees})` ); // Handle text updates based on device type const isMobile = 'ontouchstart' in window || navigator.maxTouchPoints > 0; if (isMobile) { // On mobile, defer text positioning for performance if (transformUpdateTimeout) { clearTimeout(transformUpdateTimeout); } transformUpdateTimeout = setTimeout(() => { updateTextPositions(rotationDegrees); }, 8); } else { // Desktop: update text immediately updateTextPositions(rotationDegrees); } } function dragEnded(event) { // Restore cursor dragCircle.style("cursor", "grab"); // Force a final text update to ensure proper positioning const isMobile = 'ontouchstart' in window || navigator.maxTouchPoints > 0; if (isMobile) { // Clear any pending updates if (transformUpdateTimeout) { clearTimeout(transformUpdateTimeout); } // Force immediate final update setTimeout(() => { const rotationDegrees = (currentRotation * 180) / Math.PI; updateTextPositions(rotationDegrees); }, 50); } else { // Desktop: ensure final update setTimeout(() => { updateTransform(); }, 50); } } // Update transform function with mobile optimization let transformUpdateTimeout; let isUpdatingTransform = false; function updateTransform() { const currentTransform = d3.zoomTransform(svg.node()); const rotationDegrees = (currentRotation * 180) / Math.PI; // Always update the main transform immediately for smooth rotation g.attr("transform", `translate(${currentTransform.x}, ${currentTransform.y}) scale(${currentTransform.k}) rotate(${rotationDegrees})` ); // Throttle text updates on mobile to prevent flickering const isMobile = 'ontouchstart' in window || navigator.maxTouchPoints > 0; if (isMobile) { // Clear any pending text update if (transformUpdateTimeout) { clearTimeout(transformUpdateTimeout); } // Don't start a new update if one is already in progress if (isUpdatingTransform) { return; } // Schedule text update with throttling - but use shorter delay for smoother feel transformUpdateTimeout = setTimeout(() => { updateTextPositions(rotationDegrees); }, 8); // 60fps - smoother than before } else { // Desktop: update immediately updateTextPositions(rotationDegrees); } } function updateTextPositions(rotationDegrees) { isUpdatingTransform = true; // Use requestAnimationFrame for smoother updates requestAnimationFrame(() => { // Update all cell text using the simple transform function // This handles slice alignment and flipping automatically outerLabelsGroup.selectAll("text").attr("transform", function(d) { if (!d) return this.getAttribute("transform"); // Keep existing if no data return calculateTextTransform(d, outerArc); }); middleLabelsGroup.selectAll("text").attr("transform", function(d) { if (!d) return this.getAttribute("transform"); // Keep existing if no data return calculateTextTransform(d, middleArc); }); innerLabelsGroup.selectAll("text").attr("transform", function(d) { if (!d) return this.getAttribute("transform"); // Keep existing if no data return calculateTextTransform(d, innerArc); }); // Update coordinate system text counter-rotation (these stay upright) coordinateGroup.selectAll("text.coordinate-number").attr("transform", function() { const x = d3.select(this).attr("x"); const y = d3.select(this).attr("y"); const counterRotationDegrees = -rotationDegrees; return `translate(${x}, ${y}) rotate(${counterRotationDegrees}) translate(${-x}, ${-y})`; }); coordinateGroup.selectAll("text.coordinate-symbol").attr("transform", function() { const x = d3.select(this).attr("x"); const y = d3.select(this).attr("y"); const counterRotationDegrees = -rotationDegrees; return `translate(${x}, ${y}) rotate(${counterRotationDegrees}) translate(${-x}, ${-y})`; }); isUpdatingTransform = false; }); } function zoomed(event) { const { transform } = event; updateTransform(); g.selectAll("path.cell") .style("stroke-width", function() { const ringType = d3.select(this.parentNode).attr("class"); const baseWidth = ringType && ringType.includes("middle") ? 1 : 2; return (baseWidth / transform.k) + "px"; }); g.selectAll("text.cell-label") // Only target cell labels, not coordinate system text .style("font-size", function() { // Larger base sizes since text now follows slice orientation const baseSize = 8; // Increased from 4 const scaledSize = baseSize * Math.pow(transform.k, 0.3); return Math.max(6, Math.min(16, scaledSize)) + "px"; // Increased min/max sizes }) .each(function(d) { // Handle text wrapping in zoom function too if (!d || !d.data) return; // Clear existing tspans d3.select(this).selectAll("tspan").remove(); const text = d.data.fullText || d.data.name; const ringType = d3.select(this.parentNode).attr("class"); const fontSize = parseFloat(d3.select(this).style("font-size")); const lineHeight = fontSize * 1.1; // Get ring type for constraints const ringTypeStr = ringType && ringType.includes("outer") ? "outer" : ringType && ringType.includes("middle") ? "middle" : "inner"; // Get base constraints - these should be the same regardless of zoom level // because the visual cell boundaries don't change with zoom const constraints = getTextConstraints(ringTypeStr, d); // Always use the same constraints regardless of zoom level // The cell boundaries are the same visual size, so text should respect them wrapText(d3.select(this), text, constraints); }); } // Update ring function function updateRing(group, labelsGroup, data, arcGenerator, ringType, colorScale) { const pieData = pie(data); const paths = group.selectAll("path") .data(pieData, d => d.data.name); const pathsEnter = paths.enter() .append("path") .attr("class", "cell") .attr("fill", d => colorScale(d.data.unitId)) .attr("stroke", ringType === "middle" ? "#ddd" : "white") // Light gray shadow for middle ring .attr("stroke-width", ringType === "middle" ? 1.5 : 2) .style("opacity", d => { if (!cellVisibility[d.data.unitId] || !cellVisibility[d.data.unitId][ringType]) { return 0; } const baseOpacity = ringType === "outer" ? 1 : ringType === "middle" ? 0.9 : 0.8; return d.data.opacity * baseOpacity; }) .attr("d", arcGenerator) .each(function(d) { this._current = d; }) .on("click", function(event, d) { if (event.metaKey || event.ctrlKey) { zoomToCell(event, d); } else { focusPair(d.data.unitId); } }) .on("mouseenter", function(event, d) { // Set hovered cell for scroll-to-zoom const parentClass = d3.select(this.parentNode).attr("class"); const ringType = parentClass.includes("outer") ? "outer" : parentClass.includes("middle") ? "middle" : "inner"; setHoveredCell({ unitId: d.data.unitId, ringType: ringType }); }) .on("mouseleave", function(event, d) { // Clear hovered cell setHoveredCell(null); }); pathsEnter.append("title") .text(d => d.data.fullText); paths.merge(pathsEnter) .transition() .duration(750) .attrTween("d", arcTween(arcGenerator)) .style("opacity", d => { if (!cellVisibility[d.data.unitId] || !cellVisibility[d.data.unitId][ringType]) { return 0; } const baseOpacity = ringType === "outer" ? 1 : ringType === "middle" ? 0.9 : 0.8; return d.data.opacity * baseOpacity; }); paths.exit() .transition() .duration(750) .style("opacity", 0) .remove(); updateLabels(labelsGroup, pieData, arcGenerator, ringType); } function updateLabels(labelsGroup, pieData, arcGenerator, ringType) { const labels = labelsGroup.selectAll("text") .data(pieData, d => d.data.name); const labelsEnter = labels.enter() .append("text") .attr("class", "cell-label") .style("opacity", d => { if (d.data.value === 0 || !cellVisibility[d.data.unitId] || !cellVisibility[d.data.unitId][ringType]) { return 0; } return d.data.opacity; }) .attr("transform", function(d) { // Use the simple text transform function return calculateTextTransform(d, arcGenerator); }) .style("text-anchor", "middle") .style("dominant-baseline", "central") .style("font-family", "Arial, sans-serif") .style("font-size", function(d) { // Much larger fonts now that text follows slice orientation return ringType === "outer" ? "8px" : ringType === "middle" ? "10px" : "8px"; }) .style("font-weight", "600") .style("fill", function(d) { if (ringType === "inner") return "#2d5a2d"; // Dark green for positive aspects if (ringType === "outer") return "#8b1538"; // Dark red for negative aspects return "#333"; // Black for middle ring statements }) .style("pointer-events", "none") .each(function(d) { // Clear any existing tspans d3.select(this).selectAll("tspan").remove(); const text = d.data.fullText || d.data.name; // Get appropriate constraints for this ring and cell const constraints = getTextConstraints(ringType, d); // Always use enhanced wrapping with proper constraints wrapText(d3.select(this), text, constraints); }); labels.merge(labelsEnter) .transition() .duration(750) .attr("transform", function(d) { // Use the simple text transform function return calculateTextTransform(d, arcGenerator); }) .style("opacity", d => { if (d.data.value === 0 || !cellVisibility[d.data.unitId] || !cellVisibility[d.data.unitId][ringType]) { return 0; } return d.data.opacity; }) .each(function(d) { // Clear any existing tspans and rebuild d3.select(this).selectAll("tspan").remove(); const text = d.data.fullText || d.data.name; // Get appropriate constraints for this ring and cell const constraints = getTextConstraints(ringType, d); // Always use enhanced wrapping with proper constraints wrapText(d3.select(this), text, constraints); }); labels.exit() .transition() .duration(750) .style("opacity", 0) .remove(); } // Update all rings helper function updateAllRings() { // Use animation data if in step mode, otherwise use regular data const dataToUse = isStepMode && Object.keys(animationData).length > 0 ? animationData : nestedData; updateRing(outerGroup, outerLabelsGroup, dataToUse.outer, outerArc, "outer", outerColor); updateRing(middleGroup, middleLabelsGroup, dataToUse.middle, middleArc, "middle", middleColor); updateRing(innerGroup, innerLabelsGroup, dataToUse.inner, innerArc, "inner", innerColor); } // ===== ARROW DRAWING FUNCTIONALITY ===== // Create arrow marker definition // Define arrowhead markers for different colors const defs = svg.append("defs"); // Function to create arrowhead marker for a specific color function createArrowheadMarker(color, id) { defs.append("marker") .attr("id", id) .attr("viewBox", "0 -5 10 10") .attr("refX", 8) .attr("refY", 0) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto") .append("path") .attr("d", "M0,-5L10,0L0,5") .attr("fill", color); } // Create arrowheads for all the colors we use createArrowheadMarker("#666", "arrowhead-gray"); createArrowheadMarker("#16a34a", "arrowhead-green"); createArrowheadMarker("#dc2626", "arrowhead-red"); createArrowheadMarker("#8b5cf6", "arrowhead-purple"); createArrowheadMarker("#2563eb", "arrowhead-blue"); // Create arrow group const arrowsGroup = g.append("g") .attr("class", "arrows-group") .style("pointer-events", "none"); // Arrow drawing functions function getCellCentroid(unitId, ringType = 'middle') { // Always use the stable data and arc generators, not animated ones const dataToUse = nestedData; // Use stable data, not animationData let pieData, arcGenerator; switch(ringType) { case 'outer': pieData = pie(dataToUse.outer); // Create fresh arc generator with stable radii to avoid animation interference arcGenerator = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius); break; case 'middle': pieData = pie(dataToUse.middle); // Create fresh arc generator with stable radii to avoid animation interference arcGenerator = d3.arc().innerRadius(innerInnerRadius).outerRadius(middleRadius); break; case 'inner': pieData = pie(dataToUse.inner); // Create fresh arc generator with stable radii to avoid animation interference arcGenerator = d3.arc().innerRadius(30).outerRadius(centerRadius); break; default: pieData = pie(dataToUse.middle); arcGenerator = d3.arc().innerRadius(innerInnerRadius).outerRadius(middleRadius); } // Find the specific cell data for this unitId const cellData = pieData.find(d => d.data.unitId === unitId); if (!cellData) return null; // Use D3's built-in centroid calculation with stable arc generator const centroid = arcGenerator.centroid(cellData); // Calculate the actual radius of the centroid for debugging const calculatedRadius = Math.sqrt(centroid[0] * centroid[0] + centroid[1] * centroid[1]); console.log(`Centroid for ${unitId} (${ringType}):`, { x: centroid[0], y: centroid[1], radius: calculatedRadius, expectedRadius: ringType === 'outer' ? (innerRadius + outerRadius) / 2 : ringType === 'middle' ? (innerInnerRadius + middleRadius) / 2 : ringType === 'inner' ? (30 + centerRadius) / 2 : 'unknown', arcInnerRadius: arcGenerator.innerRadius()(), arcOuterRadius: arcGenerator.outerRadius()() }); return { x: centroid[0], y: centroid[1], angle: (cellData.startAngle + cellData.endAngle) / 2 }; } function drawArrow(from, to, color = "#666", strokeWidth = 2, fromRing = 'middle', toRing = 'middle', delay = 0) { const fromPos = getCellCentroid(from, fromRing); const toPos = getCellCentroid(to, toRing); if (!fromPos || !toPos) return; // Calculate arrow path const dx = toPos.x - fromPos.x; const dy = toPos.y - fromPos.y; const distance = Math.sqrt(dx * dx + dy * dy); // Shorten the arrow to not overlap with cells const shortenBy = 10; const fromShortened = { x: fromPos.x + (dx / distance) * shortenBy, y: fromPos.y + (dy / distance) * shortenBy }; const toShortened = { x: toPos.x - (dx / distance) * shortenBy, y: toPos.y - (dy / distance) * shortenBy }; // Debug: Log original vs shortened positions const fromOriginalRadius = Math.sqrt(fromPos.x * fromPos.x + fromPos.y * fromPos.y); const fromShortenedRadius = Math.sqrt(fromShortened.x * fromShortened.x + fromShortened.y * fromShortened.y); const toOriginalRadius = Math.sqrt(toPos.x * toPos.x + toPos.y * toPos.y); const toShortenedRadius = Math.sqrt(toShortened.x * toShortened.x + toShortened.y * toShortened.y); console.log(`Arrow ${from}(${fromRing}) → ${to}(${toRing}):`, { fromOriginal: { x: fromPos.x, y: fromPos.y, radius: fromOriginalRadius }, fromShortened: { x: fromShortened.x, y: fromShortened.y, radius: fromShortenedRadius }, toOriginal: { x: toPos.x, y: toPos.y, radius: toOriginalRadius }, toShortened: { x: toShortened.x, y: toShortened.y, radius: toShortenedRadius }, shortenBy: shortenBy }); // Create curved path for better visibility const midX = (fromShortened.x + toShortened.x) / 2; const midY = (fromShortened.y + toShortened.y) / 2; // Add curvature based on the perpendicular direction const perpX = -dy / distance; const perpY = dx / distance; const curvature = Math.min(distance * 0.2, 50); const controlX = midX + perpX * curvature; const controlY = midY + perpY * curvature; // Get the appropriate arrowhead marker ID for this color function getArrowheadId(color) { switch(color) { case "#16a34a": return "arrowhead-green"; case "#dc2626": return "arrowhead-red"; case "#8b5cf6": return "arrowhead-purple"; case "#2563eb": return "arrowhead-blue"; default: return "arrowhead-gray"; } } const arrowheadId = getArrowheadId(color); // Create path const path = `M ${fromShortened.x} ${fromShortened.y} Q ${controlX} ${controlY} ${toShortened.x} ${toShortened.y}`; // Draw the static path (without arrowhead initially) const staticPath = arrowsGroup.append("path") .attr("d", path) .attr("stroke", color) .attr("stroke-width", strokeWidth) .attr("fill", "none") .attr("opacity", 0.3) .attr("stroke-dasharray", "3,3"); // Create the animated arrowhead using SVG polygon for proper arrow shape const animatedArrowhead = arrowsGroup.append("polygon") .attr("points", "0,-3 8,0 0,3") // Arrow shape pointing right .attr("fill", color) .attr("opacity", 0); // Animate the arrowhead along the path using the quadratic curve formula animatedArrowhead .transition() .delay(delay) .duration(1500) .ease(d3.easeQuadInOut) .attrTween("transform", function() { return function(t) { const point = getPointAlongQuadraticCurve(fromShortened, {x: controlX, y: controlY}, toShortened, t); // Calculate the angle for proper arrowhead orientation const nextT = Math.min(t + 0.01, 1); const nextPoint = getPointAlongQuadraticCurve(fromShortened, {x: controlX, y: controlY}, toShortened, nextT); const angle = Math.atan2(nextPoint.y - point.y, nextPoint.x - point.x) * 180 / Math.PI; return `translate(${point.x}, ${point.y}) rotate(${angle})`; }; }) .attr("opacity", 1) .on("start", function() { // Make the static path more visible when animation starts staticPath.transition().duration(200).attr("opacity", 0.7); }) .on("end", function() { // Replace animated arrowhead with final arrow marker animatedArrowhead.remove(); staticPath .attr("marker-end", `url(#${arrowheadId})`) .attr("stroke-dasharray", "none") .transition() .duration(300) .attr("opacity", 0.7); }); } function clearArrows() { arrowsGroup.selectAll("*").remove(); } function drawAllArrows() { clearArrows(); const connections = parseArrowConnections(arrowConnections, dialecticalData); connections.forEach((conn, index) => { // Different colors for different types of connections let color = "#666"; // Check if it's a ring-specific connection if (conn.fromRing !== 'middle' || conn.toRing !== 'middle') { // Ring-specific connections get special colors if ((conn.fromRing === 'inner' && conn.toRing === 'inner') || (conn.fromRing === 'outer' && conn.toRing === 'outer')) { color = "#16a34a"; // Green for same polarity (+ to + or - to -) } else if ((conn.fromRing === 'inner' && conn.toRing === 'outer') || (conn.fromRing === 'outer' && conn.toRing === 'inner')) { color = "#dc2626"; // Red for opposite polarity (+ to - or - to +) } else { color = "#8b5cf6"; // Purple for mixed connections (statement to +/-) } } else { // Statement-level connections const fromIsThesis = conn.from.startsWith('T'); const toIsThesis = conn.to.startsWith('T'); if (fromIsThesis === toIsThesis) { color = "#2563eb"; // Blue for same type (thesis-thesis or antithesis-antithesis) } else { color = "#dc2626"; // Red for opposition (thesis-antithesis) } } // Stagger arrow animations with 300ms delay between each const delay = index * 300; drawArrow(conn.from, conn.to, color, 2, conn.fromRing, conn.toRing, delay); }); } // Step-by-step animation functions function initializeAnimationData() { // Use the same order as dialecticalData for consistent positioning const units = Object.keys(dialecticalData); animationData = { outer: units.map(unit => ({ name: `${unit} -`, unitId: unit, value: 0, // Start with 0 for step mode opacity: 1, fullText: dialecticalData[unit].negative })), middle: units.map(unit => ({ name: unit, unitId: unit, value: 0, // Start with 0 for step mode opacity: 1, fullText: dialecticalData[unit].statement })), inner: units.map(unit => ({ name: `${unit} +`, unitId: unit, value: 0, // Start with 0 for step mode opacity: 1, fullText: dialecticalData[unit].positive })) }; } // Initialize build steps (generalized for any number of thesis/antithesis pairs) function initializeBuildStepsLocal() { buildSteps = initializeBuildSteps(dialecticalData); currentStep = 0; } // Reset build state (exact copy from HTML) function resetBuildState() { // Reset all cells to visible in visibility state (for step mode) cells.forEach(cell => { cellVisibility[cell] = { outer: false, // Red (negative) - hidden initially middle: true, // White (parent) - visible inner: false // Green (positive) - hidden initially }; }); // Initialize with all values at 0 initializeAnimationData(); // Initial render with all zeros (will show nothing) updateAllRings(); } // Execute a single build step (exact copy from HTML) function executeStep(stepIndex) { if (stepIndex < 0 || stepIndex >= buildSteps.length) return; const step = buildSteps[stepIndex]; switch (step.type) { case 'showWhite': // Determine pair ID and which one comes first in build sequence const isThesis = step.unitId.startsWith('T'); const pairId = isThesis ? step.unitId.replace('T', 'A') : step.unitId.replace('A', 'T'); // Find which cell appears first in the build sequence const currentCellFirstStep = buildSteps.findIndex(s => s.unitId === step.unitId && s.type === 'showWhite'); const pairCellFirstStep = buildSteps.findIndex(s => s.unitId === pairId && s.type === 'showWhite'); const isFirstOfPair = currentCellFirstStep < pairCellFirstStep; if (isFirstOfPair) { // FIRST OF PAIR: Set data for both cells, but hide the second one ["outer", "middle", "inner"].forEach(ringType => { const dataArray = animationData[ringType]; // Set both cells' data values const currentData = dataArray.find(d => d.unitId === step.unitId); const pairData = dataArray.find(d => d.unitId === pairId); if (currentData) currentData.value = 1; if (pairData) pairData.value = 1; }); // Set visibility for both (current visible, pair hidden) cellVisibility[step.unitId].outer = true; cellVisibility[step.unitId].inner = true; cellVisibility[step.unitId].middle = true; cellVisibility[pairId].outer = true; cellVisibility[pairId].inner = true; cellVisibility[pairId].middle = true; // NOW rotate to center this slice at the top (after data is set up) rotateToSlice(step.unitId, 600); // Update all rings with new data changeData("outer", animationData.outer, outerArc); changeData("middle", animationData.middle, middleArc); changeData("inner", animationData.inner, innerArc); // Fix white cell text positioning after rotation completes setTimeout(() => { // Call changeData again with same data to recalculate text transforms changeData("middle", animationData.middle, middleArc); }, 650); // Slightly after rotation duration (600ms) // Hide the pair cells and labels (set data opacity to 0) setTimeout(() => { // Set pair opacity to 0 in data ["outer", "middle", "inner"].forEach(ringType => { const dataArray = animationData[ringType]; const pairData = dataArray.find(d => d.unitId === pairId); if (pairData) pairData.opacity = 0; }); // Update rings to reflect new opacity changeData("outer", animationData.outer, outerArc); changeData("middle", animationData.middle, middleArc); changeData("inner", animationData.inner, innerArc); // Hide current cell's green/red segments for later showCell animation hideCell(step.unitId, "outer"); hideCell(step.unitId, "inner"); // Set opacity to 1 after hiding so they're ready for showCell setTimeout(() => { outerGroup.selectAll("path").filter(d => d.data.unitId === step.unitId).style("opacity", 1); innerGroup.selectAll("path").filter(d => d.data.unitId === step.unitId).style("opacity", 1); }, 850); }, 100); } else { // SECOND OF PAIR: Just show the cells (data already set when first was shown) // Set opacity to 1 in data ["outer", "middle", "inner"].forEach(ringType => { const dataArray = animationData[ringType]; const currentData = dataArray.find(d => d.unitId === step.unitId); if (currentData) currentData.opacity = 1; }); // NOW rotate to center this slice at the top (after opacity is set) rotateToSlice(step.unitId, 600); // Update rings to reflect new opacity with smooth transition changeData("outer", animationData.outer, outerArc); changeData("middle", animationData.middle, middleArc); changeData("inner", animationData.inner, innerArc); // Fix white cell text positioning after rotation completes setTimeout(() => { // Call changeData again with same data to recalculate text transforms changeData("middle", animationData.middle, middleArc); }, 650); // Slightly after rotation duration (600ms) // Hide green/red segments for later showCell animation setTimeout(() => { hideCell(step.unitId, "outer"); hideCell(step.unitId, "inner"); // Set opacity to 1 after hiding so they're ready for showCell setTimeout(() => { outerGroup.selectAll("path").filter(d => d.data.unitId === step.unitId).style("opacity", 1); innerGroup.selectAll("path").filter(d => d.data.unitId === step.unitId).style("opacity", 1); }, 850); }, 100); } break; case 'showGreen': // Show the inner cell (it should now expand from hidden state with full opacity) showCell(step.unitId, "inner"); break; case 'showRed': // Show the outer cell (it should now expand from hidden state with full opacity) showCell(step.unitId, "outer"); break; } } // Step animation functions (exact copy from HTML) function startStepMode() { isStepMode = true; initializeBuildStepsLocal(); resetBuildState(); focusedPair = null; resetZoom(); // Hide coordinate system during step mode coordinateGroup.style("display", "none"); } function stepForward() { if (!isStepMode || currentStep >= buildSteps.length) return false; executeStep(currentStep); currentStep++; return true; } function stepBackward() { if (!isStepMode || currentStep <= 0) return false; currentStep--; // Reset and rebuild up to current step resetBuildState(); for (let i = 0; i < currentStep; i++) { executeStep(i); } return true; } function resetToFull() { isStepMode = false; currentStep = 0; animationData = {}; // Clear animation data // Show all cells cells.forEach(cell => { cellVisibility[cell] = { outer: true, middle: true, inner: true }; }); // Reset focus and zoom focusedPair = null; resetZoom(); // Reset wheel rotation to default position currentRotation = 0; updateTransform(); // Reset opacities and update with full data ["outer", "middle", "inner"].forEach(ringType => { nestedData[ringType].forEach(item => { item.opacity = 1; }); }); updateAllRings(); // Show coordinate system in full mode coordinateGroup.style("display", "block"); } function getCurrentStepInfo() { if (!isStepMode) return null; const totalSteps = buildSteps.length; if (currentStep === 0) { return { current: currentStep, total: totalSteps, unit: "none", stepType: "start", canStepForward: currentStep < totalSteps, canStepBackward: false }; } const step = buildSteps[currentStep - 1]; const stepTypeMap = { 'showWhite': 'statement', 'showGreen': 'positive', 'showRed': 'negative' }; return { current: currentStep, total: totalSteps, unit: step.unitId, stepType: stepTypeMap[step.type], canStepForward: currentStep < totalSteps, canStepBackward: currentStep > 0 }; } // Initialize - start in full mode resetToFull(); // Draw initial arrows drawAllArrows(); // Return the svg node with exposed methods (Observable pattern) return Object.assign(svg.node(), { focusPair, resetZoom, zoomToCell, rotate: (angle) => { currentRotation = angle; updateTransform(); }, // Step animation methods startStepMode, stepForward, stepBackward, resetToFull, getCurrentStepInfo, // Arrow control methods drawAllArrows, clearArrows, drawArrow, getCellCentroid, // Test function for debugging testZoom: () => { console.log('Testing zoom function...'); // Find a real path element to use as target const paths = svg.selectAll('path').nodes(); if (paths.length > 0) { const testPath = paths[0]; const testEvent = { stopPropagation: () => {}, metaKey: true, currentTarget: testPath }; zoomToCell(testEvent, testPath.__data__); } else { console.log('No path elements found for testing'); } } }); })();