Bienvenido, me llamo Miguel y aquà les traigo este nuevo artÃculo.
Gráficos de red son una forma especial y muy interesante de visualización de datos. A diferencia de los tipos de gráficos más tradicionales como gráficos de barras o gráficos circulares, un gráfico de red hace algo más que visualizar datos numéricos.
Con estos gráficos, usted representa cada objeto como un punto, denominado nodo, y las conexiones entre los objetos como una lÃnea, denominada vÃnculo o borde.
Ahora mismo, te guiaré a través de cómo desarrollar un gráfico de red interactivo para la web usando JavaScript (HTML5). Inspirado por una visualización divertida creado por Ben Sullins, decidà tomar datos sobre la serie de televisión más grande de la última década, Game of Thrones.
Es un cuento de fantasÃa épico que gira en torno a las disputas de varias casas de facciones. Entonces, en este tutorial, estaré Visualizar las relaciones en el mundo de Game of Thrones mostrando quién atacó a quién. SÃgueme, ¡será una aventura genial!
Índice
Gráfico de red a realizar
Construyendo un gráfico de red JS desde cero
Básicamente, para construir un gráfico de red basado en JS, debemos seguir los mismos cuatro pasos que con cualquier gráfico de JavaScript:
- Crea una página HTML.
- Agregue los scripts necesarios.
- Cargue los datos que se visualizarán.
- Dibuja la tabla.
El primer paso para construir nuestro gráfico de red es configurar una página HTML. Esto implica crear una plantilla HTML básica para el gráfico y agregar las reglas CSS necesarias.
Aquà también agregamos un tÃtulo para nuestra página HTML y creamos un div para contener el gráfico.
<!DOCTYPE html> <html> <head> <title>JavaScript Network Graph</title> <style> html, body, #container width: 100%; height: 100%; margin: 0; padding: 0; </style> </head> <body> <div id="container"></div> <script> // The chart code goes here. </script> </body> </html>
He configurado el CSS para que el contenedor div llene toda la página. Es posible que desee cambiar esto según su caso de uso, por supuesto.
El segundo paso es agregar todos los scripts necesarios. Nosotros usaremos Gráficos AnyChart JS que es una biblioteca de gráficos de JavaScript potente y muy fácil de usar.
Personalmente, amo AnyChart porque es ideal tanto para principiantes como para profesionales. Le permite crear rápidamente un prototipo de visualizaciones de datos y realmente ayuda a acelerar todo el proceso de desarrollo.
Para hacer un buen uso de la biblioteca AnyChart, necesitamos agregar su dedicado módulos.
En este tutorial, usaremos tres de ellos. Los módulos Core y Graph son necesarios para dibujar nuestro gráfico de red, y el módulo Adaptador de datos nos ayudará a importar los datos JSON de Game of Thrones (más sobre eso en breve).
<script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"> </script><script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-graph.min.js"> </script><script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
Agregamos estos scripts al encabezado de nuestro código.
Como se explicó anteriormente, los datos que usaremos se basan en Game of Thrones. Encontré un gran conjunto de datos La guerra de los cinco reyes. Los datos se obtuvieron originalmente de Una wiki de fuego y hielo, una wiki dedicada a Juego de Tronos.
Luego fue raspado y limpiado por el cientÃfico de datos Chris Albon, Director de Aprendizaje Automático de la Fundación Wikimedia. Lo procesé más por mà mismo para el propósito de este tutorial de gráfico de red JS; puedes encontrar el resultado aquÃ, en JSON.
Cada nodo requiere una 'identificación'
. Los bordes necesitan un 'desde'
y 'hasta'
, que es el origen y el destino de cada conexión respectivamente.
Me gusta esto:
nodes: [ "id": "Lannister" ] edges: [ "from": "Lannister", "to": "Tully" ]
Entonces necesitamos importar nuestros datos. La carga de datos para visualizaciones de datos de JavaScript a veces puede ser bastante molesta. Pero con AnyChart, trabajando con datos realmente es muy sencillo.
Aprovechando la función correcta, puede importar fácilmente CSV, JSON, XML e incluso una hoja de cálculo de Google.
AquÃ, nuestros datos están en formato JSON, por lo que necesitamos la siguiente función:
anychart.data.loadJsonFile('https://static.anychart.com/git-storage/word-press/data/network-graph-tutorial/data.json', function (data) // The chart code goes here. )
Debido a que queremos que nuestro gráfico se dibuje solo después de que los datos se carguen correctamente, colocaremos nuestro código para dibujar el gráfico dentro de esta función.
El cuarto y último paso es dibujar el gráfico. Aquà ordenamos crear un gráfico a partir de nuestros datos, establecer el tÃtulo del gráfico y luego visualizar nuestro gráfico usando estas funciones muy sencillas:
// create a chart from the loaded data var chart = anychart.graph(data); // set the title chart.title("Network Graph showing the battles in Game of Thrones"); // draw the chart chart.container("container").draw();
Y este es el resultado:
Vea este ejemplo de gráfico de red con el código HTML / CSS / JS completo en Zona de juegos AnyChart o CodePen.
Tal vez no sea tan estéticamente impresionante como nuestra inspiración basada en D3.js, pero llegaremos a eso más adelante.
Tómese un tiempo para desplazarse sobre los nodos, tal vez arrástrelos un poco. ¿Qué asombroso? Con estos cuatro sencillos pasos y unas pocas lÃneas del código JavaScript, hemos creado este gráfico de red bastante potente e interactivo.
El código completo es el siguiente, compruébalo:
<html> <head> <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script> <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-graph.min.js"></script> <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script> <style type="text/css"> html, body, #container width: 100%; height: 100%; margin: 0; padding: 0; </style> </head> <body> <div id="container"></div> <script> anychart.onDocumentReady(function () anychart.data.loadJsonFile("https://static.anychart.com/git-storage/word-press/data/network-graph-tutorial/data.json", function (data) // create a chart from the loaded data var chart = anychart.graph(data); // set the title chart.title("Network Graph showing the battles in Game of Thrones"); // draw the chart chart.container("container").draw(); ); ); </script> </body> </html>
Personalización de la apariencia del gráfico de red
Por impresionante que sea nuestra visualización actualmente, podemos mejorarla. Mucho mejor. Todas las bibliotecas de gráficos JS decentes le permiten personalizar los gráficos que crea utilizando su API.
Hacer uso de estas personalizaciones para contar mejor su historia de datos es una habilidad fundamental como desarrollador de visualización de datos.
Algunas de estas personalizaciones son estéticas, como cambiar el tamaño o el color de un elemento, y algunas funcionales, como cambiar la información sobre herramientas.
A continuación, mostraré algunas de las técnicas de personalización disponibles para los gráficos de red.
Los gráficos de red se dibujan utilizando un algoritmo que intenta de forma iterativa mejorar su diseño. Con cada iteración, el algoritmo optimiza un paso más de acuerdo con una métrica de error.
Esto sugerirÃa que cuantas más iteraciones, mejor. Sin embargo, a veces la idea del algoritmo de un diseño optimizado y su idea (y la de su usuario) de un diseño optimizado pueden ser considerablemente diferentes.
Agregue el código a continuación y verá lo que sucederÃa si usara solo 10 iteraciones, el valor predeterminado es 500.
// set the iteration step chart.layout().iterationCount(10);
Bueno, fue solo una demostración rápida. Saltemos este cambio y veamos cómo hacer algo más interesante sobre nuestra visualización de gráficos de red JS.
Podemos personalizar el tamaño, el relleno y el trazo de cada nodo, asà como establecer diferentes reglas para cada estado. Por estado me refiero al nodo predeterminado, un nodo flotante o un nodo seleccionado.
Los colores en un gráfico de red de JavaScript se pueden configurar de la misma manera que establecerÃa un color CSS, y aquà usaremos código hexadecimal.
// set the size of nodes nodes.normal().height(30); nodes.hovered().height(45); nodes.selected().height(45); // set the fill of nodes nodes.normal().fill("#ffa000"); nodes.hovered().fill("white"); nodes.selected().fill("#ffa000"); // set the stroke of nodes nodes.normal().stroke(null); nodes.hovered().stroke("#333333", 3); nodes.selected().stroke("#333333", 3);
Personalmente, mi cambio estético favorito para un gráfico de red es reemplazar los Ãconos de los nodos con imágenes. Aquà podemos reemplazar las grandes casas de Westeros (nuestros nodos) con las imágenes.
Esto se puede hacer fácilmente agregando la ruta de archivo de la imagen al objeto de cada nodo en nuestro JSON. Por ejemplo:
{id: "Example", fill: { src: "example_url" } },
Ya hice este cambio y se puede encontrar el archivo actualizado aquÃ. Al usar este JSON con las imágenes incluidas, obtenemos el siguiente gráfico:
¿Cuán genial es eso? Es mucho más atractivo que antes.
Etiquetas de nodo
No todos conocemos los carteles de cada casa, y tener que pasar el cursor sobre cada nodo para ver a cuál pertenece puede ser bastante doloroso. Para evitar esto, podemos etiquetar cada nodo. Esto se hace fácilmente con el siguiente código:
// enable the labels of nodes chart.nodes().labels().enabled(true); // configure the labels of nodes chart.nodes().labels().format("%id"); chart.nodes().labels().fontSize(12); chart.nodes().labels().fontWeight(600);
Y esto resulta en:
Para su comodidad, aquà está el código completo de este gráfico de red JavaScript interactivo (final de este tutorial) que visualiza datos sobre las batallas de Juego de Tronos:
<html> <head> <script src = "https://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"> </script> <script src = "https: / /cdn.anychart.com/releases/8.8.0/js/anychart-graph.min.js "> </script> <script src =" https://cdn.anychart.com/releases/8.8.0/js /anychart-data-adapter.min.js "> </script> <style type =" text / css "> html, body, #container { width: 100%; altura: 100%; margen: 0; acolchado: 0; } </style> </head> <body> <div id = "container"> </div> <script> anychart.onDocumentReady (function () { anychart.data.loadJsonFile ("https://static.anychart.com/git-storage/word-press/data/network-graph-tutorial/data_images.json", función (datos) { // crea un gráfico a partir de los datos cargados var chart = anychart.graph (data); // establece el tÃtulo chart.title ("Gráfico de red que muestra las batallas en Game of Thrones"); // acceder a los nodos var nodes = chart.nodes (); // establece el tamaño de los nodos nodes.normal (). height (30); nodos.hovered (). altura (45); nodos.seleccionado (). altura (45); // establece el trazo de los nodos nodes.normal (). stroke (null); nodos.hovered (). trazo ("# 333333", 3); node.selected (). stroke ("# 333333", 3); // habilita las etiquetas de los nodos chart.nodes (). labels (). enabled (true); // configurar las etiquetas de los nodos chart.nodes (). labels (). format ("{% id}"); chart.nodes (). labels (). fontSize (12); chart.nodes (). etiquetas (). fontWeight (600); // dibuja el gráfico chart.container ("contenedor"). draw (); }); }); </script> </body> </html>
En el tutorial, he mostrado lo rápido y fácil que es poner en marcha un gráfico de red JS y cómo con un poquito más de esfuerzo podrÃamos dar vida a nuestro gráfico con algunos ajustes de elección.
Honestamente, hay muchos más cambios que podrÃas hacer. Visita el galerÃa de gráficos de red para obtener más inspiración, asà como ver este extenso documentación de gráficos de red y mira a tu alrededor en AnyChart Docs para obtener ideas sobre lo que podrÃa cambiar para mejorar aún más este gráfico y cómo implementarlo.
Gracias por leer este artÃculo.
Añadir comentario