25:["$","title",null,{"children":"All Polynomial Moduli over GF(2) | Lao | Observable"}] 49:T8f9f,viewof algebraicStructure = { // GF(2^n) Operations Implementation - Generalized for degrees 1-6 function multiply(a, b, reducer, degree) { if (a === 0 || b === 0) return 0; // Polynomial multiplication let result = 0; for (let i = 0; i < degree; i++) { if (b & (1 << i)) { result ^= (a << i); } } // Reduction modulo the irreducible polynomial const maxBit = 2 * degree - 1; for (let i = maxBit; i >= degree; i--) { if (result & (1 << i)) { result ^= (reducer << (i - degree)); } } const fieldSize = (1 << degree); return result & (fieldSize - 1); } function inverse(a, reducer, degree) { if (a === 0) return NaN; const fieldSize = (1 << degree); for (let i = 1; i < fieldSize; i++) { if (multiply(a, i, reducer, degree) === 1) return i; } return NaN; } function generateOperations(degree) { const fieldSize = (1 << degree); const operations = {}; // For degree n, reducers start at 2^n and go to 2^(n+1) - 1 const minReducer = fieldSize; const maxReducer = fieldSize * 2 - 1; for (let poly = minReducer; poly <= maxReducer; poly++) { operations[poly] = { add: {}, sub: {}, mul: {}, div: {} }; for (let a = 0; a < fieldSize; a++) { operations[poly].add[a] = {}; operations[poly].sub[a] = {}; operations[poly].mul[a] = {}; operations[poly].div[a] = {}; for (let b = 0; b < fieldSize; b++) { operations[poly].add[a][b] = a ^ b; operations[poly].sub[a][b] = a ^ b; operations[poly].mul[a][b] = multiply(a, b, poly, degree); if (b === 0) { operations[poly].div[a][b] = NaN; } else { const inv = inverse(b, poly, degree); operations[poly].div[a][b] = isNaN(inv) ? NaN : multiply(a, inv, poly, degree); } } } } return operations; } // Precomputed irreducible polynomials for each degree const irreduciblePolynomials = { 1: [2,3], // x + 1 2: [7], // x^2 + x + 1 3: [11, 13], // x^3 + x + 1, x^3 + x^2 + 1 4: [19, 25, 31], // x^4 + x + 1, x^4 + x^3 + 1, x^4 + x^3 + x^2 + x + 1 5: [37, 41, 47, 55, 59, 61], // Various degree 5 irreducibles 6: [67, 73, 87, 91, 97, 103, 109, 115, 117] // Various degree 6 irreducibles }; // Create HTML structure const container = d3.create("div").style("font-family", "Arial, sans-serif"); // Controls container const controls = container.append("div").style("margin-bottom", "20px"); // Add label for degree selector controls.append("label") .style("margin-right", "10px") .style("font-weight", "bold") .text("Degree:"); // Degree selector const degreeSelect = controls.append("select") .style("margin-right", "30px") .style("font-size", "14px"); for (let degree = 1; degree <= 6; degree++) { degreeSelect.append("option") .attr("value", degree) .text(degree); } degreeSelect.property("value", 6); // Default to degree 6 // Add label for polynomial selector controls.append("label") .style("margin-right", "10px") .style("font-weight", "bold") .text("Reduction:"); // Polynomial selector const polySelect = controls.append("select") .style("margin-right", "30px") .style("font-size", "14px"); // Add label for hover arrows selector controls.append("label") .style("margin-right", "10px") .style("font-weight", "bold") .text("Hover:"); // Hover arrows selector const arrowModeSelect = controls.append("select") .style("font-size", "14px") .style("margin-right", "30px"); arrowModeSelect.append("option").attr("value", "multiply").text("multiply all numbers"); arrowModeSelect.append("option").attr("value", "product_chain").text("product chain"); arrowModeSelect.append("option").attr("value", "mask_links").text("mask current links"); arrowModeSelect.property("value", "multiply"); // Default to multiply mode // Add label for link distance slider controls.append("label") .style("margin-right", "10px") .style("font-weight", "bold") .text("Link Distance:"); // Link distance slider const linkDistanceSlider = controls.append("input") .attr("type", "range") .attr("min", "1") .attr("max", "300") .attr("value", "40") .style("margin-right", "10px"); // Display current slider value const linkDistanceValue = controls.append("span") .style("font-size", "14px") .style("color", "#666") .style("margin-right", "30px") .text("40"); // Add center checkbox const centerCheckbox = controls.append("input") .attr("type", "checkbox") .attr("id", "centerCheckbox") .property("checked", true) .style("margin-right", "5px"); controls.append("label") .attr("for", "centerCheckbox") .style("font-weight", "bold") .style("margin-right", "10px") .text("Center"); // SVG const svg = container.append("svg") .attr("width", "100%") .attr("height", "800px") .style("border", "1px solid #ccc") .style("overflow", "visible"); const g = svg.append("g"); // Get actual SVG dimensions function getSVGDimensions() { const rect = svg.node().getBoundingClientRect(); // Fallback to reasonable defaults if dimensions aren't available yet const width = rect.width > 0 ? rect.width : 800; const height = rect.height > 0 ? rect.height : 800; return { width: width, height: height, centerX: width / 2, centerY: height / 2 }; } // Graph data let nodes = []; let links = []; let simulation; let currentArrows = []; let arrowGroup; let draggedNode = null; let generators = new Map(); // Store generators globally let operations = {}; // Store operations for current degree let currentDegree = 6; let fieldSize = 64; let isDragging = false; // Track if we're actively dragging let stopTimeout = null; // Store timeout for stopping simulation // Calculate cool down time in milliseconds based on link distance function getCoolDownTime(linkDistance) { if (linkDistance <= 1) { return 0; // Freeze immediately } else if (linkDistance <= 50) { // Linear interpolation from 0ms at distance 1 to 2000ms at distance 50 return (linkDistance - 1) * (2000 / 49); } else { return 2000; // 2 seconds for distance 50 and above } } // Calculate how much to allow the simulation to wind down based on link distance function getWindDownFactor(linkDistance) { if (linkDistance <= 1) { return 0; // No wind down at all - freeze immediately } else if (linkDistance <= 50) { // Linear interpolation from 0 to 1 return (linkDistance - 1) / 49; } else { return 1; // Full wind down above 50 } } // Function to start the stop timeout function startStopTimeout(linkDistance) { // Clear any existing timeout if (stopTimeout) { clearTimeout(stopTimeout); stopTimeout = null; } const coolDownTime = getCoolDownTime(linkDistance); if (coolDownTime > 0) { stopTimeout = setTimeout(() => { if (simulation) { simulation.stop(); } }, coolDownTime); } else if (coolDownTime === 0) { // Stop immediately for link distance 1 if (simulation) { simulation.stop(); } } } // Update polynomial selector based on degree function updatePolynomialSelector() { const degree = +degreeSelect.property("value"); currentDegree = degree; fieldSize = (1 << degree); // Clear existing options polySelect.selectAll("*").remove(); const minReducer = fieldSize; const maxReducer = fieldSize * 2 - 1; // Irreducible polynomials optgroup const irreducibleGroup = polySelect.append("optgroup").attr("label", "Irreducible (Fields)"); const irreducibles = irreduciblePolynomials[degree] || []; irreducibles.forEach(poly => { const binary = (poly & (fieldSize - 1)).toString(2).padStart(degree, '0'); irreducibleGroup.append("option") .attr("value", poly) .text(`${poly - fieldSize} - ${binary}`); }); // Reducible polynomials optgroup const reducibleGroup = polySelect.append("optgroup").attr("label", "Reducible (Rings)"); for (let poly = minReducer; poly <= maxReducer; poly++) { if (!irreducibles.includes(poly)) { const binary = (poly & (fieldSize - 1)).toString(2).padStart(degree, '0'); reducibleGroup.append("option") .attr("value", poly) .text(`${poly - fieldSize} - ${binary}`); } } // Set default to first irreducible if available if (irreducibles.length > 0) { polySelect.property("value", irreducibles[0]); } else { polySelect.property("value", minReducer); } } // Rainbow color scale for all nodes (will be updated based on field size) let rainbowColorScale = d3.scaleSequential(d3.interpolateTurbo).domain([0, 63]); // Generator color scale (for links) const generatorColorScale = d3.scaleOrdinal(d3.schemeCategory10); function findGeneratorsAndCycles(poly, degree) { const fieldSize = (1 << degree); // Step 1: Generate productLists for all numbers 1 to fieldSize-1 const productLists = new Map(); for (let startNum = 1; startNum < fieldSize; startNum++) { const productList = [startNum]; let current = startNum; let iterations = 0; while (iterations < fieldSize) { current = operations[poly].mul[current][startNum]; // Check if this number was already in the list before adding it const wasAlreadyInList = productList.includes(current); // Add the current number to the list productList.push(current); // Stop if we loop back to start, hit 0, or this number was already in the list if (current === startNum || current === 0 || wasAlreadyInList) { break; } iterations++; } productLists.set(startNum, productList); } // Step 2: Find minimal generators (generators whose cycles aren't contained in other cycles) const generators = []; for (let i = 1; i < fieldSize; i++) { generators.push({ num: i, on: true }); } // Step 3: Filter generators based on productList comparison for (let i = 0; i < generators.length; i++) { if (!generators[i].on) continue; const currentNum = generators[i].num; const currentList = productLists.get(currentNum); for (let j = 0; j < generators.length; j++) { if (i === j || !generators[j].on) continue; const compareNum = generators[j].num; const compareList = productLists.get(compareNum); // Only turn off if one generator appears in the other's product list const compareListContainsCurrentGenerator = compareList.includes(currentNum); const currentListContainsCompareGenerator = currentList.includes(compareNum); if (compareListContainsCurrentGenerator || currentListContainsCompareGenerator) { if (currentList.length < compareList.length) { // Current has shorter list, turn it off generators[i].on = false; break; } else if (currentList.length === compareList.length) { // Same length, turn off the higher numbered one if (currentNum > compareNum) { generators[i].on = false; break; } else { generators[j].on = false; } } else { // Current has longer list, turn off the compare one generators[j].on = false; } } } } // Step 4: Create final generators map and nodeToGenerator mapping const finalGenerators = new Map(); const nodeToGenerator = new Map(); generators.forEach(gen => { if (gen.on) { const productList = productLists.get(gen.num); // Only include if the product list has more than 1 element (creates actual links) if (productList.length > 1) { finalGenerators.set(gen.num, productList); // Map all nodes in this product list to this generator productList.forEach(node => { if (node !== 0) { // Don't map 0 nodeToGenerator.set(node, gen.num); } }); } } }); return { generators: finalGenerators, nodeToGenerator, productLists }; } function updateGraph() { const degree = +degreeSelect.property("value"); const selectedPoly = +polySelect.property("value"); // Update field size and color scale fieldSize = (1 << degree); rainbowColorScale = d3.scaleSequential(d3.interpolateTurbo).domain([0, fieldSize - 1]); // Generate operations for current degree if not cached if (!operations[selectedPoly]) { const newOperations = generateOperations(degree); // Merge new operations into the global operations object Object.assign(operations, newOperations); } const { generators: newGenerators, nodeToGenerator, productLists } = findGeneratorsAndCycles(selectedPoly, degree); // Store generators and product lists globally generators = newGenerators; window.productLists = productLists; // Store for product chain mode // Debug: log the generators to see how many we have console.log("Generators found:", Array.from(generators.keys())); // Store current node positions if they exist const currentPositions = {}; if (nodes.length > 0) { nodes.forEach(node => { if (node.id < fieldSize) { // Only preserve positions for nodes that still exist currentPositions[node.id] = { x: node.x, y: node.y, vx: node.vx, vy: node.vy }; } }); } // Create nodes, preserving positions if available nodes = Array.from({ length: fieldSize }, (_, i) => { const node = { id: i, value: i, generator: nodeToGenerator.get(i) || i }; // Use existing position if available if (currentPositions[i]) { node.x = currentPositions[i].x; node.y = currentPositions[i].y; node.vx = currentPositions[i].vx || 0; node.vy = currentPositions[i].vy || 0; } return node; }); // Create links based on product lists (don't close the loop) // First collect all raw connections const rawConnections = []; generators.forEach((productList, gen) => { for (let i = 0; i < productList.length - 1; i++) { const source = productList[i]; const target = productList[i + 1]; // Allow links to 0, but not from 0, and not self-loops if (source !== 0 && source !== target) { rawConnections.push({ source: source, target: target, generator: gen }); } // Stop if we hit 0 (don't continue the chain) if (target === 0) break; } }); // Aggregate connections between the same node pairs const connectionMap = new Map(); rawConnections.forEach(conn => { const key = `${conn.source}-${conn.target}`; if (!connectionMap.has(key)) { connectionMap.set(key, { source: conn.source, target: conn.target, generators: [], count: 0 }); } connectionMap.get(key).generators.push(conn.generator); connectionMap.get(key).count++; }); // Create final links with averaged colors and scaled widths links = Array.from(connectionMap.values()).map(conn => { // Average the generator colors const colors = conn.generators.map(gen => { const colorStr = rainbowColorScale(gen); const color = d3.color(colorStr); return { r: color.r, g: color.g, b: color.b }; }); const avgColor = { r: Math.round(colors.reduce((sum, c) => sum + c.r, 0) / colors.length), g: Math.round(colors.reduce((sum, c) => sum + c.g, 0) / colors.length), b: Math.round(colors.reduce((sum, c) => sum + c.b, 0) / colors.length) }; return { source: conn.source, target: conn.target, generators: conn.generators, count: conn.count, averageColor: `rgb(${avgColor.r}, ${avgColor.g}, ${avgColor.b})` }; }); // Only initialize positions intelligently if this is the first load or degree changed const isFirstLoad = Object.keys(currentPositions).length === 0; if (isFirstLoad) { const dimensions = getSVGDimensions(); const generatorGroups = new Map(); generators.forEach((productList, gen) => { generatorGroups.set(gen, productList); }); let groupIndex = 0; const groupRadius = Math.min(dimensions.width, dimensions.height) * 0.15; // 15% of smaller dimension const centerX = dimensions.centerX; const centerY = dimensions.centerY; generatorGroups.forEach((productList, gen) => { const groupAngle = (groupIndex * 2 * Math.PI) / generatorGroups.size; const groupCenterX = centerX + Math.cos(groupAngle) * groupRadius; const groupCenterY = centerY + Math.sin(groupAngle) * groupRadius; productList.forEach((nodeId, i) => { if (nodeId !== 0 && nodeId < fieldSize) { // Don't position node 0 and ensure within field const angle = (i * 2 * Math.PI) / productList.length; const radius = Math.min(40, productList.length * 6); nodes[nodeId].x = groupCenterX + Math.cos(angle) * radius; nodes[nodeId].y = groupCenterY + Math.sin(angle) * radius; } }); groupIndex++; }); // Random positions for unconnected nodes nodes.forEach(node => { if (node.x === undefined) { node.x = dimensions.width * 0.25 + Math.random() * dimensions.width * 0.5; // Position within middle 50% of canvas node.y = dimensions.height * 0.25 + Math.random() * dimensions.height * 0.5; } }); } updateVisualization(); } function updateVisualization() { const selectedPoly = +polySelect.property("value"); // Clear previous g.selectAll("*").remove(); // Create links first (so they're at the bottom layer) const link = g.append("g") .selectAll("line") .data(links) .join("line") .attr("stroke", d => d.averageColor) .attr("stroke-width", d => Math.max(1, Math.min(6, d.count * 1.5))) // Scale width by count, min 1, max 6 .attr("stroke-opacity", 0.6) .attr("class", "main-link"); // Add class for masking // Create arrow group second (so it's above links but below nodes) arrowGroup = g.append("g").attr("class", "arrows"); // Create nodes const node = g.append("g") .selectAll("g") .data(nodes) .join("g") .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); node.append("circle") .attr("r", 15) .attr("fill", d => { // Only color generator nodes (the keys in the generators Map) return generators.has(d.value) ? rainbowColorScale(d.value) : "white"; }) .attr("stroke", d => { // Check if this node is idempotent (num*num=num) const isIdempotent = operations[selectedPoly].mul[d.value][d.value] === d.value; return isIdempotent ? "black" : "#666"; }) .attr("stroke-width", d => { // Thick stroke for idempotent elements const isIdempotent = operations[selectedPoly].mul[d.value][d.value] === d.value; return isIdempotent ? 4 : 2; }); node.append("text") .attr("text-anchor", "middle") .attr("dy", "0.3em") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("fill", d => { if (generators.has(d.value)) { // Use white text for darker colors, black for lighter colors const color = d3.color(rainbowColorScale(d.value)); const brightness = (color.r * 299 + color.g * 587 + color.b * 114) / 1000; return brightness > 128 ? "black" : "white"; } else { // White nodes get black text return "black"; } }) .text(d => d.value); // Add hover interactions node.on("mouseover", function(event, d) { // Only show arrows if no node is being dragged, or this is the dragged node if (!draggedNode) { showArrowsForNode(d, this); } }) .on("mouseout", function(event, d) { // Only hide arrows if no node is being dragged if (!draggedNode) { hideArrows(); } }); function showArrowsForNode(nodeData, nodeElement) { const selectedPoly = +polySelect.property("value"); const arrowMode = arrowModeSelect.property("value"); // Restore all nodes to their original colors first node.selectAll("circle").attr("fill", d => { return generators.has(d.value) ? rainbowColorScale(d.value) : "white"; }); node.selectAll("text").attr("fill", d => { if (generators.has(d.value)) { const color = d3.color(rainbowColorScale(d.value)); const brightness = (color.r * 299 + color.g * 587 + color.b * 114) / 1000; return brightness > 128 ? "black" : "white"; } else { return "black"; } }); // Change this node's appearance d3.select(nodeElement).select("circle").attr("fill", "black"); d3.select(nodeElement).select("text").attr("fill", "white"); // Create arrow data based on mode currentArrows = []; if (arrowMode === "multiply") { // Reduce opacity of all existing links so arrows are more visible g.selectAll(".main-link").attr("stroke-opacity", 0.1); // Original behavior: show multiplication by this node for (let sourceValue = 0; sourceValue < fieldSize; sourceValue++) { const result = operations[selectedPoly].mul[sourceValue][nodeData.value]; if (sourceValue !== result) { // Don't draw arrow to self currentArrows.push({ source: nodes[sourceValue], target: nodes[result], sourceValue: sourceValue }); } } } else if (arrowMode === "product_chain") { // Reduce opacity of all existing links so arrows are more visible g.selectAll(".main-link").attr("stroke-opacity", 0.1); // Show the product chain this node belongs to const productList = window.productLists.get(nodeData.value); if (productList && productList.length > 1) { for (let i = 0; i < productList.length - 1; i++) { const sourceValue = productList[i]; const targetValue = productList[i + 1]; if (sourceValue !== targetValue && sourceValue < fieldSize && targetValue < fieldSize) { currentArrows.push({ source: nodes[sourceValue], target: nodes[targetValue], sourceValue: nodeData.value // Use the hovered node's value for coloring }); } // Continue even if we hit 0 to show the complete chain } } } else if (arrowMode === "mask_links") { // Find which links are part of this node's product chain const productList = window.productLists.get(nodeData.value); const chainLinks = new Set(); if (productList && productList.length > 1) { for (let i = 0; i < productList.length - 1; i++) { const sourceValue = productList[i]; const targetValue = productList[i + 1]; if (sourceValue !== targetValue && sourceValue < fieldSize && targetValue < fieldSize) { // Create both directional keys since links might be stored either way chainLinks.add(`${sourceValue}-${targetValue}`); chainLinks.add(`${targetValue}-${sourceValue}`); } } } // Set opacity based on whether each link is part of the chain g.selectAll(".main-link").attr("stroke-opacity", function(d) { // Handle both cases: when d.source/d.target are objects or numbers const sourceId = (typeof d.source === 'object') ? d.source.id : d.source; const targetId = (typeof d.target === 'object') ? d.target.id : d.target; const linkKey1 = `${sourceId}-${targetId}`; const linkKey2 = `${targetId}-${sourceId}`; const isInChain = chainLinks.has(linkKey1) || chainLinks.has(linkKey2); return isInChain ? 0.6 : 0; }); } // Update arrows immediately updateArrows(); } function hideArrows() { // Restore all node appearances to original colors node.selectAll("circle").attr("fill", d => { return generators.has(d.value) ? rainbowColorScale(d.value) : "white"; }); node.selectAll("text").attr("fill", d => { if (generators.has(d.value)) { const color = d3.color(rainbowColorScale(d.value)); const brightness = (color.r * 299 + color.g * 587 + color.b * 114) / 1000; return brightness > 128 ? "black" : "white"; } else { return "black"; } }); // Restore all link opacity to default g.selectAll(".main-link").attr("stroke-opacity", 0.6); // Remove arrows currentArrows = []; // Update arrows immediately updateArrows(); } function updateArrows() { if (arrowGroup && currentArrows.length > 0) { const arrowPaths = arrowGroup.selectAll("path") .data(currentArrows); // Enter new arrows arrowPaths.enter() .append("path") .attr("fill", "none") .attr("stroke", d => rainbowColorScale(d.sourceValue)) .attr("stroke-width", 1.5) .attr("marker-end", d => getMarkerForColor(rainbowColorScale(d.sourceValue))); // Update all arrows arrowGroup.selectAll("path") .attr("stroke", d => rainbowColorScale(d.sourceValue)) .attr("marker-end", d => getMarkerForColor(rainbowColorScale(d.sourceValue))) .attr("d", d => { const dx = d.target.x - d.source.x; const dy = d.target.y - d.source.y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < 30) return ""; // Don't draw if too close const unitX = dx / dist; const unitY = dy / dist; // Start and end points offset by node radius const startX = d.source.x + unitX * 15; const startY = d.source.y + unitY * 15; const endX = d.target.x - unitX * 15; const endY = d.target.y - unitY * 15; // Calculate control point for clockwise curve const midX = (startX + endX) / 2; const midY = (startY + endY) / 2; // Perpendicular vector (rotated 90 degrees clockwise) const perpX = dy / dist; const perpY = -dx / dist; // Control point offset (curve strength based on distance) const curveStrength = Math.min(20, dist * 0.1); const controlX = midX + perpX * curveStrength; const controlY = midY + perpY * curveStrength; return `M ${startX} ${startY} Q ${controlX} ${controlY} ${endX} ${endY}`; }); // Remove old arrows arrowPaths.exit().remove(); } else { // Clear arrows when not hovering if (arrowGroup) { arrowGroup.selectAll("path").remove(); } } } // Add dynamic arrow markers const defs = svg.append("defs"); // Function to create or get marker for a specific color function getMarkerForColor(color) { // Convert color to a clean ID const colorId = color.replace(/[^a-zA-Z0-9]/g, '').replace(/rgb$|$|,/g, '').replace(/\s/g, ''); const markerId = `arrowhead-${colorId}`; // Check if marker already exists if (!defs.select(`#${markerId}`).node()) { const marker = defs.append("marker") .attr("id", markerId) .attr("viewBox", "-0 -5 10 10") .attr("refX", 5) .attr("refY", 0) .attr("orient", "auto") .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("xoverflow", "visible"); marker.append("svg:path") .attr("d", "M 0,-5 L 10 ,0 L 0,5") .attr("fill", color) .style("stroke", "none"); } return `url(#${markerId})`; } // Setup simulation const dimensions = getSVGDimensions(); const centerEnabled = centerCheckbox.property("checked"); const linkDistance = +linkDistanceSlider.property("value"); simulation = d3.forceSimulation(nodes) .alpha(0.01) // Start with very low alpha for gentle motion .alphaTarget(0) .force("link", d3.forceLink(links).id(d => d.id) .distance(linkDistance) .strength(5)) .force("charge", d3.forceManyBody().strength(-250)) // Keep full charge strength .force("collision", d3.forceCollide().radius(20)) .alphaDecay(0.02) // Slower decay for gentler transitions .velocityDecay(0.8) // Add damping .on("tick", ticked); // Conditionally add center forces if (centerEnabled) { simulation .force("x", d3.forceX(dimensions.centerX).strength(d => { // Increase strength based on distance from center const dx = d.x - dimensions.centerX; const distance = Math.sqrt(dx * dx + (d.y - dimensions.centerY) * (d.y - dimensions.centerY)); return 0.1 * (distance / (Math.min(dimensions.width, dimensions.height) * 0.25)); // Scale by distance })) .force("y", d3.forceY(dimensions.centerY).strength(d => { // Increase strength based on distance from center const dy = d.y - dimensions.centerY; const distance = Math.sqrt((d.x - dimensions.centerX) * (d.x - dimensions.centerX) + dy * dy); return 0.1 * (distance / (Math.min(dimensions.width, dimensions.height) * 0.25)); // Scale by distance })); } function ticked() { const centerEnabled = centerCheckbox.property("checked"); const linkDistance = +linkDistanceSlider.property("value"); const windDownFactor = getWindDownFactor(linkDistance); // Dynamically adjust charge strength only when not dragging and wind down is happening if (!isDragging && windDownFactor < 1) { // Reduce charge strength based on wind down factor simulation.force("charge").strength(-250 * windDownFactor); } else { // Full charge strength when dragging or full wind down simulation.force("charge").strength(-250); } // Only apply boundary walls if center is enabled if (centerEnabled) { // Add boundary walls - constrain nodes within SVG bounds const dimensions = getSVGDimensions(); const nodeRadius = 15; const margin = 5; // Small margin from edge const minX = nodeRadius + margin; const maxX = dimensions.width - nodeRadius - margin; const minY = nodeRadius + margin; const maxY = dimensions.height - nodeRadius - margin; nodes.forEach(d => { // Constrain x position if (d.x < minX) { d.x = minX; d.vx = Math.abs(d.vx) * 0.1; // Bounce back with reduced velocity } else if (d.x > maxX) { d.x = maxX; d.vx = -Math.abs(d.vx) * 0.1; // Bounce back with reduced velocity } // Constrain y position if (d.y < minY) { d.y = minY; d.vy = Math.abs(d.vy) * 0.1; // Bounce back with reduced velocity } else if (d.y > maxY) { d.y = maxY; d.vy = -Math.abs(d.vy) * 0.1; // Bounce back with reduced velocity } }); } link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node.attr("transform", d => `translate(${d.x},${d.y})`); // Update arrows every frame if they exist updateArrows(); } function dragstarted(event, d) { isDragging = true; // Set dragging flag // Clear any existing stop timeout when starting to drag if (stopTimeout) { clearTimeout(stopTimeout); stopTimeout = null; } if (!event.active) simulation.alphaTarget(0.1).restart(); d.fx = d.x; d.fy = d.y; draggedNode = d; showArrowsForNode(d, this); } function dragged(event, d) { d.fx = event.x; d.fy = event.y; } function dragended(event, d) { isDragging = false; // Clear dragging flag const linkDistance = +linkDistanceSlider.property("value"); const windDownFactor = getWindDownFactor(linkDistance); if (!event.active) { if (windDownFactor === 0) { // Freeze immediately - no wind down simulation.stop(); } else { // Set alphaTarget to 0 for wind down simulation.alphaTarget(0); // Start the stop timeout startStopTimeout(linkDistance); } } d.fx = null; d.fy = null; draggedNode = null; hideArrows(); } } // Event listeners degreeSelect.on("change", function() { updatePolynomialSelector(); updateGraph(); }); polySelect.on("change", updateGraph); // Link distance slider event listener linkDistanceSlider.on("input", function() { const distance = +this.value; linkDistanceValue.text(distance); // Clear any existing stop timeout if (stopTimeout) { clearTimeout(stopTimeout); stopTimeout = null; } // Update the simulation's link force if it exists if (simulation) { simulation.force("link").distance(distance); simulation.alpha(0.3).restart(); // Start the stop timeout startStopTimeout(distance); } }); // Center checkbox event listener centerCheckbox.on("change", function() { const centerEnabled = this.checked; const dimensions = getSVGDimensions(); const linkDistance = +linkDistanceSlider.property("value"); // Clear any existing stop timeout if (stopTimeout) { clearTimeout(stopTimeout); stopTimeout = null; } if (simulation) { if (centerEnabled) { // Add center forces simulation .force("x", d3.forceX(dimensions.centerX).strength(d => { const dx = d.x - dimensions.centerX; const distance = Math.sqrt(dx * dx + (d.y - dimensions.centerY) * (d.y - dimensions.centerY)); return 0.1 * (distance / (Math.min(dimensions.width, dimensions.height) * 0.25)); })) .force("y", d3.forceY(dimensions.centerY).strength(d => { const dy = d.y - dimensions.centerY; const distance = Math.sqrt((d.x - dimensions.centerX) * (d.x - dimensions.centerX) + dy * dy); return 0.1 * (distance / (Math.min(dimensions.width, dimensions.height) * 0.25)); })); } else { // Remove center forces simulation.force("x", null).force("y", null); } // Restart simulation with moderate alpha simulation.alpha(0.3).restart(); // Start the stop timeout startStopTimeout(linkDistance); } }); // Initialize polynomial selector and graph setTimeout(() => { updatePolynomialSelector(); updateGraph(); }, 10); return container.node(); }4a:T7077,viewof operationsTable = { // Reuse multiply and inverse functions from algebraicStructure function multiply(a, b, reducer, degree) { if (a === 0 || b === 0) return 0; let result = 0; for (let i = 0; i < degree; i++) { if (b & (1 << i)) { result ^= (a << i); } } const maxBit = 2 * degree - 1; for (let i = maxBit; i >= degree; i--) { if (result & (1 << i)) { result ^= (reducer << (i - degree)); } } const fieldSize = (1 << degree); return result & (fieldSize - 1); } function inverse(a, reducer, degree) { if (a === 0) return NaN; const fieldSize = (1 << degree); for (let i = 1; i < fieldSize; i++) { if (multiply(a, i, reducer, degree) === 1) return i; } return NaN; } // Special operations function trace(x, reducer, degree) { let result = x; let current = x; for (let i = 1; i < degree; i++) { // Square current (Frobenius map) current = multiply(current, current, reducer, degree); result ^= current; } return result; } function norm(x, reducer, degree) { if (x === 0) return 0; const fieldSize = (1 << degree); // N(x) = x^(2^n - 1) = x^63 for degree 6 let result = x; let power = fieldSize - 2; // We already have x^1 let base = x; while (power > 0) { if (power & 1) { result = multiply(result, base, reducer, degree); } base = multiply(base, base, reducer, degree); power >>= 1; } return result; } function minimalPolynomial(x, reducer, degree) { // Compute conjugates const conjugates = [x]; let current = x; for (let i = 1; i < degree; i++) { current = multiply(current, current, reducer, degree); if (current === x) break; if (!conjugates.includes(current)) { conjugates.push(current); } } return conjugates; } function multiplicativeOrder(x, reducer, degree) { if (x === 0) return 0; const fieldSize = (1 << degree); let current = x; for (let i = 1; i < fieldSize; i++) { current = multiply(current, x, reducer, degree); if (current === 1) return i + 1; } return NaN; } function isIdempotent(x, reducer, degree) { return multiply(x, x, reducer, degree) === x; } function isNilpotent(x, reducer, degree) { if (x === 0) return true; const fieldSize = (1 << degree); let current = x; for (let i = 1; i < fieldSize; i++) { current = multiply(current, x, reducer, degree); if (current === 0) return true; } return false; } function isUnit(x, reducer, degree) { return !isNaN(inverse(x, reducer, degree)); } function isZeroDivisor(x, reducer, degree) { if (x === 0) return true; const fieldSize = (1 << degree); for (let i = 1; i < fieldSize; i++) { if (multiply(x, i, reducer, degree) === 0) return true; } return false; } function frobenius(x, reducer, degree) { return multiply(x, x, reducer, degree); } function squareRoot(x, reducer, degree) { // In GF(2^n), square root is x^(2^(n-1)) let result = x; for (let i = 0; i < degree - 1; i++) { result = multiply(result, result, reducer, degree); } return result; } function differential(x, reducer, degree) { // D(x) = x^2 + x const x2 = multiply(x, x, reducer, degree); return x2 ^ x; } // Precomputed irreducible polynomials const irreduciblePolynomials = { 1: [2, 3], 2: [7], 3: [11, 13], 4: [19, 25, 31], 5: [37, 41, 47, 55, 59, 61], 6: [67, 73, 87, 91, 97, 103, 109, 115, 117] }; // Create container const container = d3.create("div").style("font-family", "Arial, sans-serif"); // Controls const controls = container.append("div").style("margin-bottom", "20px"); // Color scheme selector controls.append("label") .style("margin-right", "10px") .style("font-weight", "bold") .text("Color:"); const colorSelect = controls.append("select") .style("margin-right", "20px") .style("font-size", "14px"); const colorSchemes = [ { name: "Turbo", fn: d3.interpolateTurbo }, { name: "Viridis", fn: d3.interpolateViridis }, { name: "Plasma", fn: d3.interpolatePlasma }, { name: "Inferno", fn: d3.interpolateInferno }, { name: "Magma", fn: d3.interpolateMagma }, { name: "Rainbow", fn: d3.interpolateRainbow }, { name: "Sinebow", fn: d3.interpolateSinebow }, { name: "Cool", fn: d3.interpolateCool }, { name: "Warm", fn: d3.interpolateWarm }, { name: "Spectral", fn: d3.interpolateSpectral }, { name: "YlGnBu", fn: d3.interpolateYlGnBu }, { name: "RdPu", fn: d3.interpolateRdPu }, ]; colorSchemes.forEach(scheme => { colorSelect.append("option") .attr("value", scheme.name) .text(scheme.name); }); // Display mode selector controls.append("label") .style("margin-right", "10px") .style("font-weight", "bold") .text("Display:"); const displaySelect = controls.append("select") .style("font-size", "14px") .style("margin-right", "20px"); // Product of all elements with all elements under selected modulus displaySelect.append("optgroup").attr("label", "Product table") displaySelect.append("option").attr("value", "add").text("Addition"); displaySelect.append("option").attr("value", "multiply").text("Multiplication"); displaySelect.append("option").attr("value", "divide").text("Division"); //displaySelect.append("option").attr("value", "operations").text("Special Operations"); // Product of all elements with selected element across all moduli displaySelect.append("optgroup").attr("label", "Modulus table") displaySelect.append("option").attr("value", "modMultiply").text("Multiply across moduli"); displaySelect.append("option").attr("value", "modDivide1").text("Elements / Vector"); displaySelect.append("option").attr("value", "modDivide2").text("Vector / Elements"); displaySelect.append("option").attr("value", "modMultInverse").text("Mult Inverse"); displaySelect.append("option").attr("value", "modMultOrder").text("Mult Order"); displaySelect.append("option").attr("value", "modTrace").text("Trace"); displaySelect.append("option").attr("value", "modNorm").text("Norm"); displaySelect.append("option").attr("value", "modSquareRoot").text("√x"); displaySelect.append("option").attr("value", "modFrobenius").text("x²"); displaySelect.append("option").attr("value", "modDifferential").text("Differential"); displaySelect.append("option").attr("value", "modMinPolyDegree").text("Min Poly Degree"); displaySelect.append("option").attr("value", "modSubfieldMembership").text("Subfield Membership"); displaySelect.append("option").attr("value", "modIdempotent").text("Idempotent"); displaySelect.append("option").attr("value", "modNilpotent").text("Nilpotent"); displaySelect.append("option").attr("value", "modUnit").text("Unit"); displaySelect.append("option").attr("value", "modZeroDivisor").text("Zero Divisor"); displaySelect.append("optgroup").attr("label", "Boolean operations") displaySelect.append("option").attr("value", "and").text("AND"); displaySelect.append("option").attr("value", "or").text("OR"); displaySelect.append("option").attr("value", "nand").text("NAND"); displaySelect.append("option").attr("value", "nor").text("NOR"); displaySelect.append("option").attr("value", "xor").text("XOR"); displaySelect.append("option").attr("value", "xnor").text("XNOR"); // Degree selector controls.append("label") .style("margin-right", "10px") .style("font-weight", "bold") .text("Degree:"); const degreeSelect = controls.append("select") .style("margin-right", "20px") .style("font-size", "14px"); for (let degree = 1; degree <= 6; degree++) { degreeSelect.append("option") .attr("value", degree) .text(degree); } degreeSelect.property("value", 6); // Reduction selector (label will be updated dynamically) const reductionLabel = controls.append("label") .style("margin-right", "10px") .style("font-weight", "bold") .text("Modulus Reduction:"); const reductionSelect = controls.append("select") .style("margin-right", "20px") .style("font-size", "14px"); // Table container with horizontal scroll const tableContainer = container.append("div") .style("overflow-x", "auto") // Style element for table CSS const style = container.append("style").text(` .ops-table { border-collapse: collapse; font-size: 11px; border: none; width:1%; } .ops-table th, .ops-table td { border: none; padding: 2px 0px; text-align: center; position: relative; min-width:17px; transition: background-color 0.2s ease, color 0.2s ease; } .ops-table th { background-color: #f0f0f0; font-weight: bold; position: sticky; top: 0; z-index: 10; border-bottom: 2px solid black; } .ops-table th:first-child { position: sticky; left: 0; z-index: 11; background-color: #f0f0f0; border-right: 2px solid black; } .ops-table td:first-child { position: sticky; left: 0; background-color: #f8f8f8; font-weight: bold; z-index: 9; border-right: 2px solid black; } .ops-table tbody tr { border: none; } .ops-table tbody tr td { border: none; } .ops-table td.highlight, .ops-table th.highlight { background-color: rgb(255, 255, 100) !important; color: black !important; font-weight: bold; transition: none; } .ops-table .nan-cell { color: #999; font-style: italic; } .ops-table .vector-display { font-size: 10px; color: #666; } .ops-table .number-display { } `); function updateReductionSelector() { const degree = +degreeSelect.property("value"); const fieldSize = (1 << degree); const displayMode = displaySelect.property("value"); const isModulusTable = ["modMultiply", "modDivide1", "modDivide2"].includes(displayMode); reductionSelect.selectAll("*").remove(); const minReducer = fieldSize; const maxReducer = fieldSize * 2 - 1; const irreducibles = irreduciblePolynomials[degree] || []; if (isModulusTable) { // For modulus table modes, create a simple sorted list without optgroups const allReducers = []; for (let poly = minReducer; poly <= maxReducer; poly++) { allReducers.push(poly); } // Sort numerically allReducers.sort((a, b) => a - b); allReducers.forEach(poly => { const binary = (poly & (fieldSize - 1)).toString(2).padStart(degree, '0'); reductionSelect.append("option") .attr("value", poly) .text(`${poly - fieldSize} - ${binary}`); }); } else { // For other modes, use the original optgroup structure // Irreducibles const irreducibleGroup = reductionSelect.append("optgroup") .attr("label", "Irreducible (Fields)"); irreducibles.forEach(poly => { const binary = (poly & (fieldSize - 1)).toString(2).padStart(degree, '0'); irreducibleGroup.append("option") .attr("value", poly) .text(`${poly - fieldSize} - ${binary}`); }); // Reducibles const reducibleGroup = reductionSelect.append("optgroup") .attr("label", "Reducible (Rings)"); for (let poly = minReducer; poly <= maxReducer; poly++) { if (!irreducibles.includes(poly)) { const binary = (poly & (fieldSize - 1)).toString(2).padStart(degree, '0'); reducibleGroup.append("option") .attr("value", poly) .text(`${poly - fieldSize} - ${binary}`); } } } // Set default selection if (irreducibles.length > 0) { reductionSelect.property("value", irreducibles[0]); } else { reductionSelect.property("value", minReducer); } } function updateReductionLabel() { const displayMode = displaySelect.property("value"); const isModulusTable = ["modMultiply", "modDivide1", "modDivide2"].includes(displayMode); const usesVector = ["modMultiply", "modDivide1", "modDivide2"].includes(displayMode); const showReductionControls = !["modTrace", "modNorm", "modFrobenius", "modSquareRoot", "modDifferential", "modMultOrder", "modIdempotent", "modNilpotent", "modUnit", "modZeroDivisor", "modMinPolyDegree", "modSubfieldMembership", "modMultInverse"].includes(displayMode); reductionLabel.text(isModulusTable ? "Vector:" : "Modulus Reduction:"); // Show/hide the reduction controls reductionLabel.style("display", showReductionControls ? "inline" : "none"); reductionSelect.style("display", showReductionControls ? "inline" : "none"); } function formatElement(value, degree, colorScale) { const binary = value.toString(2).padStart(degree, '0'); const color = colorScale(value); // Calculate text color based on background brightness const rgb = d3.color(color); const brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000; const textColor = brightness > 128 ? "#00000090" : "#FFFFFF90"; return { html: `

${value}

`, backgroundColor: color, textColor: textColor }; } function createBinaryOperationTable(operation, operationName) { const degree = +degreeSelect.property("value"); const reducer = +reductionSelect.property("value"); const fieldSize = (1 << degree); const colorSchemeName = colorSelect.property("value"); const colorScheme = colorSchemes.find(s => s.name === colorSchemeName).fn; const colorScale = d3.scaleSequential(colorScheme).domain([0, fieldSize - 1]); const table = d3.create("table").attr("class", "ops-table"); // Header row const headerRow = table.append("thead").append("tr"); headerRow.append("th").html(`${operationName}`); // FIX: Add data-value attribute to column headers for (let b = 0; b < fieldSize; b++) { const formatted = formatElement(b, degree, colorScale); headerRow.append("th") .style("background-color", formatted.backgroundColor) .style("color", formatted.textColor) .html(formatted.html) .attr("data-value", b); // FIXED: Added data-value attribute } // Data rows const tbody = table.append("tbody"); for (let a = 0; a < fieldSize; a++) { const row = tbody.append("tr"); const formatted = formatElement(a, degree, colorScale); row.append("td") .style("background-color", formatted.backgroundColor) .style("color", formatted.textColor) .html(formatted.html) .attr("data-value", a); for (let b = 0; b < fieldSize; b++) { let result; if (operation === "add") { result = a ^ b; } else if (operation === "multiply") { result = multiply(a, b, reducer, degree); } else if (operation === "divide") { if (b === 0) { result = NaN; } else { const invB = inverse(b, reducer, degree); result = isNaN(invB) ? NaN : multiply(a, invB, reducer, degree); } } else if (operation === "and") { result = a & b; } else if (operation === "or") { result = a | b; } else if (operation === "xor") { result = a ^ b; } else if (operation === "nand") { result = ~(a & b) & (fieldSize - 1); } else if (operation === "nor") { result = ~(a | b) & (fieldSize - 1); } else if (operation === "xnor") { result = ~(a ^ b) & (fieldSize - 1); } const cell = row.append("td") .attr("data-value", isNaN(result) ? "nan" : result); if (isNaN(result)) { cell.attr("class", "nan-cell").text("—"); } else { const resultFormatted = formatElement(result, degree, colorScale); cell.style("background-color", resultFormatted.backgroundColor) .style("color", resultFormatted.textColor) .html(resultFormatted.html); } } } return table.node(); } function createModulusTable(operation) { const degree = +degreeSelect.property("value"); const vector = +reductionSelect.property("value"); // This is now the "vector" const fieldSize = (1 << degree); const colorSchemeName = colorSelect.property("value"); const colorScheme = colorSchemes.find(s => s.name === colorSchemeName).fn; const colorScale = d3.scaleSequential(colorScheme).domain([0, fieldSize - 1]); // Get all possible reduction polynomials for this degree const minReducer = fieldSize; const maxReducer = fieldSize * 2 - 1; const allReducers = []; for (let poly = minReducer; poly <= maxReducer; poly++) { allReducers.push(poly); } const table = d3.create("table").attr("class", "ops-table"); // Header row const headerRow = table.append("thead").append("tr"); headerRow.append("th").text("El"); // Column headers are the reduction polynomials allReducers.forEach(reducer => { const binary = (reducer & (fieldSize - 1)).toString(2).padStart(degree, '0'); headerRow.append("th") .text(`${reducer - fieldSize}`) .attr("title", `${reducer} - ${binary}`) .attr("data-value", reducer) .style("font-size", "10px"); }); // Data rows const tbody = table.append("tbody"); for (let element = 0; element < fieldSize; element++) { const row = tbody.append("tr"); const formatted = formatElement(element, degree, colorScale); row.append("td") .style("background-color", formatted.backgroundColor) .style("color", formatted.textColor) .html(formatted.html) .attr("data-value", element); allReducers.forEach(reducer => { let result; if (operation === "modMultiply") { // element * vector mod reducer result = multiply(element, vector, reducer, degree); } else if (operation === "modDivide1") { // element / vector mod reducer if (vector === 0) { result = NaN; } else { const invVector = inverse(vector, reducer, degree); result = isNaN(invVector) ? NaN : multiply(element, invVector, reducer, degree); } } else if (operation === "modDivide2") { // vector / element mod reducer if (element === 0) { result = NaN; } else { const invElement = inverse(element, reducer, degree); result = isNaN(invElement) ? NaN : multiply(vector, invElement, reducer, degree); } } else if (operation === "modTrace") { result = trace(element, reducer, degree); } else if (operation === "modNorm") { result = norm(element, reducer, degree); } else if (operation === "modFrobenius") { result = frobenius(element, reducer, degree); } else if (operation === "modSquareRoot") { result = squareRoot(element, reducer, degree); } else if (operation === "modDifferential") { result = differential(element, reducer, degree); } else if (operation === "modMultOrder") { result = multiplicativeOrder(element, reducer, degree); } else if (operation === "modIdempotent") { result = isIdempotent(element, reducer, degree); } else if (operation === "modNilpotent") { result = isNilpotent(element, reducer, degree); } else if (operation === "modUnit") { result = isUnit(element, reducer, degree); } else if (operation === "modZeroDivisor") { result = isZeroDivisor(element, reducer, degree); } else if (operation === "modMinPolyDegree") { const conjugates = minimalPolynomial(element, reducer, degree); result = conjugates.length; } else if (operation === "modSubfieldMembership") { // Find the largest subfield GF(2^k) that contains this element // Element x belongs to GF(2^k) if x^(2^k) = x result = 1; // At minimum, every element belongs to GF(2^1) = GF(2) for (let k = 1; k < degree; k++) { let current = element; for (let i = 0; i < k; i++) { current = multiply(current, current, reducer, degree); } if (current === element && degree % k === 0) { result = k; } } } else if (operation === "modMultInverse") { result = inverse(element, reducer, degree); } const cell = row.append("td"); if (typeof result === "boolean") { // Handle boolean results (for idempotent, nilpotent, unit, zero divisor) cell.text(result ? "✓" : "✗") .style("color", result ? "white" : "red") .style("background-color", result ? "steelblue" : "white") .style("font-weight", "bold") .attr("data-value", result ? "true" : "false"); } else if (isNaN(result)) { cell.attr("class", "nan-cell") .text("—") .attr("data-value", "nan"); } else if (result < fieldSize) { // Handle numeric results that fit in field size (use color coding) const resultFormatted = formatElement(result, degree, colorScale); cell.style("background-color", resultFormatted.backgroundColor) .style("color", resultFormatted.textColor) .html(resultFormatted.html) .attr("data-value", result); } else { // Handle numeric results that exceed field size (like multiplicative order) cell.text(result) .attr("data-value", result); } }); } return table.node(); } function createOperationsTable() { const degree = +degreeSelect.property("value"); const reducer = +reductionSelect.property("value"); const fieldSize = (1 << degree); const colorSchemeName = colorSelect.property("value"); const colorScheme = colorSchemes.find(s => s.name === colorSchemeName).fn; const colorScale = d3.scaleSequential(colorScheme).domain([0, fieldSize - 1]); const table = d3.create("table").attr("class", "ops-table"); // Header row const headerRow = table.append("thead").append("tr"); headerRow.append("th").text("Element"); const operations = [ { name: "Trace", fn: x => trace(x, reducer, degree) }, { name: "Norm", fn: x => norm(x, reducer, degree) }, { name: "x²", fn: x => frobenius(x, reducer, degree) }, { name: "√x", fn: x => squareRoot(x, reducer, degree) }, { name: "D(x)", fn: x => differential(x, reducer, degree) }, { name: "Mult Order", fn: x => multiplicativeOrder(x, reducer, degree) }, { name: "Idempotent", fn: x => isIdempotent(x, reducer, degree) }, { name: "Nilpotent", fn: x => isNilpotent(x, reducer, degree) }, { name: "Unit", fn: x => isUnit(x, reducer, degree) }, { name: "Zero Divisor", fn: x => isZeroDivisor(x, reducer, degree) } ]; operations.forEach(op => { headerRow.append("th").text(op.name); }); // Data rows const tbody = table.append("tbody"); for (let x = 0; x < fieldSize; x++) { const row = tbody.append("tr"); const formatted = formatElement(x, degree, colorScale); row.append("td") .style("background-color", formatted.backgroundColor) .style("color", formatted.textColor) .html(formatted.html) .attr("data-value", x); operations.forEach(op => { const result = op.fn(x); const cell = row.append("td"); if (typeof result === "boolean") { cell.text(result ? "✓" : "✗") .style("color", result ? "green" : "red") .style("font-weight", "bold") .attr("data-value", result ? "true" : "false"); } else if (isNaN(result)) { cell.attr("class", "nan-cell") .text("—") .attr("data-value", "nan"); } else if (result < fieldSize) { const resultFormatted = formatElement(result, degree, colorScale); cell.style("background-color", resultFormatted.backgroundColor) .style("color", resultFormatted.textColor) .html(resultFormatted.html) .attr("data-value", result); } else { // For values like order that might exceed field size cell.text(result) .attr("data-value", result); } }); } return table.node(); } function updateTable() { tableContainer.selectAll("*").remove(); const displayMode = displaySelect.property("value"); let table; if (displayMode === "add") { table = createBinaryOperationTable("add", "⊕"); } else if (displayMode === "multiply") { table = createBinaryOperationTable("multiply", "×"); } else if (displayMode === "divide") { table = createBinaryOperationTable("divide", "÷"); } else if (displayMode === "and") { table = createBinaryOperationTable("and", "∧"); } else if (displayMode === "or") { table = createBinaryOperationTable("or", "∨"); } else if (displayMode === "nand") { table = createBinaryOperationTable("nand", "⊼"); } else if (displayMode === "nor") { table = createBinaryOperationTable("nor", "⊽"); } else if (displayMode === "xor") { table = createBinaryOperationTable("xor", "⊻"); } else if (displayMode === "xnor") { table = createBinaryOperationTable("xnor", "⊙"); } else if (displayMode === "operations") { table = createOperationsTable(); } else if (displayMode === "modMultiply") { table = createModulusTable("modMultiply"); } else if (displayMode === "modDivide1") { table = createModulusTable("modDivide1"); } else if (displayMode === "modDivide2") { table = createModulusTable("modDivide2"); } else if (displayMode === "modTrace") { table = createModulusTable("modTrace"); } else if (displayMode === "modNorm") { table = createModulusTable("modNorm"); } else if (displayMode === "modFrobenius") { table = createModulusTable("modFrobenius"); } else if (displayMode === "modSquareRoot") { table = createModulusTable("modSquareRoot"); } else if (displayMode === "modDifferential") { table = createModulusTable("modDifferential"); } else if (displayMode === "modMultOrder") { table = createModulusTable("modMultOrder"); } else if (displayMode === "modIdempotent") { table = createModulusTable("modIdempotent"); } else if (displayMode === "modNilpotent") { table = createModulusTable("modNilpotent"); } else if (displayMode === "modUnit") { table = createModulusTable("modUnit"); } else if (displayMode === "modZeroDivisor") { table = createModulusTable("modZeroDivisor"); } else if (displayMode === "modMinPolyDegree") { table = createModulusTable("modMinPolyDegree"); } else if (displayMode === "modSubfieldMembership") { table = createModulusTable("modSubfieldMembership"); } else if (displayMode === "modMultInverse") { table = createModulusTable("modMultInverse"); } tableContainer.node().appendChild(table); // Add hover highlighting d3.select(table).selectAll("td, th").on("mouseenter", function() { const value = d3.select(this).attr("data-value"); if (value && value !== "nan" && value !== "true" && value !== "false") { d3.select(table).selectAll("td, th").classed("highlight", function() { return d3.select(this).attr("data-value") === value; }); } }).on("mouseleave", function() { d3.select(table).selectAll("td, th").classed("highlight", false); }); } // Event listeners degreeSelect.on("change", function() { updateReductionSelector(); updateReductionLabel(); updateTable(); }); reductionSelect.on("change", updateTable); colorSelect.on("change", updateTable); displaySelect.on("change", function() { updateReductionSelector(); // Add this line updateReductionLabel(); updateTable(); }); // Initialize updateReductionSelector(); updateReductionLabel(); updateTable(); return container.node(); }4b:T75e,### Chinese Remainder Theorem The **Chinese Remainder Theorem (CRT)** states that when a polynomial can be factored into coprime components, working modulo that polynomial is equivalent to working independently modulo each factor. In mathematical terms: ${tex`\text{GF}(2)[x]/(p_1 \cdot p_2 \cdot \ldots \cdot p_k) \cong \text{GF}(2)[x]/p_1 \times \text{GF}(2)[x]/p_2 \times \ldots \times \text{GF}(2)[x]/p_k`} (when the ${tex`p_i`} are pairwise coprime) ### Factor Table CRT applies to every **reducible polynomial** (those with factorizations other than "irreducible"): **Example from Order 6:** - **63-111,111** factors as **(3-11) × (7-111) × (15-1,111)** - These three factors are coprime (share no common factors) - CRT tells us: working mod 63 is equivalent to working mod 3, mod 7, and mod 15 simultaneously - Any 6-bit vector can be uniquely represented by three smaller vectors (2-bit, 3-bit, and 4-bit) **When CRT Doesn't Apply:** - **Irreducible polynomials** (9 in order 6): No factorization means no decomposition - **Prime powers** like **(2-10)^6**: The factors aren't coprime, so standard CRT doesn't give a clean product structure ### Understanding the Structure Column The **Structure** column shows the isomorphism class of each ring/field: #### Notation Guide **GF(n)** - Galois Field with n elements - Created from irreducible polynomials - Every non-zero element has a multiplicative inverse - No zero divisors or nilpotent elements - Example: **GF(64)** from any irreducible degree-6 polynomial **L_d(k)** - Local Ring notation - Created from powers of irreducible polynomials - **d** (subscript) = degree of the base irreducible polynomial - **k** (in parentheses) = total dimension of the ring - Contains nilpotent elements and zero divisors - Example: **L₁(6)** from (x+1)⁶, or **L₂(4)** from (x²+x+1)² 4c:T54fe,viewof polynomialTable = { // Helper function to convert number to binary with comma separators function toBinaryString(num, bits) { let binary = num.toString(2).padStart(bits, '0'); // Add commas every 3 digits from the right let result = ''; for (let i = binary.length - 1; i >= 0; i--) { result = binary[i] + result; if ((binary.length - i) % 3 === 0 && i !== 0) { result = ',' + result; } } return result; } // Helper function to format polynomial function formatPoly(coeffs, bits) { let decimal = parseInt(coeffs, 2); let binary = toBinaryString(decimal, bits); return `${decimal}-${binary}`; } // Get degree of polynomial function getDegree(p) { if (p === 0) return -1; let deg = 0; let temp = p; while (temp > 1) { deg++; temp >>= 1; } return deg; } // Try polynomial division function tryDivision(dividend, divisor, dividendDeg, divisorDeg) { if (divisorDeg < 0 || dividendDeg < divisorDeg) return 0; let quotient = 0; let remainder = dividend; for (let i = dividendDeg - divisorDeg; i >= 0; i--) { if (remainder & (1 << (i + divisorDeg))) { quotient |= (1 << i); remainder ^= (divisor << i); } } return remainder === 0 ? quotient : 0; } // Check if polynomial is irreducible function isIrreducible(p, degree) { if (p === 0 || p === 1) return false; if (degree === 1) return true; // Check if has factor x (constant term = 0) if ((p & 1) === 0) return false; // Try all possible factors up to degree/2 for (let d = 1; d <= Math.floor(degree / 2); d++) { let maxFactor = (1 << (d + 1)); for (let factor = (1 << d) + 1; factor < maxFactor; factor += 2) { if (tryDivision(p, factor, degree, d)) { return false; } } } return true; } // Find factors of a polynomial with multiplicities function findFactors(p, degree) { if (p === 0) return [{factor: "0", exp: 1}]; if (p === 1) return [{factor: "1", exp: 1}]; // Special case: pure powers of x (like x^6 = 64) if (p === (1 << degree) && degree > 0) { // This is x^degree // x itself (2-10) is irreducible as a degree-1 polynomial return [{factor: formatPoly("10", 2), exp: degree, irreducible: true, degree: 1}]; } // Check if the polynomial itself is irreducible if (isIrreducible(p, degree)) { return [{factor: formatPoly(p.toString(2), degree + 1), exp: 1, irreducible: true, degree: degree}]; } let factorMap = {}; let degreeMap = {}; let irreducibleMap = {}; let remaining = p; let remainingDeg = degree; // Check for factor x (which is 2 in decimal, 10 in binary) while ((remaining & 1) === 0 && remaining > 0) { let xKey = formatPoly("10", 2); // x = 2-10 factorMap[xKey] = (factorMap[xKey] || 0) + 1; degreeMap[xKey] = 1; irreducibleMap[xKey] = true; // x is irreducible remaining >>= 1; remainingDeg--; } // Find other factors for (let d = 1; d <= Math.floor(remainingDeg / 2); d++) { let maxFactor = (1 << (d + 1)); for (let factor = (1 << d) + 1; factor < maxFactor; factor += 2) { let quotient; while ((quotient = tryDivision(remaining, factor, remainingDeg, d)) > 0) { let factorKey = formatPoly(factor.toString(2), d + 1); factorMap[factorKey] = (factorMap[factorKey] || 0) + 1; degreeMap[factorKey] = d; irreducibleMap[factorKey] = isIrreducible(factor, d); remaining = quotient; remainingDeg = getDegree(remaining); if (remaining === 1) break; } if (remaining === 1) break; } if (remaining === 1) break; } if (remaining > 1) { let factorKey = formatPoly(remaining.toString(2), remainingDeg + 1); factorMap[factorKey] = (factorMap[factorKey] || 0) + 1; degreeMap[factorKey] = remainingDeg; irreducibleMap[factorKey] = isIrreducible(remaining, remainingDeg); } // Convert to array format let factors = []; for (let key in factorMap) { factors.push({ factor: key, exp: factorMap[key], degree: degreeMap[key], irreducible: irreducibleMap[key] }); } // Sort factors according to new rules factors.sort((a, b) => { // First separate into fields (exp === 1) and rings (exp > 1) let aIsField = a.exp === 1 && a.irreducible; let bIsField = b.exp === 1 && b.irreducible; let aIsRing = a.exp > 1 && a.irreducible; let bIsRing = b.exp > 1 && b.irreducible; // GF fields come before L rings if (aIsField && bIsRing) return -1; if (aIsRing && bIsField) return 1; // Within fields, sort by degree descending if (aIsField && bIsField) { if (a.degree !== b.degree) return b.degree - a.degree; // If same degree, sort by decimal value let aVal = parseInt(a.factor.split('-')[0]); let bVal = parseInt(b.factor.split('-')[0]); return aVal - bVal; } // Within rings, sort by degree ascending, then dimension ascending if (aIsRing && bIsRing) { if (a.degree !== b.degree) return a.degree - b.degree; let aDim = a.degree * a.exp; let bDim = b.degree * b.exp; if (aDim !== bDim) return aDim - bDim; // If same, sort by decimal value let aVal = parseInt(a.factor.split('-')[0]); let bVal = parseInt(b.factor.split('-')[0]); return aVal - bVal; } // Default: sort by decimal value let aVal = parseInt(a.factor.split('-')[0]); let bVal = parseInt(b.factor.split('-')[0]); return aVal - bVal; }); return factors; } // Format factors with exponents - decimal only function formatFactorsDecimal(factors) { return factors.map(f => { let decimal = f.factor.split('-')[0]; if (f.exp === 1) return decimal; return `${decimal}^${f.exp}`; }).join(" × "); } // Format factors with exponents - binary only function formatFactorsBinary(factors) { return factors.map(f => { let binary = f.factor.split('-')[1]; if (f.exp === 1) return binary; return `${binary}^${f.exp}`; }).join(" × "); } // Get factors as array of binary strings (with repetition for exponents) function getFactorsBinaryArray(factors) { let result = []; for (let f of factors) { let binary = f.factor.split('-')[1].replace(/,/g, ''); // Remove commas for (let i = 0; i < f.exp; i++) { result.push(binary); } } return result; } // Determine isomorphism structure with HTML formatting function getIsomorphismStructure(factors, totalDegree) { // Single irreducible factor with exponent 1 gives a field if (factors.length === 1 && factors[0].irreducible && factors[0].exp === 1) { return `GF(${Math.pow(2, totalDegree)})`; } // Group factors by their structure (already sorted) let components = []; for (let f of factors) { if (f.exp === 1) { // Simple factor if (f.irreducible) { components.push(`GF(${Math.pow(2, f.degree)})`); } } else { // Prime power - use L notation for local rings with HTML subscript if (f.irreducible) { // L with subscript for degree, then dimension in parentheses let dimension = f.degree * f.exp; components.push(`L_${f.degree}(${dimension})`); } } } return components.join(' × '); } // Get structure as array (without HTML formatting) function getStructureArray(factors, totalDegree) { // Single irreducible factor with exponent 1 gives a field if (factors.length === 1 && factors[0].irreducible && factors[0].exp === 1) { return [`GF(${Math.pow(2, totalDegree)})`]; } // Group factors by their structure (already sorted) let components = []; for (let f of factors) { if (f.exp === 1) { // Simple factor if (f.irreducible) { components.push(`GF(${Math.pow(2, f.degree)})`); } } else { // Prime power - use L notation for local rings (plain text) if (f.irreducible) { // L with degree, then dimension in parentheses let dimension = f.degree * f.exp; components.push(`L${f.degree}(${dimension})`); } } } return components; } // Sort polynomials according to specified rules function sortPolynomials(polys) { return polys.sort((a, b) => { // Check if single factor field (length 1, exp 1, irreducible) let aIsSingleField = a.rawFactors.length === 1 && a.rawFactors[0].exp === 1 && a.rawFactors[0].irreducible; let bIsSingleField = b.rawFactors.length === 1 && b.rawFactors[0].exp === 1 && b.rawFactors[0].irreducible; // Single factor fields come first if (aIsSingleField && !bIsSingleField) return -1; if (!aIsSingleField && bIsSingleField) return 1; if (aIsSingleField && bIsSingleField) { // Both single factor fields - sort by vector decimal value return a.decimal - b.decimal; } // Neither is a single factor field // Categorize: only fields, fields and rings, only rings function categorize(factors) { let hasField = false; let hasRing = false; for (let f of factors) { if (f.irreducible) { if (f.exp === 1) hasField = true; else hasRing = true; } } // Check for multiple factors where all have exp === 1 (multiple fields) let multipleFields = factors.length > 1 && factors.every(f => f.exp === 1 && f.irreducible); if (multipleFields || (hasField && !hasRing)) return 0; // only fields if (hasField && hasRing) return 1; // fields and rings if (!hasField && hasRing) return 2; // only rings return 3; // shouldn't happen } let aCat = categorize(a.rawFactors); let bCat = categorize(b.rawFactors); if (aCat !== bCat) return aCat - bCat; // Same category - now sort by complete structure string // Compare the structure arrays as strings to group identical structures let aStructStr = a.structureArray.join(' × '); let bStructStr = b.structureArray.join(' × '); if (aStructStr !== bStructStr) { // Different structures - sort by structure components // Compare each component of the structure for (let i = 0; i < Math.min(a.structureArray.length, b.structureArray.length); i++) { let aComp = a.structureArray[i]; let bComp = b.structureArray[i]; // Extract type and parameters from structure component // GF(n) or Ld(k) let aMatch = aComp.match(/GF$(\d+)$/); let bMatch = bComp.match(/GF$(\d+)$/); if (aMatch && bMatch) { // Both are GF - compare size (descending) let aSize = parseInt(aMatch[1]); let bSize = parseInt(bMatch[1]); if (aSize !== bSize) return bSize - aSize; } else if (aMatch && !bMatch) { // GF before L (in descending order) return -1; } else if (!aMatch && bMatch) { // L after GF return 1; } else { // Both are L - parse Ld(k) let aLMatch = aComp.match(/L(\d+)$(\d+)$/); let bLMatch = bComp.match(/L(\d+)$(\d+)$/); if (aLMatch && bLMatch) { let aD = parseInt(aLMatch[1]); let bD = parseInt(bLMatch[1]); let aDim = parseInt(aLMatch[2]); let bDim = parseInt(bLMatch[2]); // Sort by d ascending, then dimension ascending if (aD !== bD) return aD - bD; if (aDim !== bDim) return aDim - bDim; } } } // If all compared components are equal, shorter structure comes last return b.structureArray.length - a.structureArray.length; } // Same structure - sort by factor decimal values ascending (accounting for exponents) // First, expand factors by their exponents for comparison function expandFactors(factors) { let expanded = []; for (let f of factors) { let decimal = parseInt(f.factor.split('-')[0]); for (let i = 0; i < f.exp; i++) { expanded.push(decimal); } } // Sort the expanded list to ensure consistent comparison // This is important because factors are already ordered by structure rules return expanded; } let aExpanded = expandFactors(a.rawFactors); let bExpanded = expandFactors(b.rawFactors); // Compare expanded factors in order for (let i = 0; i < Math.min(aExpanded.length, bExpanded.length); i++) { if (aExpanded[i] !== bExpanded[i]) { return aExpanded[i] - bExpanded[i]; // ascending order } } // If all factors are equal, shorter list comes first if (aExpanded.length !== bExpanded.length) { return aExpanded.length - bExpanded.length; } // Final fallback: use decimal (shouldn't reach here for same structure) return a.decimal - b.decimal; }); } // Generate all polynomials for a given order function generatePolynomials(order) { let polys = []; let bits = order + 1; let start = (1 << order); // polynomials of exact degree 'order' let end = (1 << (order + 1)); for (let i = start; i < end; i++) { let factors = findFactors(i, order); polys.push({ poly: formatPoly(i.toString(2), bits), factorsDecimal: formatFactorsDecimal(factors), factorsBinary: formatFactorsBinary(factors), structure: getIsomorphismStructure(factors, order), decimal: i, // for sorting // Data for value export rawFactors: factors, vector: i.toString(2).padStart(bits, '0'), factorsArray: getFactorsBinaryArray(factors), structureArray: getStructureArray(factors, order) }); } // Sort the polynomials polys = sortPolynomials(polys); // Add index property polys.forEach((poly, idx) => { poly.index = idx; }); return polys; } // Sort table function function sortTable(tableId, column, order) { const table = document.getElementById(tableId); const tbody = table.querySelector('tbody'); const rows = Array.from(tbody.querySelectorAll('tr')); rows.sort((a, b) => { let aVal, bVal; if (column === 0) { // Sort by decimal value of polynomial aVal = parseInt(a.cells[0].textContent.split('-')[0]); bVal = parseInt(b.cells[0].textContent.split('-')[0]); } else if (column === 3) { // Sort by index (stored in data attribute) aVal = parseInt(a.dataset.index); bVal = parseInt(b.dataset.index); } if (order === 'asc') { return aVal > bVal ? 1 : -1; } else { return aVal < bVal ? 1 : -1; } }); // Re-append sorted rows rows.forEach(row => tbody.appendChild(row)); } // Create table HTML for a given order function createTable(order) { let polys = generatePolynomials(order); let tableId = `poly-table-${order}`; let html = `

Order ${order}

`; for (let poly of polys) { html += ` `; } html += `

Polynomial ↕	Factors (Dec)	Factors (Bin)	Structure ↑
${poly.poly}	${poly.factorsDecimal}	${poly.factorsBinary}	${poly.structure}

`; return {html, data: polys}; } // Create the complete HTML with all tables let html = `

`; // Store all data for value export let allData = [null]; // Start with null for order 0 // Generate tables in reverse order (6 to 1) so order 6 is leftmost for (let order = 6; order >= 1; order--) { let tableResult = createTable(order); html += tableResult.html; // Store data at the correct index with index property included allData[order] = tableResult.data.map(poly => ({ vector: poly.vector, factors: poly.factorsArray, structure: poly.structureArray, index: poly.index })); } html += `

`; // Create the HTML element const div = document.createElement('div'); div.innerHTML = html; // Attach the value for other cells to use div.value = allData; // After DOM is ready, set up sorting and calculate positions setTimeout(() => { // Add click handlers for sorting div.querySelectorAll('.sortable').forEach(th => { th.addEventListener('click', function() { const tableId = this.closest('table').id; const column = parseInt(this.dataset.column); const currentOrder = this.dataset.order; // Determine new order let newOrder; if (currentOrder === 'none' || currentOrder === 'desc') { newOrder = 'asc'; } else { newOrder = 'desc'; } // Reset all headers in this table this.closest('thead').querySelectorAll('.sortable').forEach(h => { h.dataset.order = 'none'; h.classList.remove('sorted-asc', 'sorted-desc'); h.textContent = h.textContent.replace(' ↑', ' ↕').replace(' ↓', ' ↕'); }); // Update this header this.dataset.order = newOrder; this.classList.add(newOrder === 'asc' ? 'sorted-asc' : 'sorted-desc'); const arrow = newOrder === 'asc' ? ' ↑' : ' ↓'; this.textContent = this.textContent.replace(' ↕', arrow).replace(' ↑', arrow).replace(' ↓', arrow); // Sort the table sortTable(tableId, column, newOrder); }); }); // Calculate positions using masonry-like layout const container = div.querySelector('#poly-container'); const tables = Array.from(div.querySelectorAll('.poly-table')); // Calculate table width (including gaps) const tableWidth = tables[0].offsetWidth; const gap = 30; const verticalGap = 30; // Calculate how many columns fit const containerWidth = container.offsetWidth; const columns = Math.floor((containerWidth + gap) / (tableWidth + gap)); // Track the bottom position of each column let columnHeights = new Array(Math.min(columns, tables.length)).fill(0); // Position each table tables.forEach((table, index) => { // Find the shortest column let shortestColumn = 0; let minHeight = columnHeights[0]; for (let i = 1; i < columnHeights.length; i++) { if (columnHeights[i] < minHeight) { minHeight = columnHeights[i]; shortestColumn = i; } } // Position the table const left = shortestColumn * (tableWidth + gap); const top = columnHeights[shortestColumn]; table.style.left = left + 'px'; table.style.top = top + 'px'; // Update the column height const tableHeight = table.offsetHeight; columnHeights[shortestColumn] = top + tableHeight + verticalGap; }); // Set container height to accommodate all tables const maxHeight = Math.max(...columnHeights); container.style.height = maxHeight + 'px'; }, 10); return div; }4d:T98f1,viewof radialPoset = { // Set up dimensions const width = 900; const height = 900; const centerX = width / 2; const centerY = height / 2; const margin = 0; const maxRadius = Math.min(width, height) / 2 - margin - 60; // Leave space for labels const levelSpacing = 7.5 const nodeSpacing = .25 const groupSpacing = 2 let nodeDiameter = 50; // Start with a reasonable size const labelRotation = 10 // Generate pastel colors const pastelColors = d3.schemeTableau10 const dMidLinkAngle = -.1 const midLinkHandle = .25 const linktangent1 = 1.75 const linktangent2 = 3 const speed = 200 const ease = d3.easeQuadInOut let polyData = polynomialTable // Configuration variables for easy tweaking // Rotation for each level (in radians, 0 = top, π/2 = right, π = bottom, -π/2 = left) const levelRotations = { 6: .25*Math.PI, 5: .35*Math.PI, 4: .5*Math.PI, 3: .6*Math.PI, 2: .5*Math.PI, 1: Math.PI }; // Group ordering for each level const levelGroupOrders = { 6: [ ['GF(32)', 'GF(2)'], ['GF(16)', 'L1(2)'], ['GF(16)', 'GF(4)'], ['GF(16)', 'GF(2)', 'GF(2)'], ['L3(6)'], ['GF(8)', 'GF(8)'], ['GF(8)', 'GF(4)', 'GF(2)'], ['GF(8)', 'GF(2)', 'L1(2)'], ['GF(8)', 'L1(3)'], ['L2(6)'], ['GF(2)', 'GF(2)', 'L2(4)'], ['GF(4)', 'GF(2)', 'L1(3)'], ['GF(4)', 'L1(2)', 'L1(2)'], ['L1(2)', 'L2(4)'], ['GF(64)'], ['GF(4)', 'L1(4)'], ['L1(2)', 'L1(4)'], ['GF(2)', 'L1(5)'], ['L1(3)', 'L1(3)'], ['L1(6)']], 5: [['GF(32)'], ['GF(16)', 'GF(2)'], ['GF(8)', 'GF(4)'], ['GF(8)', 'GF(2)', 'GF(2)'], ['GF(8)', 'L1(2)'], ['GF(4)', 'GF(2)', 'L1(2)'], ['GF(2)', 'L2(4)'], ['GF(4)', 'L1(3)'], ['GF(2)', 'L1(4)'], ['L1(2)', 'L1(3)'], ['L1(5)']], 4: [['GF(16)'], ['GF(8)', 'GF(2)'], ["L2(4)"], ['GF(4)', 'GF(2)', 'GF(2)'], ['GF(4)', 'L1(2)'], ['GF(2)', 'L1(3)'], ['L1(2)', 'L1(2)'], ['L1(4)']], 3: [['GF(8)'], ['GF(4)', 'GF(2)'], ['GF(2)', 'L1(2)'], ['L1(3)']], 2: [['GF(4)'], ['GF(2)', 'GF(2)'], ['L1(2)']], 1: [['GF(2)']] }; // Process the data - skip the null at index 0 const levels = polyData.filter((level, i) => i > 0); // Group nodes by level and structure const processedLevels = levels.map((level, levelIndex) => { const levelNumber = levelIndex + 1; // Group by structure const groups = {}; level.forEach(node => { const structKey = JSON.stringify(node.structure); if (!groups[structKey]) { groups[structKey] = []; } groups[structKey].push(node); }); // Convert to array format let groupArray = Object.entries(groups).map(([structure, nodes]) => ({ structure: JSON.parse(structure), nodes: nodes, structureKey: structure })); // Apply custom ordering if specified for this level if (levelGroupOrders[levelNumber] && levelGroupOrders[levelNumber].length > 0) { const specifiedOrder = levelGroupOrders[levelNumber]; const orderedGroups = []; const usedGroups = new Set(); // First, add groups in the specified order specifiedOrder.forEach(specifiedStructure => { const specifiedKey = JSON.stringify(specifiedStructure); const matchingGroup = groupArray.find(group => group.structureKey === specifiedKey); if (matchingGroup) { orderedGroups.push(matchingGroup); usedGroups.add(matchingGroup.structureKey); } }); // Then add remaining groups in default order groupArray.forEach(group => { if (!usedGroups.has(group.structureKey)) { orderedGroups.push(group); } }); groupArray = orderedGroups; } return { levelIndex, levelNumber, groups: groupArray }; }); // Calculate required circumference for a level (in units of node diameters) const calculateRequiredUnits = (groups, minBetweenGroupSpacing = 3) => { let totalUnits = 0; groups.forEach((group, groupIndex) => { const n = group.nodes.length; // Add nodes totalUnits += n; // Add spacing within group (0.5 diameter between each pair) if (n > 1) { totalUnits += (n - 1) * nodeSpacing; } // Add spacing between groups if (groupIndex < groups.length - 1) { totalUnits += minBetweenGroupSpacing; } }); // Add spacing to close the circle (between last and first group) if (groups.length > 1) { totalUnits += minBetweenGroupSpacing; } return totalUnits; }; // Calculate radius and spacing for each level const levelRadii = []; const levelSpacingData = []; processedLevels.forEach((level, levelIndex) => { const groups = level.groups; // Target diameter: level 1 = 2*nodeDiameter, then increase by 2*nodeDiameter each level const targetDiameter = (levelIndex + .25) * levelSpacing * nodeDiameter; const targetRadius = targetDiameter / 2; const targetCircumference = Math.PI * targetDiameter; // Calculate minimum required circumference with proper spacing const minRequiredUnits = calculateRequiredUnits(groups, 3); const minRequiredCircumference = minRequiredUnits * nodeDiameter; let actualRadius, betweenGroupSpacing; if (minRequiredCircumference <= targetCircumference) { // Target diameter is sufficient - can use it and possibly increase between-group spacing actualRadius = targetRadius; // Calculate how much extra space we have for between-group spacing const availableUnits = targetCircumference / nodeDiameter; // Calculate units needed for nodes and within-group spacing let nodeAndWithinGroupUnits = 0; groups.forEach(group => { const n = group.nodes.length; nodeAndWithinGroupUnits += n; // nodes if (n > 1) { nodeAndWithinGroupUnits += (n - 1) * nodeSpacing; // within-group spacing } }); const numberOfGaps = groups.length > 1 ? groups.length : 0; if (numberOfGaps > 0) { const extraUnits = availableUnits - nodeAndWithinGroupUnits; betweenGroupSpacing = Math.max(groupSpacing, extraUnits / numberOfGaps); } else { betweenGroupSpacing = 0; } } else { // Target diameter is too small - increase radius to fit with minimum spacing actualRadius = minRequiredCircumference / (2 * Math.PI); betweenGroupSpacing = groupSpacing; } levelRadii.push(actualRadius); levelSpacingData.push({ betweenGroupSpacing }); }); // Scale everything if needed to fit within bounds const maxComputedRadius = Math.max(...levelRadii); if (maxComputedRadius > maxRadius) { const scaleFactor = maxRadius / maxComputedRadius; levelRadii.forEach((r, i) => levelRadii[i] = r * scaleFactor); nodeDiameter = nodeDiameter * scaleFactor; // betweenGroupSpacing is in units of nodeDiameter, so it doesn't need scaling } // Create SVG const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) // Store all drawing data first const allArcs = []; const allNodes = []; const allGroups = []; // Store group info for connections analysis // Keep track of color index for new colors let nextColorIndex = 0; // Process each level processedLevels.forEach((level, levelIndex) => { const radius = levelRadii[levelIndex]; const groups = level.groups; const spacingData = levelSpacingData[levelIndex]; const levelNumber = level.levelNumber; // Get rotation for this level (default to 0 if not specified) const rotation = levelRotations[levelNumber] || 0; // Calculate total circumferential units needed // Each node = 1 unit, gap within group = 0.5 units, gap between groups = betweenGroupSpacing units let totalUnits = 0; groups.forEach((group, groupIndex) => { const n = group.nodes.length; totalUnits += n; // Each node takes 1 unit if (n > 1) { totalUnits += (n - 1) * 0.5; // Gaps within group: 0.5 units each } }); // Add between-group spacing if (groups.length > 1) { totalUnits += groups.length * spacingData.betweenGroupSpacing; } const circumference = 2 * Math.PI * radius; const unitLength = circumference / totalUnits; // Physical length per unit const anglePerUnit = (2 * Math.PI) / totalUnits; // Angle per unit // Apply rotation to starting position let currentUnit = rotation / anglePerUnit; // Convert rotation to unit offset groups.forEach((group, groupIndex) => { const nodes = group.nodes; const nodePositions = []; // Position each node in the group nodes.forEach((node, nodeIndex) => { const angle = currentUnit * anglePerUnit; const x = centerX + radius * Math.sin(angle); const y = centerY - radius * Math.cos(angle); nodePositions.push({ x, y, angle, node }); allNodes.push({ x, y, node, decimalValue: parseInt(node.vector, 2), groupIndex: allGroups.length }); // Move past this node (1 unit) currentUnit += 1; // Add within-group spacing if there's another node in this group if (nodeIndex < nodes.length - 1) { currentUnit += 0.5; // 0.5 units = 0.5 * nodeDiameter gap } }); // Store group data for later analysis const groupData = { levelIndex, levelNumber, groupIndex: allGroups.length, structure: group.structure, structureKey: group.structureKey, nodes: nodes, nodePositions: nodePositions, color: null, // Will be assigned based on category radius: radius, colorIndex: null // Track which color index was used }; // Calculate center angle for label placement if (nodePositions.length > 0) { const startAngle = nodePositions[0].angle; const endAngle = nodePositions[nodePositions.length - 1].angle; groupData.centerAngle = (startAngle + endAngle) / 2; groupData.startAngle = startAngle; groupData.endAngle = endAngle; } allGroups.push(groupData); // Add between-group spacing if there's another group if (groupIndex < groups.length - 1) { currentUnit += spacingData.betweenGroupSpacing; } // Store arc data for group visualization (will be colored later) if (nodes.length > 1) { const startAngle = nodePositions[0].angle; const endAngle = nodePositions[nodePositions.length - 1].angle; allArcs.push({ type: 'arc', startAngle: startAngle, endAngle: endAngle, radius: radius, groupIndex: allGroups.length - 1 }); } else if (nodes.length === 1) { // Single node - small arc segment const pos = nodePositions[0]; const angleSpan = Math.min(anglePerUnit * 0.8, Math.PI / 6); allArcs.push({ type: 'arc', startAngle: pos.angle - angleSpan / 2, endAngle: pos.angle + angleSpan / 2, radius: radius, groupIndex: allGroups.length - 1 }); } }); // Add final between-group spacing to close the circle if (groups.length > 1) { currentUnit += spacingData.betweenGroupSpacing; } }); // Build connection data structure for POSET relationships const connections = []; const nodeMap = new Map(); // Create a map for quick node lookup by vector allNodes.forEach(nodeData => { nodeMap.set(nodeData.node.vector, nodeData); }); // Helper function to check if two factor arrays are equivalent (ignoring order) function areFactorsEquivalent(factors1, factors2) { if (factors1.length !== factors2.length) return false; // Count occurrences of each factor in both arrays const count1 = {}; const count2 = {}; factors1.forEach(f => { count1[f] = (count1[f] || 0) + 1; }); factors2.forEach(f => { count2[f] = (count2[f] || 0) + 1; }); // Check if counts match for (let factor in count1) { if (count1[factor] !== count2[factor]) return false; } for (let factor in count2) { if (count2[factor] !== count1[factor]) return false; } return true; } // Build connections following POSET rules allNodes.forEach(nodeData => { const { node } = nodeData; const factors = node.factors; // Get unique factors (to handle duplicates properly) const uniqueFactors = [...new Set(factors)]; uniqueFactors.forEach(factor => { // Count how many times this factor appears in the original factors array const factorCount = factors.filter(f => f === factor).length; // Try removing one instance of this factor if (factorCount > 0) { // Create a new factors array with one instance of this factor removed const reducedFactors = [...factors]; const indexToRemove = reducedFactors.indexOf(factor); if (indexToRemove !== -1) { reducedFactors.splice(indexToRemove, 1); // Look for a node with these reduced factors (order-independent) let foundReducedNode = null; for (let [vector, candidateNodeData] of nodeMap) { if (areFactorsEquivalent(candidateNodeData.node.factors, reducedFactors)) { foundReducedNode = candidateNodeData; break; } } if (foundReducedNode) { // Connect to the node with reduced factors // Check if this connection already exists (due to multiple instances of same factor) const connectionExists = connections.some(conn => conn.source === foundReducedNode && conn.target === nodeData && conn.factor === factor ); if (!connectionExists) { connections.push({ source: foundReducedNode, target: nodeData, factor: factor }); } } else if (reducedFactors.length === 0) { // If reduced factors is empty, connect to the factor itself (if it exists as a node) const factorNode = nodeMap.get(factor); if (factorNode && factorNode !== nodeData) { // Check if this connection already exists const connectionExists = connections.some(conn => conn.source === factorNode && conn.target === nodeData && conn.factor === factor ); if (!connectionExists) { connections.push({ source: factorNode, target: nodeData, factor: factor }); } } } } } }); }); // Remove any remaining duplicate connections (safety check) const uniqueConnections = connections.filter((conn, index, arr) => { return arr.findIndex(c => c.source.node.vector === conn.source.node.vector && c.target.node.vector === conn.target.node.vector && c.factor === conn.factor ) === index; }); // Create a map of structure strings to group indices for quick lookup const structureToGroups = new Map(); allGroups.forEach(group => { const key = JSON.stringify(group.structure); if (!structureToGroups.has(key)) { structureToGroups.set(key, []); } structureToGroups.get(key).push(group.groupIndex); }); // Determine color category for each group and assign colors // Process by level order to ensure dependencies are resolved const groupsByLevel = allGroups.slice().sort((a, b) => a.levelNumber - b.levelNumber); groupsByLevel.forEach(group => { const structure = group.structure; // Check if all elements in the structure are GF fields that exist as their own groups const allFactorsAreGroups = structure.every(element => { // Check if this element exists as a single-element group const elementKey = JSON.stringify([element]); return structureToGroups.has(elementKey); }); // Check if group only has itself as factors (single element structure) const isSelfOnly = structure.length === 1; // Determine category let category; if (isSelfOnly) { // Category 1: Only has itself as factors category = 1; } else if (allFactorsAreGroups) { // Category 2: All factors are other groups category = 2; } else { // Category 3: Mixed - some factors are groups, some are not category = 3; } // Assign color based on category if (category === 1) { // Original color - use next available color from scheme group.color = pastelColors[nextColorIndex % pastelColors.length]; group.colorIndex = nextColorIndex; nextColorIndex++; group.finalColor = group.color; } else if (category === 2) { // Blend factor colors (50%) + new color (50%) const factorColors = []; structure.forEach(element => { const elementKey = JSON.stringify([element]); const elementGroupIndices = structureToGroups.get(elementKey) || []; if (elementGroupIndices.length > 0) { // Use the first group with this structure const factorGroup = allGroups[elementGroupIndices[0]]; if (factorGroup.finalColor) { factorColors.push(factorGroup.finalColor); } } }); // Blend factor colors let blendedColor; if (factorColors.length === 1) { blendedColor = factorColors[0]; } else if (factorColors.length > 1) { // Blend multiple colors equally blendedColor = factorColors[0]; for (let i = 1; i < factorColors.length; i++) { blendedColor = d3.interpolate(blendedColor, factorColors[i])(0.5); } } // Get new color for this group const newColor = pastelColors[nextColorIndex % pastelColors.length]; group.colorIndex = nextColorIndex; nextColorIndex++; // Blend 50% factor colors with 50% new color if (blendedColor) { group.finalColor = d3.interpolate(blendedColor, newColor)(0.5); } else { group.finalColor = newColor; } } else { // Category 3: Mixed factors // Blend factor colors (50%) + new color (50%) const factorColors = []; structure.forEach(element => { const elementKey = JSON.stringify([element]); const elementGroupIndices = structureToGroups.get(elementKey) || []; if (elementGroupIndices.length > 0) { // Use the first group with this structure const factorGroup = allGroups[elementGroupIndices[0]]; if (factorGroup.finalColor) { factorColors.push(factorGroup.finalColor); } } }); // Blend factor colors if any exist let blendedColor = null; if (factorColors.length === 1) { blendedColor = factorColors[0]; } else if (factorColors.length > 1) { // Blend multiple colors equally blendedColor = factorColors[0]; for (let i = 1; i < factorColors.length; i++) { blendedColor = d3.interpolate(blendedColor, factorColors[i])(0.5); } } // Get new color for this group const newColor = pastelColors[nextColorIndex % pastelColors.length]; group.colorIndex = nextColorIndex; nextColorIndex++; // Blend 50% factor colors with 50% new color if (blendedColor) { group.finalColor = d3.interpolate(blendedColor, newColor)(0.5); } else { group.finalColor = newColor; } } // Store category for debugging group.category = category; }); // Store arc path elements for later manipulation const arcPaths = []; // Draw all arcs first (behind nodes) with determined colors allArcs.forEach(arcData => { const group = allGroups[arcData.groupIndex]; // Regular arc const arc = d3.arc() .innerRadius(arcData.radius) .outerRadius(arcData.radius) .startAngle(arcData.startAngle) .endAngle(arcData.endAngle); const arcPath = svg.append("path") .attr("d", arc) .attr("fill", "none") .attr("stroke", group.finalColor) .attr("stroke-width", nodeDiameter * 2) .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .attr("opacity", 0.6) .attr("transform", `translate(${centerX}, ${centerY})`) .attr("data-group-index", arcData.groupIndex); // Store group index for reference arcPaths.push(arcPath.node()); }); // Draw group labels with proper rotation allGroups.forEach(group => { if (group.nodePositions && group.nodePositions.length > 0) { const labelRadius = group.radius + nodeDiameter * 1.5; const labelX = centerX + labelRadius * Math.sin(group.centerAngle); const labelY = centerY - labelRadius * Math.cos(group.centerAngle); // Format structure with multiplication signs const structureLabel = group.structure.join(' × '); // Calculate rotation to be tangent to circle let rotationDegrees = (group.centerAngle * 180 / Math.PI)-labelRotation; // For bottom half of circle, add 180 degrees to prevent upside-down text if (group.centerAngle > Math.PI/2 && group.centerAngle < 3*Math.PI/2) { rotationDegrees += 180; } svg.append("text") .attr("x", labelX) .attr("y", labelY) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("font-family", "Verdana, Arial, sans-serif") .attr("font-size", "10px") .attr("fill", "#333") .attr("font-weight", "500") .style("pointer-events", 'none') .attr("transform", `rotate(${rotationDegrees} ${labelX} ${labelY})`) .text(structureLabel); } }); // Replace the connection drawing section with this modified version // This goes in place of the existing connectionPaths definition const connectionPaths = svg.selectAll(".connection") .data(uniqueConnections) .enter() .append("path") .attr("class", "connection") .attr("fill", "none") .attr("stroke", d => { const sourceGroup = allGroups[d.source.groupIndex]; return sourceGroup.finalColor; }) .attr("stroke-width", 1) .attr("opacity", 0.6) .attr("stroke-linecap", "round") .attr("d", d => { const { source, target } = d; const sx = source.x, sy = source.y; const tx = target.x, ty = target.y; // Calculate angles from center const sourceAngle = Math.atan2(sy - centerY, sx - centerX); const targetAngle = Math.atan2(ty - centerY, tx - centerX); // Calculate angle difference (normalize to 0 to 2π) let angleDiff = targetAngle - sourceAngle; while (angleDiff < 0) angleDiff += 2 * Math.PI; while (angleDiff > 2 * Math.PI) angleDiff -= 2 * Math.PI; // Take the shorter arc if (angleDiff > Math.PI) { angleDiff = angleDiff - 2 * Math.PI; } const absAngleDiff = Math.abs(angleDiff); // Calculate radii const sourceRadius = Math.sqrt((sx - centerX) ** 2 + (sy - centerY) ** 2); const targetRadius = Math.sqrt((tx - centerX) ** 2 + (ty - centerY) ** 2); // If angle difference is small, use simple cubic bezier if (absAngleDiff < Math.PI / 3) { // Simple curve for nearby nodes const controlDistance = (targetRadius - sourceRadius) / linktangent1; const c1x = sx + controlDistance * Math.cos(sourceAngle); const c1y = sy + controlDistance * Math.sin(sourceAngle); const c2x = tx - controlDistance * Math.cos(targetAngle); const c2y = ty - controlDistance * Math.sin(targetAngle); return `M${sx},${sy} C${c1x},${c1y} ${c2x},${c2y} ${tx},${ty}`; } else { // Use two cubic beziers with an intermediate point for larger angle differences // Get level information from groups const sourceGroup = allGroups[d.source.groupIndex]; const targetGroup = allGroups[d.target.groupIndex]; const sourceLevelNumber = sourceGroup.levelNumber; const targetLevelNumber = targetGroup.levelNumber; const levelDifference = Math.abs(targetLevelNumber - sourceLevelNumber); // Calculate base midRadius (halfway between source and target) let midRadius = (sourceRadius + targetRadius) / 2; // If connecting an even number of levels, adjust the midpoint // to fall between levels instead of on a level if (levelDifference > 0 && levelDifference % 2 === 0) { // Find the radius step between levels // We can approximate this from the level radii we have const lowerLevelIndex = Math.min(sourceLevelNumber, targetLevelNumber) - 1; const upperLevelIndex = Math.max(sourceLevelNumber, targetLevelNumber) - 1; if (lowerLevelIndex >= 0 && upperLevelIndex < levelRadii.length) { // Calculate average spacing between levels in this range let totalSpacing = 0; let spacingCount = 0; for (let i = lowerLevelIndex; i < upperLevelIndex && i < levelRadii.length - 1; i++) { totalSpacing += (levelRadii[i + 1] - levelRadii[i]); spacingCount++; } if (spacingCount > 0) { const avgLevelSpacing = totalSpacing / spacingCount; // Shift the midpoint down by half a level spacing // (toward the center, so subtract from radius) midRadius -= avgLevelSpacing * 0.5; } } } const midAngle = sourceAngle + angleDiff / 2; // Intermediate point on the circular path const mx = centerX + midRadius * Math.cos(midAngle); const my = centerY + midRadius * Math.sin(midAngle); // Calculate control distances based on the conceptual level differences // When midpoint is adjusted for even level differences, each half represents different level spans let controlDistance1, controlDistance2; if (levelDifference > 0 && levelDifference % 2 === 0) { // For even level differences with adjusted midpoint: // First half connects like a (levelDiff/2 - 0.5) level connection // Second half connects like a (levelDiff/2 + 0.5) level connection // Get average level spacing for proper scaling const lowerLevelIndex = Math.min(sourceLevelNumber, targetLevelNumber) - 1; const upperLevelIndex = Math.max(sourceLevelNumber, targetLevelNumber) - 1; let avgLevelSpacing = (targetRadius - sourceRadius) / levelDifference; // fallback if (lowerLevelIndex >= 0 && upperLevelIndex < levelRadii.length) { let totalSpacing = 0; let spacingCount = 0; for (let i = lowerLevelIndex; i < upperLevelIndex && i < levelRadii.length - 1; i++) { totalSpacing += (levelRadii[i + 1] - levelRadii[i]); spacingCount++; } if (spacingCount > 0) { avgLevelSpacing = totalSpacing / spacingCount; } } // Calculate as if connecting the adjusted number of levels const firstHalfLevels = levelDifference / 2 - 0.5; const secondHalfLevels = levelDifference / 2 + 0.5; // Control distances proportional to the conceptual level spans controlDistance1 = (firstHalfLevels * avgLevelSpacing) / linktangent2; controlDistance2 = (secondHalfLevels * avgLevelSpacing) / linktangent2; } else { // For odd level differences or no adjustment needed, use actual radial distances const firstHalfRadialDistance = midRadius - sourceRadius; const secondHalfRadialDistance = targetRadius - midRadius; controlDistance1 = firstHalfRadialDistance / linktangent2; controlDistance2 = secondHalfRadialDistance / linktangent2; } // First control point - radial tangent from source const c1x = sx + controlDistance1 * Math.cos(sourceAngle); const c1y = sy + controlDistance1 * Math.sin(sourceAngle); // For the middle knot point, tangent handles should be perpendicular to radial // Perpendicular to radial means tangent to the circle at that point const tangentAngle = midAngle + (Math.PI / 2 + dMidLinkAngle) * Math.sign(angleDiff); // Control handle distance for middle point (adjust this to control curve smoothness) const handleLength = absAngleDiff * midRadius * midLinkHandle; // Proportional to arc length // Second control point - approaching middle from tangent direction const c2x = mx - handleLength * Math.cos(tangentAngle); const c2y = my - handleLength * Math.sin(tangentAngle); // Third control point - leaving middle in tangent direction const c3x = mx + handleLength * Math.cos(tangentAngle); const c3y = my + handleLength * Math.sin(tangentAngle); // Fourth control point - radial tangent to target const c4x = tx - controlDistance2 * Math.cos(targetAngle); const c4y = ty - controlDistance2 * Math.sin(targetAngle); return `M${sx},${sy} C${c1x},${c1y} ${c2x},${c2y} ${mx},${my} C${c3x},${c3y} ${c4x},${c4y} ${tx},${ty}`; } }); // Build enhanced connection data structure for full upper/lower sets const nodeConnections = new Map(); allNodes.forEach(nodeData => { nodeConnections.set(nodeData.node.vector, { directUpward: [], directDownward: [], fullUpperSet: new Set(), fullLowerSet: new Set(), paths: [] }); }); // First pass: record direct connections uniqueConnections.forEach((conn, i) => { const sourceVector = conn.source.node.vector; const targetVector = conn.target.node.vector; nodeConnections.get(sourceVector).directUpward.push(conn.target); nodeConnections.get(targetVector).directDownward.push(conn.source); nodeConnections.get(sourceVector).paths.push(connectionPaths.nodes()[i]); nodeConnections.get(targetVector).paths.push(connectionPaths.nodes()[i]); }); // Function to compute transitive closure (upper set) function computeUpperSet(nodeVector, visited = new Set()) { if (visited.has(nodeVector)) return visited; visited.add(nodeVector); const directUp = nodeConnections.get(nodeVector).directUpward; directUp.forEach(upNode => { computeUpperSet(upNode.node.vector, visited); }); return visited; } // Function to compute transitive closure (lower set) function computeLowerSet(nodeVector, visited = new Set()) { if (visited.has(nodeVector)) return visited; visited.add(nodeVector); const directDown = nodeConnections.get(nodeVector).directDownward; directDown.forEach(downNode => { computeLowerSet(downNode.node.vector, visited); }); return visited; } // Compute full upper and lower sets for each node allNodes.forEach(nodeData => { const vector = nodeData.node.vector; const connections = nodeConnections.get(vector); // Compute upper set (excluding self) const upperSet = computeUpperSet(vector, new Set()); upperSet.delete(vector); // Remove self connections.fullUpperSet = upperSet; // Compute lower set (excluding self) const lowerSet = computeLowerSet(vector, new Set()); lowerSet.delete(vector); // Remove self connections.fullLowerSet = lowerSet; }); // Add structure display text in top right corner const structureDisplay = svg.append("text") .attr("class", "structure-display") .attr("x", width - 10) .attr("y", 20) .attr("text-anchor", "end") .attr("font-family", "monospace") .attr("font-size", "12px") .attr("fill", "#333") .style("background", "rgba(255, 255, 255, 0.9)") .text(""); // Draw all nodes on top const nodeCircles = svg.selectAll(".node-circle") .data(allNodes) .enter() .append("g") .attr("class", "node-group"); nodeCircles.append("circle") .attr("class", "node-circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", nodeDiameter / 1.6) .attr("fill", "white") .attr("stroke", "#333") .attr("stroke-width", 1); nodeCircles.append("text") .attr("class", "node-label") .attr("x", d => d.x) .attr("y", d => d.y) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("font-size", nodeDiameter * 0.6) .attr("font-family", "Verdana, Arial, sans-serif") .attr("font-weight", "500") .attr("fill", "black") .style("pointer-events", 'none') .text(d => d.decimalValue); // Modified interaction with full upper/lower set highlighting nodeCircles .on("mouseover", function(event, d) { const connections = nodeConnections.get(d.node.vector); // Update structure display structureDisplay.text(JSON.stringify(d.node.structure)); // Get all nodes in the combined set (hovered + upper + lower) const combinedSet = new Set([d.node.vector]); connections.fullUpperSet.forEach(v => combinedSet.add(v)); connections.fullLowerSet.forEach(v => combinedSet.add(v)); // Determine which nodes are directly connected const directlyConnected = new Set(); connections.directUpward.forEach(n => directlyConnected.add(n.node.vector)); connections.directDownward.forEach(n => directlyConnected.add(n.node.vector)); // Track which groups have highlighted nodes const highlightedGroups = new Set(); allNodes.forEach(nodeData => { if (combinedSet.has(nodeData.node.vector)) { highlightedGroups.add(nodeData.groupIndex); } }); // Update arc paths opacity arcPaths.forEach(arcPath => { const groupIndex = parseInt(arcPath.getAttribute('data-group-index')); if (highlightedGroups.has(groupIndex)) { d3.select(arcPath).transition().duration(0) .attr("opacity", 1); } }); // Highlight nodes nodeCircles.selectAll(".node-circle") .transition().duration(0) .attr("fill", function(nodeD) { if (nodeD === d) { return "#000"; // Hovered node becomes black } return "white"; }) .attr("stroke", function(nodeD) { if (nodeD === d) { return "#000"; } else if (directlyConnected.has(nodeD.node.vector)) { return "#000"; // Direct connections become black } else if (combinedSet.has(nodeD.node.vector)) { return "#333"; // Keep original color for indirect connections } return "#333"; }) .attr("stroke-width", function(nodeD) { if (combinedSet.has(nodeD.node.vector) || nodeD === d) { return 3; // All nodes in the set get thick stroke } return 1; }); // Update node labels nodeCircles.selectAll(".node-label") .transition().duration(0) .attr("fill", function(nodeD) { if (nodeD === d) { return "white"; // White text for hovered node } return "black"; }); // Highlight paths that connect nodes within the combined set connectionPaths .transition().duration(0) .attr("stroke", function(pathD) { const sourceInSet = combinedSet.has(pathD.source.node.vector); const targetInSet = combinedSet.has(pathD.target.node.vector); if (sourceInSet && targetInSet) { // Check if this is a direct connection to/from the hovered node const isDirectConnection = (pathD.source.node.vector === d.node.vector || pathD.target.node.vector === d.node.vector); if (isDirectConnection) { return "#000"; // Direct connections become black } else { // Keep original color for other connections in the set const sourceGroup = allGroups[pathD.source.groupIndex]; return sourceGroup.finalColor; } } // Keep original color for paths outside the set const sourceGroup = allGroups[pathD.source.groupIndex]; return sourceGroup.finalColor; }) .attr("stroke-width", function(pathD) { const sourceInSet = combinedSet.has(pathD.source.node.vector); const targetInSet = combinedSet.has(pathD.target.node.vector); if (sourceInSet && targetInSet) { return 3; // All paths in the set get thick stroke } return 1; }) .attr("opacity", function(pathD) { const sourceInSet = combinedSet.has(pathD.source.node.vector); const targetInSet = combinedSet.has(pathD.target.node.vector); if (sourceInSet && targetInSet) { return 1; // Full opacity for paths in the set } return 0.6; }) .attr("stroke-dasharray", function(pathD) { const sourceInSet = combinedSet.has(pathD.source.node.vector); const targetInSet = combinedSet.has(pathD.target.node.vector); const connections = nodeConnections.get(d.node.vector); // Only dash if the target is in the upper set (connections going upward) if (connections.fullUpperSet.has(pathD.target.node.vector) && sourceInSet && targetInSet) { return "0,5"; // Dashed pattern for upper set connections } return null; // Solid line for other connections }) }) .on("mouseout", function() { // Reset all styling (but keep structure display text) nodeCircles.selectAll(".node-circle") .attr("fill", "white") .attr("stroke", "#333") .attr("stroke-width", 1); nodeCircles.selectAll(".node-label") .attr("fill", "black"); // Reset arc paths opacity arcPaths.forEach(arcPath => { d3.select(arcPath) .transition().ease(ease).duration(speed) .attr("opacity", 0.6); }); connectionPaths .attr("stroke-dasharray", null) .attr("stroke", d => { const sourceGroup = allGroups[d.source.groupIndex]; return sourceGroup.finalColor; }) .attr("stroke-width", 1) .attr("stroke-linecap", "round") .attr("opacity", 0.6); }); return svg.node(); }4e:[] 29:{"id":"da1dbafcbd0d6490","slug":null,"title":"All Polynomial Moduli over GF(2)","thumbnail":"5b22a1908b725182f6cac4c1cd08b49340b846ffa8107e2c43a0c4a079f551ea","access_level":"unlisted","create_time":"$D2025-08-01T22:05:01.793Z","update_time":"$D2026-01-22T00:22:58.121Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","bio":"Data Viz Designer @ Cato Institute","followed_by_you":false,"follows_you":false},"version":692,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"bio":"Data Viz Designer @ Cato Institute","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"},{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"All Polynomial Moduli over GF(2)","cells":[{"id":0,"value":"# All Polynomial Moduli over GF(2)\n## The quotient structure for all polynomial divisors for degree 1-6","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"polyData = polynomialTable","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"### Polynomial Factors and CRT Ring Decomposition","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null