Logo UOC

Bubble

Una visualización para datos multidimensionales categóricos.
PID_00233252
Autor: Álex GonzálezCoordinación: Julià Minguillón

Introducción

También conocida como Circle Packing, se trata de una visualización jerárquica, bastante similar en planteamiento al treemap. En este caso, se muestra también la jerarquía de subconjuntos de un conjunto de datos hasta el nivel requerido. El área de cada subconjunto se representa como un círculo, lo que conlleva que se generen «espacios vacíos» y se aproveche menos el área total de la visualización; pero visualmente se comprenden mejor las diferencias de áreas entre los diversos subconjuntos.

Este ejemplo, de Mike Bostock, muestra el primer nivel de la jerarquía de clases del framework de visualización Flare. El color de los círculos indica el tipo de la clase, mientras que el tamaño es el número de líneas de código que componen la clase.

Ejemplo: Participantes en la PEC 0 - 2015/2

La siguiente visualización muestra cómo usar Bubble para visualizar un conjunto de datos categóricos; en este caso se trata de datos provenientes de una encuesta realizada a los estudiantes del máster de Business Intelligence de la UOC, contestada por ciento cuarenta personas. Los datos han sido procesados para eliminar valores perdidos, y agrupados para reducir el número de categorías con muchos valores posibles (bajo «Otros»).

Los atributos de los cuales se dispone para cada participante en la encuesta son los siguientes:

Se ha generado la jerarquía dividiendo el dataset por el atributo «sector», y luego por el atributo «perfil», con lo que generamos un árbol de dos niveles, adecuado para mostrar con la visualización.

Funcionamiento

El círculo general representa todo el dataset; en este caso se ha usado un color diferente del fondo para resaltarlo. En su interior, cada uno de los círculos intermedios corresponde a los participantes en el curso pertenecientes a cada uno de los sectores (ocho en total), con un tamaño proporcional al número de participantes, mostrado entre paréntesis para cada valor posible. A su vez, cada uno de estos círculos se subdivide de acuerdo con los distintos perfiles de los asistentes, dentro de ese sector, por lo que el número de subcírculos puede ser diferente en cada caso.

Seleccionando mediante el puntero alguno de los círculos se realiza un zoom que muestra los valores que adopta la segunda variable en la jerarquía para ese subconjunto y el número de participantes que comprende para cada valor. Al volver a hacer clic, se vuelve al nivel anterior de zoom.

Análisis mediante la visualización

Este tipo de visualización solo permite hacerse una idea de la distribución de los valores de cada variable en relación con las variables de los niveles superiores. Así, en el ejemplo se puede observar rápidamente que la mayoría de los participantes del curso son de los sectores tecnológico y financiero. En el primer caso (tecnológico), la mayoría de los perfiles son analista/programador y directivo, con unas proporciones más acusadas que en el segundo (financiero).

Limitaciones

Como puede observarse, el aprovechamiento del espacio de visualización no es ni mucho menos tan alto como en el caso del treemap. Esto limita su uso, ya que en espacios de visualización pequeños puede resultar poco claro al quedar reducido demasiado su tamaño.

Otra de las grandes limitaciones de este layout es la dificultad de incrustar texto con una mínima longitud en los elementos, más aún cuando los elementos son de tamaño reducido por su volumen relativo. Se suele resolver utilizando tooltips y/o leyendas textuales dinámicas que completan la información del elemento fuera del gráfico, lo cual obliga a interactuar con el gráfico para obtener los valores.

Finalmente, la visualización es estática en el sentido de que no permite la reordenación de los círculos ni de las variables que componen la jerarquía, por lo que la exploración de datos es limitada.

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 la librería d3.v4.min.js (v4, descargable también desde D3.js), la cual debe estar en el mismo directorio de trabajo que la página web mencionada, en un subdirectorio llamado js.

El fichero JSON por visualizar debe contener un elemento «raíz» con una propiedad «name» y una lista de elementos asociados «children».

{"name":"general","children":[...]}
«»

Dentro de esa lista irán elementos tambien compuestos por una propiedad «name» y una lista de «children». Este nivel de «hijos» del nivel «raíz» corresponde en este caso a los sectores del conjunto de datos.

{"name":"<un valor de la variable Sector>","children":[...]}

Cada uno de estos elementos por sector contiene, a su vez, un campo «children» con un conjunto de elementos definidos por un campo «name» y un campo «value». Estos serían, en este caso, los elementos «hoja» o finales de la jerarquía mostrada, y se corresponden a los perfiles del conjunto de datos.

{"name":"<un valor de la variable Perfil>","value":12}

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 bubble_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

Se propone modificar la visualización mostrada como ejemplo, cambiando las variables que la componen, y aumentando el número de niveles mostrados de la jerarquía de datos, comparando los resultados obtenidos entre diferentes ordenaciones de las variables usadas para crear la visualización.

La mayor dificultad está en generar el fichero JSON a partir del conjunto de datos original, debido a que hay un elevado nivel de redundancia, al tener que especificar en cada nivel los posibles valores de la variable en cuestión.

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.