{
switch (highlight) {
- case 'comparing': return { bg: 'rgba(59,130,246,0.3)', border: '#3b82f6', text: '#fff' }
- case 'active': return { bg: 'rgba(234,179,8,0.3)', border: '#eab308', text: '#fff' }
- case 'current': return { bg: 'rgba(168,85,247,0.3)', border: '#a855f7', text: '#fff' }
- case 'found': return { bg: 'rgba(74,222,128,0.2)', border: '#4ade80', text: '#4ade80' }
- default: return { bg: 'rgba(38,38,38,1)', border: 'rgba(255,255,255,0.1)', text: '#60a5fa' }
+ case 'comparing':
+ return { bg: 'rgba(59,130,246,0.3)', border: '#3b82f6', text: '#fff' }
+ case 'active':
+ return { bg: 'rgba(234,179,8,0.3)', border: '#eab308', text: '#fff' }
+ case 'current':
+ return { bg: 'rgba(168,85,247,0.3)', border: '#a855f7', text: '#fff' }
+ case 'found':
+ return { bg: 'rgba(74,222,128,0.2)', border: '#4ade80', text: '#4ade80' }
+ default:
+ return {
+ bg: 'rgba(38,38,38,1)',
+ border: 'rgba(255,255,255,0.1)',
+ text: '#60a5fa',
+ }
}
}
const styles = getHighlightStyles()
@@ -1355,7 +1559,10 @@ function BucketsViz({ state }: { state: BucketsState }) {
borderColor: styles.border,
borderWidth: '1px',
color: styles.text,
- animation: phase === 'distributing' && isActive && vIdx === bucket.length - 1 ? 'pop 0.3s ease-out' : 'none',
+ animation:
+ phase === 'distributing' && isActive && vIdx === bucket.length - 1
+ ? 'pop 0.3s ease-out'
+ : 'none',
transform: highlight ? 'scale(1.05)' : 'none',
zIndex: highlight ? 10 : 1,
}}
@@ -1413,3 +1620,191 @@ function BucketsViz({ state }: { state: BucketsState }) {
)
}
+
+// ════════════════════════════════════════════════════════════════
+// ADJACENCY MATRIX — directed graph + labeled N×N matrix
+// ════════════════════════════════════════════════════════════════
+
+const AM_COLORS = {
+ nodeFill: 'rgba(96,165,250,0.12)',
+ nodeStroke: 'rgba(96,165,250,0.35)',
+ nodeText: '#60a5fa',
+ nodeCurrentFill: 'rgba(251,146,60,0.2)',
+ nodeCurrentStroke: 'rgba(251,146,60,0.6)',
+ nodeCurrentText: '#fb923c',
+ edge: 'rgba(255,255,255,0.18)',
+ edgeCurrent: '#fff',
+}
+
+function AdjacencyMatrixViz({ state }: { state: AdjacencyMatrixState }) {
+ const { nodes, edges, matrix, directed, currentEdge, highlightCells = [] } = state
+
+ const R = 18
+ const W = 360
+ const H = 220
+
+ const byId = (id: number) => nodes.find((n) => n.id === id) ?? nodes[id]
+
+ const isHighlightCell = (r: number, c: number) =>
+ highlightCells.some(([hr, hc]) => hr === r && hc === c)
+
+ // Screen-reader summary of the edges set so far
+ const setEdges: string[] = []
+ for (let r = 0; r < matrix.length; r++) {
+ for (let c = 0; c < (matrix[r]?.length ?? 0); c++) {
+ if (matrix[r][c]) setEdges.push(`${byId(r).label}→${byId(c).label}`)
+ }
+ }
+
+ return (
+
0 ? ` Edges set: ${setEdges.join(', ')}.` : ' No edges set yet.'}`}
+ >
+
+ {directed ? 'Directed graph' : 'Undirected graph'}
+
+
+ {/* Graph */}
+
+
+
+
+
+
+
+
+ {/* Edges */}
+ {edges.map((e) => {
+ const a = byId(e.from)
+ const b = byId(e.to)
+ const dx = b.x - a.x
+ const dy = b.y - a.y
+ const len = Math.hypot(dx, dy) || 1
+ const ux = dx / len
+ const uy = dy / len
+ const active = !!currentEdge && currentEdge[0] === e.from && currentEdge[1] === e.to
+ return (
+
+
+ {n.label}
+
+
+ )
+ })}
+
+
+ {/* Matrix */}
+
+
+ adjacency matrix
+
+
+
+ {nodes.map((n) => (
+
+ {n.label}
+
+ ))}
+ {nodes.flatMap((rowNode, r) => [
+
+ {rowNode.label}
+
,
+ ...(matrix[r] ?? []).map((value, c) => {
+ const highlighted = isHighlightCell(r, c)
+ const styles = highlighted
+ ? highlightStyles.current
+ : value
+ ? highlightStyles.placed
+ : null
+ return (
+
+ {value}
+
+ )
+ }),
+ ])}
+
+
+
+ )
+}
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index 5cbdb0b..f148394 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -899,6 +899,32 @@ Applications:
Topological Sort is only possible for DAGs (Directed Acyclic Graphs). If the graph has a cycle, no valid ordering exists.`,
+ 'adjacency-matrix': `Adjacency Matrix
+
+An adjacency matrix represents a graph as a V×V grid, where the cell at row u, column v is 1 (or the edge weight) when there is an edge from u to v, and 0 otherwise.
+
+How it works:
+1. Create a V×V matrix filled with 0
+2. For every edge u → v, set matrix[u][v] = 1
+3. For an undirected graph, also set matrix[v][u] = 1 (the matrix becomes symmetric)
+4. For a directed graph the matrix is generally asymmetric: matrix[u][v] ≠ matrix[v][u]
+
+Time Complexity:
+ Edge lookup: O(1)
+ Iterate a node's neighbors: O(V)
+ Build the matrix: O(V²)
+
+Space Complexity: O(V²) — independent of the number of edges
+
+Adjacency matrix vs adjacency list:
+ - Matrix: O(1) edge lookup, O(V²) space — best for dense graphs
+ - List: O(V + E) space, fast neighbor iteration — best for sparse graphs
+
+Applications:
+ - Dense graphs where most pairs of nodes are connected
+ - Algorithms needing constant-time edge checks (e.g. Floyd–Warshall)
+ - Weighted graphs (store the weight instead of 1)`,
+
'fibonacci-dp': `Fibonacci (Dynamic Programming)
The Fibonacci sequence is a classic example of dynamic programming. Each number is the sum of the two preceding ones: F(n) = F(n-1) + F(n-2).
@@ -1871,6 +1897,32 @@ Aplicaciones:
El Ordenamiento Topológico solo es posible para DAGs (Grafos Acíclicos Dirigidos). Si el grafo tiene un ciclo, no existe un ordenamiento válido.`,
+ 'adjacency-matrix': `Matriz de Adyacencia
+
+Una matriz de adyacencia representa un grafo como una cuadrícula V×V, donde la celda en la fila u, columna v vale 1 (o el peso de la arista) cuando existe una arista de u a v, y 0 en caso contrario.
+
+Cómo funciona:
+1. Crear una matriz V×V llena de 0
+2. Para cada arista u → v, asignar matrix[u][v] = 1
+3. En un grafo no dirigido, asignar también matrix[v][u] = 1 (la matriz se vuelve simétrica)
+4. En un grafo dirigido la matriz suele ser asimétrica: matrix[u][v] ≠ matrix[v][u]
+
+Complejidad Temporal:
+ Consulta de arista: O(1)
+ Recorrer los vecinos de un nodo: O(V)
+ Construir la matriz: O(V²)
+
+Complejidad Espacial: O(V²) — independiente del número de aristas
+
+Matriz de adyacencia vs lista de adyacencia:
+ - Matriz: consulta de arista O(1), espacio O(V²) — ideal para grafos densos
+ - Lista: espacio O(V + E), recorrido de vecinos rápido — ideal para grafos dispersos
+
+Aplicaciones:
+ - Grafos densos donde la mayoría de los pares de nodos están conectados
+ - Algoritmos que necesitan comprobar aristas en tiempo constante (p. ej. Floyd–Warshall)
+ - Grafos ponderados (almacenar el peso en lugar de 1)`,
+
'fibonacci-dp': `Fibonacci (Programación Dinámica)
La secuencia de Fibonacci es un ejemplo clásico de programación dinámica. Cada número es la suma de los dos anteriores: F(n) = F(n-1) + F(n-2).
diff --git a/src/lib/algorithms/graphs.ts b/src/lib/algorithms/graphs.ts
index d5f3c9d..6b3ddbc 100644
--- a/src/lib/algorithms/graphs.ts
+++ b/src/lib/algorithms/graphs.ts
@@ -70,7 +70,11 @@ BFS guarantees finding the shortest path (fewest edges) between two nodes in an
currentEdge: null,
queue: [0],
},
- description: d(locale, 'Starting BFS from node 0. Added to queue.', 'Iniciando BFS desde el nodo 0. Agregado a la cola.'),
+ description: d(
+ locale,
+ 'Starting BFS from node 0. Added to queue.',
+ 'Iniciando BFS desde el nodo 0. Agregado a la cola.',
+ ),
codeLine: 3,
variables: { start: 0, queue: '[0]', visited: '{0}', result: '[]' },
})
@@ -89,7 +93,11 @@ BFS guarantees finding the shortest path (fewest edges) between two nodes in an
currentEdge: null,
queue: [...queue],
},
- description: d(locale, `Dequeued node ${node}. Processing neighbors...`, `Nodo ${node} desencolado. Procesando vecinos...`),
+ description: d(
+ locale,
+ `Dequeued node ${node}. Processing neighbors...`,
+ `Nodo ${node} desencolado. Procesando vecinos...`,
+ ),
codeLine: 8,
variables: { node, queue: `[${queue.join(', ')}]`, result: `[${visitedNodes.join(', ')}]` },
})
@@ -110,7 +118,11 @@ BFS guarantees finding the shortest path (fewest edges) between two nodes in an
currentEdge: [node, neighbor],
queue: [...queue],
},
- description: d(locale, `Discovered node ${neighbor} via edge ${node}→${neighbor}. Added to queue.`, `Nodo ${neighbor} descubierto por arista ${node}→${neighbor}. Agregado a la cola.`),
+ description: d(
+ locale,
+ `Discovered node ${neighbor} via edge ${node}→${neighbor}. Added to queue.`,
+ `Nodo ${neighbor} descubierto por arista ${node}→${neighbor}. Agregado a la cola.`,
+ ),
codeLine: 13,
variables: {
node,
@@ -133,7 +145,11 @@ BFS guarantees finding the shortest path (fewest edges) between two nodes in an
currentEdge: null,
queue: [],
},
- description: d(locale, `BFS complete! Visit order: ${visitedNodes.join(' → ')}`, `¡BFS completado! Orden de visita: ${visitedNodes.join(' → ')}`),
+ description: d(
+ locale,
+ `BFS complete! Visit order: ${visitedNodes.join(' → ')}`,
+ `¡BFS completado! Orden de visita: ${visitedNodes.join(' → ')}`,
+ ),
codeLine: 19,
variables: { result: `[${visitedNodes.join(', ')}]` },
})
@@ -230,7 +246,11 @@ DFS explores deep paths first, which makes it useful for topological sorting and
currentEdge: null,
stack: [...stack],
},
- description: d(locale, `Visiting node ${node}. Exploring its neighbors...`, `Visitando nodo ${node}. Explorando sus vecinos...`),
+ description: d(
+ locale,
+ `Visiting node ${node}. Exploring its neighbors...`,
+ `Visitando nodo ${node}. Explorando sus vecinos...`,
+ ),
codeLine: 6,
variables: {
node,
@@ -254,7 +274,11 @@ DFS explores deep paths first, which makes it useful for topological sorting and
currentEdge: [node, neighbor],
stack: [...stack],
},
- description: d(locale, `Exploring edge ${node} → ${neighbor}`, `Explorando arista ${node} → ${neighbor}`),
+ description: d(
+ locale,
+ `Exploring edge ${node} → ${neighbor}`,
+ `Explorando arista ${node} → ${neighbor}`,
+ ),
codeLine: 9,
variables: {
node,
@@ -281,7 +305,11 @@ DFS explores deep paths first, which makes it useful for topological sorting and
currentEdge: null,
stack: [...stack],
},
- description: d(locale, `Backtracking from node ${node} to node ${stack[stack.length - 1]}`, `Retrocediendo del nodo ${node} al nodo ${stack[stack.length - 1]}`),
+ description: d(
+ locale,
+ `Backtracking from node ${node} to node ${stack[stack.length - 1]}`,
+ `Retrocediendo del nodo ${node} al nodo ${stack[stack.length - 1]}`,
+ ),
codeLine: 12,
variables: {
node,
@@ -304,7 +332,11 @@ DFS explores deep paths first, which makes it useful for topological sorting and
currentEdge: null,
stack: [],
},
- description: d(locale, `DFS complete! Visit order: ${visitedNodes.join(' → ')}`, `¡DFS completado! Orden de visita: ${visitedNodes.join(' → ')}`),
+ description: d(
+ locale,
+ `DFS complete! Visit order: ${visitedNodes.join(' → ')}`,
+ `¡DFS completado! Orden de visita: ${visitedNodes.join(' → ')}`,
+ ),
codeLine: 17,
variables: { result: `[${visitedNodes.join(', ')}]` },
})
@@ -427,7 +459,11 @@ Dijkstra's is one of the most important graph algorithms and guarantees optimal
currentEdge: null,
distances: { ...dist },
},
- description: d(locale, 'Starting Dijkstra from node A. All distances set to ∞ except source (0).', 'Iniciando Dijkstra desde el nodo A. Todas las distancias en ∞ excepto el origen (0).'),
+ description: d(
+ locale,
+ 'Starting Dijkstra from node A. All distances set to ∞ except source (0).',
+ 'Iniciando Dijkstra desde el nodo A. Todas las distancias en ∞ excepto el origen (0).',
+ ),
codeLine: 1,
variables: { start: 'A', distances: distStr() },
})
@@ -457,7 +493,11 @@ Dijkstra's is one of the most important graph algorithms and guarantees optimal
currentEdge: null,
distances: { ...dist },
},
- description: d(locale, `Pick node ${djNodes[minNode].label} (distance ${dist[minNode]}). Relaxing its neighbors...`, `Seleccionado nodo ${djNodes[minNode].label} (distancia ${dist[minNode]}). Relajando sus vecinos...`),
+ description: d(
+ locale,
+ `Pick node ${djNodes[minNode].label} (distance ${dist[minNode]}). Relaxing its neighbors...`,
+ `Seleccionado nodo ${djNodes[minNode].label} (distancia ${dist[minNode]}). Relajando sus vecinos...`,
+ ),
codeLine: 8,
variables: {
node: djNodes[minNode].label,
@@ -487,7 +527,11 @@ Dijkstra's is one of the most important graph algorithms and guarantees optimal
currentEdge: [minNode, neighbor],
distances: { ...dist },
},
- description: d(locale, `Relaxed ${djNodes[minNode].label}→${djNodes[neighbor].label} (weight ${weight}). Distance to ${djNodes[neighbor].label}: ${oldDist} → ${newDist}`, `Relajado ${djNodes[minNode].label}→${djNodes[neighbor].label} (peso ${weight}). Distancia a ${djNodes[neighbor].label}: ${oldDist} → ${newDist}`),
+ description: d(
+ locale,
+ `Relaxed ${djNodes[minNode].label}→${djNodes[neighbor].label} (weight ${weight}). Distance to ${djNodes[neighbor].label}: ${oldDist} → ${newDist}`,
+ `Relajado ${djNodes[minNode].label}→${djNodes[neighbor].label} (peso ${weight}). Distancia a ${djNodes[neighbor].label}: ${oldDist} → ${newDist}`,
+ ),
codeLine: 20,
variables: {
from: djNodes[minNode].label,
@@ -508,7 +552,11 @@ Dijkstra's is one of the most important graph algorithms and guarantees optimal
currentEdge: [minNode, neighbor],
distances: { ...dist },
},
- description: d(locale, `Edge ${djNodes[minNode].label}→${djNodes[neighbor].label} (weight ${weight}): ${newDist} ≥ ${oldDist}. No improvement.`, `Arista ${djNodes[minNode].label}→${djNodes[neighbor].label} (peso ${weight}): ${newDist} ≥ ${oldDist}. Sin mejora.`),
+ description: d(
+ locale,
+ `Edge ${djNodes[minNode].label}→${djNodes[neighbor].label} (weight ${weight}): ${newDist} ≥ ${oldDist}. No improvement.`,
+ `Arista ${djNodes[minNode].label}→${djNodes[neighbor].label} (peso ${weight}): ${newDist} ≥ ${oldDist}. Sin mejora.`,
+ ),
codeLine: 20,
variables: {
from: djNodes[minNode].label,
@@ -532,7 +580,11 @@ Dijkstra's is one of the most important graph algorithms and guarantees optimal
currentEdge: null,
distances: { ...dist },
},
- description: d(locale, `Dijkstra complete! Shortest distances from A: ${distStr()}`, `¡Dijkstra completado! Distancias más cortas desde A: ${distStr()}`),
+ description: d(
+ locale,
+ `Dijkstra complete! Shortest distances from A: ${distStr()}`,
+ `¡Dijkstra completado! Distancias más cortas desde A: ${distStr()}`,
+ ),
codeLine: 26,
variables: { distances: distStr() },
})
@@ -659,7 +711,11 @@ Prim's Algorithm is a greedy algorithm that always picks the locally optimal edg
currentEdge: null,
distances: { ...key },
},
- description: d(locale, "Starting Prim's MST from node A. All key values set to ∞ except source (0).", 'Iniciando MST de Prim desde el nodo A. Todos los valores clave en ∞ excepto el origen (0).'),
+ description: d(
+ locale,
+ "Starting Prim's MST from node A. All key values set to ∞ except source (0).",
+ 'Iniciando MST de Prim desde el nodo A. Todos los valores clave en ∞ excepto el origen (0).',
+ ),
codeLine: 1,
variables: { start: 'A', keys: keyStr() },
})
@@ -696,8 +752,16 @@ Prim's Algorithm is a greedy algorithm that always picks the locally optimal edg
},
description:
parent[minNode] !== null
- ? d(locale, `Added ${prNodes[minNode].label} to MST via edge ${prNodes[parent[minNode]!].label}→${prNodes[minNode].label} (weight ${key[minNode]})`, `${prNodes[minNode].label} agregado al MST por arista ${prNodes[parent[minNode]!].label}→${prNodes[minNode].label} (peso ${key[minNode]})`)
- : d(locale, `Starting MST from node ${prNodes[minNode].label}`, `Iniciando MST desde el nodo ${prNodes[minNode].label}`),
+ ? d(
+ locale,
+ `Added ${prNodes[minNode].label} to MST via edge ${prNodes[parent[minNode]!].label}→${prNodes[minNode].label} (weight ${key[minNode]})`,
+ `${prNodes[minNode].label} agregado al MST por arista ${prNodes[parent[minNode]!].label}→${prNodes[minNode].label} (peso ${key[minNode]})`,
+ )
+ : d(
+ locale,
+ `Starting MST from node ${prNodes[minNode].label}`,
+ `Iniciando MST desde el nodo ${prNodes[minNode].label}`,
+ ),
codeLine: 8,
variables: { node: prNodes[minNode].label, key: key[minNode] as number, keys: keyStr() },
})
@@ -721,7 +785,11 @@ Prim's Algorithm is a greedy algorithm that always picks the locally optimal edg
currentEdge: [minNode, neighbor],
distances: { ...key },
},
- description: d(locale, `Updated key of ${prNodes[neighbor].label}: ${oldKey} → ${weight} (via ${prNodes[minNode].label})`, `Clave de ${prNodes[neighbor].label} actualizada: ${oldKey} → ${weight} (vía ${prNodes[minNode].label})`),
+ description: d(
+ locale,
+ `Updated key of ${prNodes[neighbor].label}: ${oldKey} → ${weight} (via ${prNodes[minNode].label})`,
+ `Clave de ${prNodes[neighbor].label} actualizada: ${oldKey} → ${weight} (vía ${prNodes[minNode].label})`,
+ ),
codeLine: 21,
variables: {
from: prNodes[minNode].label,
@@ -752,7 +820,11 @@ Prim's Algorithm is a greedy algorithm that always picks the locally optimal edg
currentEdge: null,
distances: { ...key },
},
- description: d(locale, `Prim's complete! MST total weight: ${totalWeight}. Edges: ${visitedEdges.map(([f, t]) => `${prNodes[f].label}-${prNodes[t].label}`).join(', ')}`, `¡Prim completado! Peso total del MST: ${totalWeight}. Aristas: ${visitedEdges.map(([f, t]) => `${prNodes[f].label}-${prNodes[t].label}`).join(', ')}`),
+ description: d(
+ locale,
+ `Prim's complete! MST total weight: ${totalWeight}. Edges: ${visitedEdges.map(([f, t]) => `${prNodes[f].label}-${prNodes[t].label}`).join(', ')}`,
+ `¡Prim completado! Peso total del MST: ${totalWeight}. Aristas: ${visitedEdges.map(([f, t]) => `${prNodes[f].label}-${prNodes[t].label}`).join(', ')}`,
+ ),
codeLine: 28,
variables: { totalWeight, mstEdges: visitedEdges.length },
})
@@ -878,7 +950,11 @@ If the graph has a cycle, a topological ordering is not possible (not all nodes
currentEdge: null,
queue: [],
},
- description: d(locale, `DAG with ${tsNodes.length} nodes. Computing in-degrees for Kahn's algorithm.`, `DAG con ${tsNodes.length} nodos. Calculando grados de entrada para el algoritmo de Kahn.`),
+ description: d(
+ locale,
+ `DAG with ${tsNodes.length} nodes. Computing in-degrees for Kahn's algorithm.`,
+ `DAG con ${tsNodes.length} nodos. Calculando grados de entrada para el algoritmo de Kahn.`,
+ ),
codeLine: 1,
variables: { inDegrees: inDegStr() },
})
@@ -898,7 +974,11 @@ If the graph has a cycle, a topological ordering is not possible (not all nodes
currentEdge: null,
queue: [...queue],
},
- description: d(locale, `Nodes with in-degree 0: [${queue.map((id) => tsNodes[id].label).join(', ')}]. Added to queue.`, `Nodos con grado de entrada 0: [${queue.map((id) => tsNodes[id].label).join(', ')}]. Agregados a la cola.`),
+ description: d(
+ locale,
+ `Nodes with in-degree 0: [${queue.map((id) => tsNodes[id].label).join(', ')}]. Added to queue.`,
+ `Nodos con grado de entrada 0: [${queue.map((id) => tsNodes[id].label).join(', ')}]. Agregados a la cola.`,
+ ),
codeLine: 12,
variables: {
queue: `[${queue.map((id) => tsNodes[id].label).join(', ')}]`,
@@ -921,7 +1001,11 @@ If the graph has a cycle, a topological ordering is not possible (not all nodes
currentEdge: null,
queue: [...queue],
},
- description: d(locale, `Dequeued ${tsNodes[node].label}. Order: [${order.map((id) => tsNodes[id].label).join(', ')}]`, `${tsNodes[node].label} desencolado. Orden: [${order.map((id) => tsNodes[id].label).join(', ')}]`),
+ description: d(
+ locale,
+ `Dequeued ${tsNodes[node].label}. Order: [${order.map((id) => tsNodes[id].label).join(', ')}]`,
+ `${tsNodes[node].label} desencolado. Orden: [${order.map((id) => tsNodes[id].label).join(', ')}]`,
+ ),
codeLine: 18,
variables: {
node: tsNodes[node].label,
@@ -948,7 +1032,11 @@ If the graph has a cycle, a topological ordering is not possible (not all nodes
currentEdge: [node, neighbor],
queue: [...queue],
},
- description: d(locale, `Reduced in-degree of ${tsNodes[neighbor].label} to ${inDegree[neighbor]}${inDegree[neighbor] === 0 ? ' → added to queue' : ''}`, `Grado de entrada de ${tsNodes[neighbor].label} reducido a ${inDegree[neighbor]}${inDegree[neighbor] === 0 ? ' → agregado a la cola' : ''}`),
+ description: d(
+ locale,
+ `Reduced in-degree of ${tsNodes[neighbor].label} to ${inDegree[neighbor]}${inDegree[neighbor] === 0 ? ' → added to queue' : ''}`,
+ `Grado de entrada de ${tsNodes[neighbor].label} reducido a ${inDegree[neighbor]}${inDegree[neighbor] === 0 ? ' → agregado a la cola' : ''}`,
+ ),
codeLine: 22,
variables: {
from: tsNodes[node].label,
@@ -970,7 +1058,11 @@ If the graph has a cycle, a topological ordering is not possible (not all nodes
currentEdge: null,
queue: [],
},
- description: d(locale, `Topological sort complete! Order: ${order.map((id) => tsNodes[id].label).join(' → ')}`, `¡Ordenamiento topológico completado! Orden: ${order.map((id) => tsNodes[id].label).join(' → ')}`),
+ description: d(
+ locale,
+ `Topological sort complete! Order: ${order.map((id) => tsNodes[id].label).join(' → ')}`,
+ `¡Ordenamiento topológico completado! Orden: ${order.map((id) => tsNodes[id].label).join(' → ')}`,
+ ),
codeLine: 30,
variables: { order: `[${order.map((id) => tsNodes[id].label).join(', ')}]` },
})
@@ -979,10 +1071,158 @@ If the graph has a cycle, a topological ordering is not possible (not all nodes
},
}
-export {
- bfs,
- dfs,
- dijkstra,
- prim,
- topologicalSort,
+// ============================================================
+// ADJACENCY MATRIX (graph representation)
+// ============================================================
+const adjacencyMatrix: Algorithm = {
+ id: 'adjacency-matrix',
+ name: 'Adjacency Matrix',
+ category: 'Graphs',
+ difficulty: 'easy',
+ visualization: 'concept',
+ code: `function buildAdjacencyMatrix(numNodes, edges) {
+ // Initialize an N×N matrix filled with 0
+ const matrix = Array.from({ length: numNodes }, () =>
+ new Array(numNodes).fill(0)
+ );
+
+ // For each directed edge u → v, set matrix[u][v] = 1
+ for (const [u, v] of edges) {
+ matrix[u][v] = 1;
+ }
+
+ return matrix;
+}`,
+ description: `Adjacency Matrix
+
+An adjacency matrix is a way to represent a graph as a 2D grid. For a graph with V vertices, it is a V×V matrix where the cell at row u, column v is 1 (or the edge weight) when there is an edge from u to v, and 0 otherwise.
+
+How it works:
+1. Create a V×V matrix filled with 0
+2. For every edge u→v, set matrix[u][v] = 1
+3. For an undirected graph you also set matrix[v][u] = 1, which makes the matrix symmetric
+4. For a directed graph the matrix is generally asymmetric: matrix[u][v] ≠ matrix[v][u]
+
+Time Complexity:
+ Edge lookup: O(1) — just read matrix[u][v]
+ Iterate a node's neighbors: O(V)
+ Build the matrix: O(V²)
+
+Space Complexity: O(V²) — independent of the number of edges
+
+Adjacency matrix vs adjacency list:
+ - Matrix: O(1) edge lookup, but O(V²) space — best for dense graphs
+ - List: O(V + E) space and fast neighbor iteration — best for sparse graphs
+
+Applications:
+ - Dense graphs where most pairs of nodes are connected
+ - Algorithms that need constant-time edge checks (e.g. Floyd–Warshall)
+ - Weighted graphs (store the weight instead of 1)`,
+
+ generateSteps(locale = 'en') {
+ const amNodes: GraphNode[] = [
+ { id: 0, label: 'A', x: 60, y: 50 },
+ { id: 1, label: 'B', x: 300, y: 50 },
+ { id: 2, label: 'C', x: 60, y: 170 },
+ { id: 3, label: 'D', x: 300, y: 170 },
+ { id: 4, label: 'E', x: 180, y: 110 },
+ ]
+ const amEdges: GraphEdge[] = [
+ { from: 0, to: 1 },
+ { from: 0, to: 2 },
+ { from: 1, to: 3 },
+ { from: 2, to: 3 },
+ { from: 2, to: 4 },
+ { from: 3, to: 4 },
+ { from: 4, to: 0 },
+ ]
+
+ const n = amNodes.length
+ const matrix: number[][] = amNodes.map(() => new Array(n).fill(0))
+ const labelOf = (id: number) => amNodes[id].label
+
+ const steps: Step[] = []
+ const snapshot = () => matrix.map((row) => [...row])
+
+ steps.push({
+ concept: {
+ type: 'adjacencyMatrix',
+ nodes: amNodes,
+ edges: amEdges,
+ matrix: snapshot(),
+ directed: true,
+ },
+ description: d(
+ locale,
+ `A directed graph with ${n} nodes and ${amEdges.length} edges. Let's represent it as a ${n}×${n} adjacency matrix.`,
+ `Un grafo dirigido con ${n} nodos y ${amEdges.length} aristas. Vamos a representarlo como una matriz de adyacencia de ${n}×${n}.`,
+ ),
+ codeLine: 1,
+ variables: { nodes: n, edges: amEdges.length },
+ })
+
+ steps.push({
+ concept: {
+ type: 'adjacencyMatrix',
+ nodes: amNodes,
+ edges: amEdges,
+ matrix: snapshot(),
+ directed: true,
+ },
+ description: d(
+ locale,
+ `Initialize a ${n}×${n} matrix filled with 0 — no edges recorded yet.`,
+ `Inicializa una matriz de ${n}×${n} llena de 0 — todavía sin aristas registradas.`,
+ ),
+ codeLine: 3,
+ variables: { matrix: `${n}×${n} of 0` },
+ })
+
+ for (const e of amEdges) {
+ matrix[e.from][e.to] = 1
+
+ steps.push({
+ concept: {
+ type: 'adjacencyMatrix',
+ nodes: amNodes,
+ edges: amEdges,
+ matrix: snapshot(),
+ directed: true,
+ currentEdge: [e.from, e.to],
+ highlightCells: [[e.from, e.to]],
+ },
+ description: d(
+ locale,
+ `Edge ${labelOf(e.from)}→${labelOf(e.to)}: set matrix[${e.from}][${e.to}] = 1.`,
+ `Arista ${labelOf(e.from)}→${labelOf(e.to)}: asigna matrix[${e.from}][${e.to}] = 1.`,
+ ),
+ codeLine: 9,
+ variables: {
+ edge: `${labelOf(e.from)}→${labelOf(e.to)}`,
+ [`matrix[${e.from}][${e.to}]`]: 1,
+ },
+ })
+ }
+
+ steps.push({
+ concept: {
+ type: 'adjacencyMatrix',
+ nodes: amNodes,
+ edges: amEdges,
+ matrix: snapshot(),
+ directed: true,
+ },
+ description: d(
+ locale,
+ 'Matrix complete. Because the graph is directed, it is asymmetric: matrix[u][v] does not always equal matrix[v][u]. Edge lookup is now O(1).',
+ 'Matriz completa. Como el grafo es dirigido, es asimétrica: matrix[u][v] no siempre es igual a matrix[v][u]. La consulta de aristas ahora es O(1).',
+ ),
+ codeLine: 12,
+ variables: { space: 'O(V²)', lookup: 'O(1)' },
+ })
+
+ return steps
+ },
}
+
+export { bfs, dfs, dijkstra, prim, topologicalSort, adjacencyMatrix }
diff --git a/src/lib/algorithms/index.ts b/src/lib/algorithms/index.ts
index 0985581..916ae71 100644
--- a/src/lib/algorithms/index.ts
+++ b/src/lib/algorithms/index.ts
@@ -39,25 +39,11 @@ import {
interpolationSearch,
} from '@lib/algorithms/searching'
-import {
- bfs,
- dfs,
- dijkstra,
- prim,
- topologicalSort,
-} from '@lib/algorithms/graphs'
+import { bfs, dfs, dijkstra, prim, topologicalSort, adjacencyMatrix } from '@lib/algorithms/graphs'
-import {
- fibonacciDp,
- knapsack,
- lcs,
-} from '@lib/algorithms/dynamic-programming'
+import { fibonacciDp, knapsack, lcs } from '@lib/algorithms/dynamic-programming'
-import {
- nQueens,
- sudokuSolver,
- mazePathfinding,
-} from '@lib/algorithms/backtracking'
+import { nQueens, sudokuSolver, mazePathfinding } from '@lib/algorithms/backtracking'
import { towerOfHanoi } from '@lib/algorithms/divide-and-conquer'
@@ -96,6 +82,7 @@ export const algorithms: Algorithm[] = [
jumpSearch,
interpolationSearch,
// Graphs
+ adjacencyMatrix,
bfs,
dfs,
dijkstra,
@@ -117,7 +104,10 @@ export const algorithms: Algorithm[] = [
export const categories: Category[] = [
{ name: 'Concepts', algorithms: algorithms.filter((a) => a.category === 'Concepts') },
- { name: 'Data Structures', algorithms: algorithms.filter((a) => a.category === 'Data Structures') },
+ {
+ name: 'Data Structures',
+ algorithms: algorithms.filter((a) => a.category === 'Data Structures'),
+ },
{ name: 'Sorting', algorithms: algorithms.filter((a) => a.category === 'Sorting') },
{ name: 'Searching', algorithms: algorithms.filter((a) => a.category === 'Searching') },
{ name: 'Graphs', algorithms: algorithms.filter((a) => a.category === 'Graphs') },
diff --git a/src/lib/types.ts b/src/lib/types.ts
index f9054d1..cf62aeb 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -194,6 +194,18 @@ export interface BucketsState {
operation?: string
}
+// ── Graph representation visualization types ──
+
+export interface AdjacencyMatrixState {
+ type: 'adjacencyMatrix'
+ nodes: GraphNode[]
+ edges: GraphEdge[]
+ matrix: number[][] // N×N, 0/1; rows = "from", cols = "to"
+ directed: boolean
+ currentEdge?: [number, number] | null // edge being processed (graph highlight)
+ highlightCells?: [number, number][] // matrix cells [row, col] to highlight
+}
+
export type ConceptState =
| BigOState
| CallStackState
@@ -206,6 +218,7 @@ export type ConceptState =
| MemoTableState
| CoinChangeState
| BucketsState
+ | AdjacencyMatrixState
export interface Step {
array?: number[]