Logo UOC

Chord Chart

Una visualización para datos de variables categóricas.
PID_00233252
Autor: Álex GonzálezCoordinación: Julià Minguillón

Introducción

Es un tipo de visualización orientado a mostrar las relaciones entre varias entidades o valores de dos variables definidas sobre el mismo conjunto de valores posibles. En realidad, el funcionamiento es bastante similar al caso de un Force-Directed Graph, pero en este caso los nodos no se mueven libremente, sino que se fijan en un perímetro o corona circular dentro del cual se muestran como cuerdas o arcos las relaciones entre cada pareja de valores posibles. Las cuerdas que unen a las entidades pueden mostrar la relación bidireccional entre estas. Por ejemplo, pueden tener una anchura relativa en el extremo de una entidad origen y otra en el extremo de la entidad destino, mostrando dos valores al mismo tiempo (combinados) para una misma relación, en función de la dirección de esta.

Este ejemplo, de Mike Bostock, muestra la frecuencia de viajes entre los diferentes barrios de San Francisco, usando los servicios de Uber. Cada área de la corona circular es uno de los barrios de la ciudad y entre ellas se trazan «cuerdas» que indican el volumen general de viajes entre cada pareja de barrios, así como el detalle del volumen de los viajes con origen o destino en cada barrio.

Ejemplo: rutas aéreas entre aeropuertos europeos

La siguiente visualización muestra cómo usar un diagrama Chord para visualizar un conjunto de datos de relaciones. En este caso se consideran todos los viajes para un periodo de tiempo entre dieciséis aeropuertos europeos. Los datos se han obtenido de OpenFlights y se ha filtrado el dataset de viajes para obtener los del conjunto especificado de aeropuertos, con el objetivo de mejorar la visibilidad.

Funcionamiento

Para cada ciudad/aeropuerto se muestra un segmento en la corona circular proporcional al tamaño de las rutas, ordenados en sentido horario. Al pasar el ratón por encima de cada segmento se muestra el número total de rutas con origen en el aeropuerto de esa ciudad en cuestión y se destacan las rutas con destino al resto de los aeropuertos, ordenadas también por número de rutas desde el origen indicado por el segmento. Cada línea o «cuerda» muestra el volumen de rutas aéreas entre los dos aeropuertos que une. La anchura en cada uno de sus extremos define este volumen en uno de los dos sentidos. Si se posiciona el ratón encima de una de las cuerdas, se muestra el número de rutas en ambos sentidos entre los dos aeropuertos que une.

Análisis mediante la visualización

Dado que un diagrama Chord solo muestra las posibles combinaciones de valores entre dos variables definidas sobre el mismo dominio (es decir, el mismo conjunto de valores posibles), se trata de una representación gráfica de una matriz. Puede usarse para detectar si la distribución de valores es uniforme (los segmentos y arcos son de tamaños parecidos) o si, por el contrario, existen valores y combinaciones de valores que predominan, o bien si hay combinaciones ausentes.

Una posibilidad interesante es utilizar el diagrama Chord para mostrar los valores de una tercera variable que depende de la combinación de las otras dos definidas sobre el mismo dominio, mediante el uso del color del arco (determinado por la tercera variable). Si se usa una escala de colores adecuada (p. ej. un degradado), se puede mostrar la asociación entre las dos variables que determinan los segmentos y la variable que determina el color de cada arco.

Limitaciones

El número de entidades (valores mostrados en la corona circular) no debe ser demasiado grande, para evitar problemas de visibilidad de los datos y/o de usabilidad al complicar el posicionamiento del raton sobre cada uno de los elementos, ya que el número de combinaciones posibles crece con el cuadrado del número de elementos.

Por otra parte, la anchura y el color de cada cuerda se determinan de acuerdo con un criterio preestablecido, por lo que deberán decidirse de antemano. En el caso de querer mostrar relaciones asimétricas, esto complica la visualización si no es posible crear una matriz simétrica que resuma la información, o bien decidir qué mitad de la matriz asimétrica se desea visualizar. Igualmente, el uso del color de cada arco puede ser confuso si no se combinan de cierta manera los colores de los segmentos unidos por el arco en cuestión.

Detalles técnicos (how to?)

Esta visualización consiste en una página HTML (enlace) que incorpora código D3.js ( enlace) y puede ser utilizada como base para reproducirla usando cualquier otro conjunto de datos.

Es necesario disponer de las librerías d3.v4.min.js (v4, descargable también desde D3.js), d3-queue.min.js (enlace) y d3-chord.v0.0.min.js (D3 Chord Plugin), las cuales deben estar en el mismo directorio de trabajo que la página web mencionada, en el subdirectorio llamado js.

El fichero JSON que visualizar debe contener una lista de valores para cada entidad en el que se especifica el valor de la relación de esa entidad con todas las demás. El fichero usado en este ejemplo puede descargarse desde este enlace. Se recomienda utilizar alguna herramienta de edición de ficheros JSON (por ejemplo esta) para su manipulación.

El fichero chordchart_base.js que contiene el código D3.js puede ser modificado para reutilizar la visualización con otros ficheros JSON, de la manera siguiente:

Ejercicio

Modificar el ejemplo propuesto para mostrar solamente los seis u ocho aeropuertos con más rutas entre ellos.

Cambiar el esquema de colores usado para representar los arcos, de forma que la intensidad del color sea proporcional al tamaño del arco o alguna otra variable, destacando así las combinaciones más frecuentes con respecto a dicha variable.

Referencias

Materiales creados por Álex González (outliers) y Julià Minguillón, publicados bajo una licencia Creative Commons CC-BY-SA 3.0, Universitat Oberta de Catalunya (FUOC), 2016.