Representación visual de grafos en JavaScript

Domina la representación de grafos en JavaScript con tres enfoques prácticos y legibles. Aquí verás cómo modelar conexiones entre nodos usando arrays, objetos y matrices con ceros y unos. El objetivo: una representación visual clara que te permita construir la lógica de la estructura de datos sin enredos.

¿Cómo se representan grafos en código de forma clara?

Para el ejemplo, se trabaja un grafo no dirigido con nodos 0, 1, 2 y 3. Las conexiones son: 0–2, 2–3, 2–1 y 1–3. La explicación compara tres formatos: lista de aristas (edge list), lista de adyacencia (adjacent list) y matriz de adyacencia (adjacent matrix).

• Usar arrays para conexiones simples y directas.
• Usar objetos (hash table) para legibilidad por índice.
• Usar matrices con 0 y 1 cuando se requiera presencia/ausencia de conexión o grafos ponderados.

¿Qué diferencias clave hay entre edge list, adjacent list y matrix?

Estos modelos mapearán el mismo grafo, pero con estructuras distintas. Cada opción enfatiza algo distinto: simplicidad, vecindad por índice o cálculo con matriz.

¿Cómo funciona un edge list en JavaScript?

Representa solo las conexiones como pares de nodos. Es conciso y directo.

• Fácil de leer y construir.
• Ideal para listar aristas sin más contexto.

// Edge list (grafo no dirigido)
const graph = [
  [0, 2],
  [2, 3],
  [2, 1],
  [1, 3]
];

¿Cómo se crea un adjacent list con arrays u objetos?

Agrupa vecinos por índice. Se puede modelar como array de arrays o como objeto (hash table) para mayor claridad visual.

• Índice = nodo. Valor = lista de vecinos.
• Más rápido para consultar “¿con quién conecta este nodo?”.

// Adjacent list con array de arrays (índice = nodo)
const graph = [
  [2],       // 0 → 2
  [2, 3],    // 1 → 2, 3
  [0, 1, 3], // 2 → 0, 1, 3
  [1, 2]     // 3 → 1, 2
];

// Adjacent list con objeto (*hash table*)
const graph = {
  0: [2],
  1: [2, 3],
  2: [0, 1, 3],
  3: [1, 2]
};

¿Cuándo conviene un adjacent matrix con 0 y 1?

Cuando necesitas una matriz que indique con 1 si hay conexión y 0 si no. Útil para escenarios que requieran cálculo matricial o grafos ponderados.

• Filas y columnas = nodos por índice.
• Valores binarios: 1 si hay arista, 0 si no.

// Adjacent matrix con array de arrays
const graph = [
  // 0  1  2  3
  [0, 0, 1, 0], // 0
  [0, 0, 1, 1], // 1
  [1, 1, 0, 1], // 2
  [0, 1, 1, 0]  // 3
];

// Adjacent matrix con objeto anidado (*hash table*)
const graph = {
  0: { 0: 0, 1: 0, 2: 1, 3: 0 },
  1: { 0: 0, 1: 0, 2: 1, 3: 1 },
  2: { 0: 1, 1: 1, 2: 0, 3: 1 },
  3: { 0: 0, 1: 1, 2: 1, 3: 0 }
};

¿Cuál será la estrategia para el ejercicio en JavaScript?

Se trabajará un grafo no dirigido usando adjacent list. La implementación elegida será con objeto (hash table) por su claridad al leer índices y vecinos. Esto facilita entender la estructura objetivo y construir la lógica paso a paso.

• Objetivo inmediato: modelar el grafo como objeto con listas de vecinos.
• Ventaja: visualización clara de índices y valores (clave–valor).
• Siguiente paso: implementar métodos sobre esta representación.

¿Te animas a codificar tu versión y compartirla? Cuéntame en los comentarios cómo lo resolviste y qué decisiones tomaste.