Analítica y visualización de datos con D3.js (Parte I)

Para nadie es un secreto que últimamente dado el crecimiento exponencial y el éxito de las startups, el mundo empresarial ha tomado un rumbo más moderno e innovador en cuanto a las tecnologías a implementar en sus proyectos y estructuras internas.

JavaScript, si se quiere, es el lenguaje/plataforma que tiene ya algún tiempo revolucionando nuestro enfoque de la web. Estos nuevos enfoques y paradigmas un poco más arriesgados han encontrado su lugar en el software empresarial

Ya lo decía Jim Cantin, presidente de Leveraging Technology.

“JavaScript has a lot of energy around it right now. It has evolved to the point where you’re now seeing JavaScript in the enterprise. Node.js was what we first started playing with, because it was one of the runtimes available out-of-the-box on Bluemix and paired well with our focus on back-end software”.

Así, hemos visto cómo empresas se han arriesgado a migrar a tecnologías como Node.JS compitiendo inclusive con ecosistemas robustos como Java. JavaScript ha llegado el punto de poder coexistir con stacks tecnológicos empresariales en lugar de reemplazarlos.

En este artículo queremos centrarnos en un rubro muy importante en cualquier empresa : La visualización y analítica de datos.

Visualización de datos implementando teoría de grafos

La teoría de grafos se ha convertido en un fuerte referente en cuanto a visualización y analítica de datos se refiere. Inclusive en el mundo del modelado de datos tenemos soluciones como Neo4J para implementar bases de datos basados principalmente en la relación de sus nodos

En las siguientes líneas nos enfocaremos en detallar técnicamente como representar estructuras de datos enlazada implementando teoría de grafos y javascript

Visualización de datos con D3.js

Una de las librerías/herramientas más completas que conozco para este tema es sin duda D3.js. Ofrece un conjunto de herramientas que nos permiten desarrollar increíbles interfaces de visualización de data, a pequeña y gran escala.

Su página oficial la define como: Una librería javascript para manipular documentos basados en datos. D3 nos ayuda a traer data a la vida usando HTML, SVG, y CSS.

Sólo basta ver la gran cantidad de ejemplos  para darse cuenta de las capacidades inmensas de esta herramienta. ¿Su problema? La curva de aprendizaje y la extensibilidad de sus herramientas. Es tan complejo que inclusive existen plataformas  de entrenamiento para su uso.

A continuación construiremos nuestro propio grafo usando una estructura de datos sencilla

Construyendo nuestro grafo

Grafo hamiltoniano en construcción con D3.js
Grafo hamiltoniano en construcción con D3.js

Formalmente, un grafo es un conjunto de objetos llamados vértices o nodos unidos por enlaces llamados aristas o arcos, que permiten representar relaciones binarias entre elementos de un conjunto.

En nuestro caso representaremos como vértices entidades que se relacionan entre sí.

Ejemplo

Supongamos que queremos generar un grafo, que represente las relaciones de un grupo de música. Es decir, los integrantes (músicos) de un grupo en específico y a su vez, los grupos donde estos mismos músicos participan. Podríamos representar sus relaciones de la siguiente forma:

captura-de-pantalla-de-2017-02-05-224238
Grafo representando las relaciones de los músicos de Radiohead  (Ver estructura de datos)

Ahora bien, para generar un grafo como el anterior, debemos antes que nada, definir nuestra estructura de datos. Con D3.js, la estructura debe estar en formato JSON y debe seguir el siguiente formato

captura-de-pantalla-de-2017-02-06-012121

Las propiedades source y target que están en el JSON, se refieren a la dirección de los enlaces que asocian a los nodos definidos en el array node. El valor de los mismos es el id de los nodos en el array.

El atributo value de los links es la ponderación de cada enlace, en nuestro caso representará el ancho de la línea. El atributo group  de los nodos es para categorizarlos.

Esa estructura de datos nos generaría un grafo más o menos así

Captura de pantalla de 2017-02-06 00:08:53.png

