Skip to content

feat(graphs): add adjacency matrix representation visualizer#15

Open
dcq-31 wants to merge 1 commit into
midudev:mainfrom
dcq-31:feat/adjacency-matrix-representation
Open

feat(graphs): add adjacency matrix representation visualizer#15
dcq-31 wants to merge 1 commit into
midudev:mainfrom
dcq-31:feat/adjacency-matrix-representation

Conversation

@dcq-31

@dcq-31 dcq-31 commented Jun 14, 2026

Copy link
Copy Markdown
Contributor

Add Adjacency Matrix algorithm to existing Graphs category

Summary

This PR adds Adjacency Matrix to the existing Graphs category — not another traversal, but a graph representation primer. It builds the V×V adjacency matrix of a small directed graph and shows that building the matrix is O(V²), it costs O(V²) space, and edge lookup is O(1). It's visualized with the project's "composite concept" pattern: the directed graph is drawn beside its matrix, which fills one cell per edge as the algorithm scans the edge list. It's registered at the top of the Graphs category so the representation is taught before the traversal algorithms (BFS, DFS, Dijkstra, …) that rely on it.

Changes

  • New algorithm: src/lib/algorithms/graphs.tsadjacencyMatrix const with visualization: 'concept', a local 5-node directed graph (A–E, 7 edges), and bilingual generateSteps via the d() helper.
  • Type: src/lib/types.ts — new AdjacencyMatrixState concept sub-type (nodes, edges, matrix, directed, currentEdge, highlightCells) added to the ConceptState union.
  • Visualizer: src/components/ConceptVisualizer.tsxadjacencyMatrix dispatch case plus an inline AdjacencyMatrixViz (SVG directed graph with <marker> arrowheads + a labeled N×N matrix grid), reusing the existing highlightStyles colors and an aria-label summary of the edges set.
  • Registry: src/lib/algorithms/index.ts — import + registration at the top of the // Graphs block (representation before traversal). The category is existing, so no new category entry is needed.
  • i18n: src/i18n/translations.tsalgorithmDescriptions['adjacency-matrix'] entries added for both en and es. The Graphs / Grafos category label already exists.
  • READMEs: README.md and README_ES.md — added to the Graphs / Grafos catalog (leading the list).

Visualization

  1. Initial frame: the directed graph (5 nodes A–E, 7 edges with arrowheads) is drawn above an all-zero 5×5 matrix with node labels on the rows and columns.
  2. Initialize: the V×V matrix is created filled with 0 — no edges recorded yet.
  3. Per edge u→v: the active edge turns white in the graph (its two endpoints highlight orange) and the matching cell (u, v) flips to 1, highlighted white then settling green (#4ade80); the active code line and variables (edge, matrix[u][v]) track each assignment.
  4. Final frame: the completed matrix — 1s are green, 0s are dim (#444). Because the graph is directed the matrix is asymmetric (matrix[u][v] ≠ matrix[v][u]), and the panel notes edge lookup is now O(1) and space is O(V²).

- Add an Adjacency Matrix entry to the Graphs category that animates building
  the N×N adjacency matrix of a directed graph, edge by edge, with the graph
  drawn beside the matrix.
- Add the `adjacencyMatrix` concept sub-type (`AdjacencyMatrixState`) and an
  inline `AdjacencyMatrixViz` component reusing the existing highlight styles.
- Place it at the top of the Graphs category so the representation is taught
  before the traversal algorithms that rely on it.
- Add bilingual (en/es) descriptions and update the README catalogs.
@vercel

vercel Bot commented Jun 14, 2026

Copy link
Copy Markdown

@dcq-31 is attempting to deploy a commit to the midudev pro Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant