6. D3.js: Force Layout y Transiciones

Herramientas de Visualización: D3.js, Force Layout, Transiciones, Movimiento e Interacción

• D3 incorpora multitud de gráficas diferentes, y cada una necesita parámetros específicos adaptados a sus particularidades.
• Es importante dominar los principios básicos de D3 que son comunes a todas las gráficas.
• Se abordará la visualización Force-Directed Graph o Force Layout, para representar relaciones entre entidades mediante un grafo.
• Los gráficos Force Layout son utilizados en redes sociales para reflejar relaciones entre usuarios.
• Se empezará a dar movimiento a los gráficos, ya que D3 es una de las librerías de visualización más potentes.
• Se cubrirá la actualización de datos reaccionando a eventos y el uso de transiciones y movimiento para dinamizar las visualizaciones.
• También se explorará la exportación de visualizaciones.

Force Layout

• Se utilizará uno de los datasets del libro "Getting started with D3" de M. Dewar (2012), disponible en Github.
• Para generar el gráfico, se partirá de un archivo .json que puede ser cargado en Brackets.
• El archivo .json contiene los nodos (paradas de metro) y las conexiones entre paradas.
• Se definen los círculos o puntos del gráfico, identificando los círculos de forma similar a cuando se dibuja un histograma.
• Se definen las líneas entre los puntos.
• Se define el algoritmo a utilizar, en este caso layout.force, que utiliza los atributos nodes y links.
• Se adaptan los valores del dataset a los requerimientos del algoritmo con la función force.on.
• Se proporciona la habilidad de arrastrar los nodos por la pantalla con la línea de código node.call(force.drag).

Actualización de Gráficos con Base en Eventos

• Todas las visualizaciones tienen sus eventos.
• Con D3 es fácil generar interacción en las visualizaciones.
• El movimiento es importante en las visualizaciones, transmitiendo mensajes e ideas.
• Se utilizará como base el código de la gráfica bar chart con escala ordinal del tema anterior.
• Los pasos a seguir son:
  • Crear un botón que genere un evento para actualizar la gráfica.
  • Crear un nuevo dataset y actualizar la gráfica con él.
  • Actualizar las dimensiones del gráfico.
  • Hacer efectiva las actualizaciones.
• Todo elemento en D3.js puede generar eventos.
• Para crear un botón, se genera texto y se le asigna un pop-up como resultado del evento.
• Se actualizan los valores del gráfico y se adaptan altura y anchura al nuevo dataset.
• Se actualiza el texto del gráfico con el nuevo dataset.
• Se elimina el botón después de pulsarlo.

Transiciones y Movimiento

• Las transiciones dan vida a los gráficos y se pueden hacer con una simple línea de código en D3.js: transition().
• Se controla la duración de las transiciones utilizando duration(milisegundos).
• Se aplica la transición al texto de las barras.
• Se modifica la función ease() para regular la transición y hacerla lineal.
• Se retrasa la animación con la función delay(time_miliseconds).

Añadiendo Interacción a los Gráficos

• Los modos de interaccionar con un gráfico son diversos.
• Se puede hacer que reaccione el valor al pulsar una barra.
• Se puede mostrar el valor de la barra en una ventana emergente.
• Se puede cambiar el color de las barras al pasar el ratón por encima, utilizando los eventos mouseover y mouseout.

Exportando el Resultado a PDF, Bitmaps y SVG

• Se explora la utilidad de exportar el gráfico a otros formatos desde el navegador.
• La primera opción es la captura de pantalla (Print Screen en PC y Command + Shift + 3 en MAC), generando un archivo Bitmap o PNG.
• Se puede imprimir en PDF seleccionando dicha opción en la pantalla de impresión.
• La opción más interesante es trabajar con SVG para modificar y escalar la imagen en Photoshop.
• Para ello, se inspecciona el elemento en el navegador y se selecciona el código entre las etiquetas <svg>...</svg>.
• Se copia el código en un archivo nuevo con la extensión .svg, que se puede abrir con Acrobat Reader o Photoshop.

Aprende a usar D3.js para crear visualizaciones dinámicas. Se explica el Force Layout para representar relaciones entre entidades en un grafo. Se cubrirá la actualización de datos, transiciones y movimiento para dinamizar las visualizaciones.