DIBUJANDO GRAFOS EN JAVASCRIPT

<script src=”other pages” title=”dibujando grafos en javascript”>

Que onda! Ando en una de investigador privado, chambeando un poco para acá y para allá, con los que saben, ya saben, y la neta que (ok, suficiente “mejicano” por hoy)…

En esa de investigar, me he encontrado con un tutorial de los panas de Geeky Theory, en el que prueban un poco la librería Vis.js que sirve para dibujar nodos y grafos.

Basta con descargarla (son 2MB aprox.), y referenciarla estáticamente en nuestras páginas, o buscar el RAW en el Octocat y usarlo así. Otra opción es usar gestores de tareas automáticos como Bower o NPM (el gestor de paquetes de Node.js (OMG, cuantas ideas para otros posts 🙂

La idea de este código de ejemplo es: Tres nodos (el array “n”) y tres conexiones (el array “c”). En el caso de las conexiones, quizá con un poco de lógica y creatividad, podríamos hacer magia, pero sólo quiero ilustrar la sencillez del código para elaborar grafos y nodos…

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ejemplo de Grafos</title>
	<link rel="stylesheet" href="https://raw.githubusercontent.com/almende/vis/master/dist/vis.css">
	<script src="https://raw.githubusercontent.com/almende/vis/master/dist/vis.js"></script>
</head>
<body>
	<div id="dibujo"></div>
	<script>
  // Arreglo de nodos
  var n = [
    {id: 1, label: 'Nodo 1'},
    {id: 2, label: 'Nodo 2'},
    {id: 3, label: 'Nodo 3'},
  ];

  // Arreglo de conexiones
  var c = [
    {from: 1, to: 2},
    {from: 2, to: 3},
    {from: 3, to: 1}
  ];

  // Creando el contenedor para el canvas
  var contenedor = document.getElementById('dibujo');
  var datos_dibujo = {
    nodes: n,
    edges: c
  };
  var config = {}; //Se puede personalizar
  var dibujo = new vis.Network(contenedor, datos_dibujo, config);

	</script>
</body>
</html>

Tomen en cuenta que los atributos de cada objeto elemento en cada arreglo se deben respetar para que la librería haga su “magia”. Y he aquí la magia…

Captura de pantalla de 2015-01-26 14:26:28

Bonito, ¿no?

Vale decir que esta librería no se limita solo a dibujar nodos y grafos, también pueden ver otros ejemplos más completos en su página web y su documentación asociada.

Cuantas ideas… Me esta gustando esto de escribir, o ¿mejor lo dibujo? 😉

</script>

Anuncios