Ahora bien, como dibujamos este grafo con D3.js? Lo primero que debemos hacer es incluir la librería en nuestro proyecto. Podemos hacerlo simplmente cargando el script en el head del HTML, o usando nuestro gestor de dependencias preferido.

<script src="https://d3js.org/d3.v4.min.js">script>

Debemos además, agregar un elemento SVG en nuestro template HTML

<svg width="960" height="600">svg>

Ahora, veamos el código javascript que necesitamos para generar un grafo sencillo:

captura-de-pantalla-de-2017-02-06-011515

Expliquemos un poco lo que se hace allí

Definiendo SVG y cargando data

  1. Definimos una variable svg que llama al la función “select” de d3.js, esta función no es más que un selector de elementos, podríamos pasar allí un id o una clase que identifica a nuestro elemento svg, parecido al selector $(“svg”) de jQuery.
  2. Definimos “colores categóricos”, donde cada grupo definido en el json será un color diferente, en una escala del 1 al 20 (ver documentación). Almacenamos la función en la variable color
  3. Definimos una variable con nuestros datos, en nuestro caso la del ejemplo, estos datos pudiese venir desde un servicio o un archivo .json externo

Generación de aristas

  1. Definimos los enlaces en la variable link, allí hacemos un append de un elemento “g”. Un elemento “g”, en SVG es un contenedor o grupo de otros elementos gráficos, tales como líneas, círculos y formas. En nuestro caso los enlaces estarán conformados por líneas.  A este grupo de elementos se le definen varias cosas mediante diferentes métodos
    • attr() : Agregamos una clase “links” a cada elemento
    • .selectAll() : Seleccionamos todos los elementos tipo línea (aún no tenemos ninguno, lo agregaremos más adelante, pero es una forma de indicar que seleccionamos todos los elementos dentro del SVG)
    • data()Le pasamos como parámetro al método data el array de links, que representarán cada línea dentro del SVG
    • enter().append(“line”)Añadimos al SVG una línea por elemento, definido en data.
    • attr(“stroke-width”) : Definimos el ancho de la línea que dibujaremos, en este caso, es generado aleatoriamente aplicando una función matemática al valor del elemento (d)

Generación de nodos

  1.  De igual forma que las aristas, hacemos un append de un elemento g, donde :
    • attr() : Agregamos una clase “nodes” a cada elemento
    • selectAll() :  Hacemos la selección de los elementos que crearemos, en este caso círculos
    • data() : Pasamos los datos como parámetro al método data
    • enter().append(“circle”) Hacemos append al SVG de los círculos por cada elemento de la data
    • attr(“r”,5) : Fijamos el radio de esos mismos círculos, en este caso a 5
    • attr(“fill”) : Rellenamos cada círculo con un color según el grupo que definimos. Cada color está ya definido en la variable color que definimos al principio.

Conclusiones

Como podemos ver el proceso es bastante detallado y estamos prácticamente generando un SVG a mano. Esto tiene una ventaja y una desventaja.

  1. La curva de aprendizaje es increíblemente alta, porque la generación de gráficos es realizada paso por paso, detalle por detalle
  2. Tenemos control casi absoluto sobre lo que se renderiza y podemos implementar funcionalidades a nuestro gusto

En la segunda parte de este artículo explicaremos un poco más sobre el uso de esta librería y veremos otros features como eventos de nuestros gráficos. Conoceremos Greuler, una librería basada en D3.JS para la construcción, un poco más sencilla de grafos.

D3.JS es una librería de la cual pueden partir muchas otros proyectos interesantes, y con el que por supuesto, podemos generar información valiosa para los usuarios de nuestras aplicaciones

Enlaces de interés

  • Construyendo Forced Directed Graphs :https://bl.ocks.org/mbostock/4062045
  • Construyendo Grafos Hamiltonianos : http://bl.ocks.org/christophermanning/1703449
  • Ejemplos populares con D3.JS https://bl.ocks.org/
  • Greuler https://maurizzzio.github.io/greuler/#/
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s