Treemap
Una visualización para datos multidimensionales categóricos.
PID_00233252
Autor: Álex GonzálezCoordinación: Julià
Minguillón
El treemap es una visualización puramente jerárquica. Muestra la superficie relativa (como un rectángulo) que ocupa un conjunto de datos de acuerdo con una primera variable, sus subconjuntos de acuerdo con una segunda, etc., así hasta el nivel deseado. La superficie de cada subconjunto y de cada subconjunto dentro de este va en relación directa con la frecuencia relativa del valor del atributo que se haya indicado. Al estar definidas las áreas como rectángulos, no hay espacios vacíos (como sí ocurre en el caso de la visualización de tipo Bubble) y el resultado es a su vez un rectángulo, por lo que el espacio de la visualización se «aprovecha» completamente.
La siguiente visualización muestra cómo usar treemap para visualizar un conjunto de datos categórico; 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 «Perfil», y luego por el atributo «Sector», con lo que se ha creado un árbol (o partición del espacio) de dos niveles, adecuado para ser mostrado con la visualización. Cada uno de los rectángulos del primer nivel utiliza un color diferente (seis en total, como valores posibles de la variable «Perfil»), para mostrar la jerarquía.
Para cada valor de la columna «Perfil» del fichero de datos, se define un área que se distingue del resto por el color en este caso. Dentro de la población de cada perfil se subdivide el área en los diferentes valores para esa población según la columna «Sector», generando de nuevo varios rectángulos. La proporción entre el área de cada rectángulos y el área total de su sector es igual a la relación entre el número de personas que pertenecen a ese perfil y el número total de personas pertenecientes al sector.
El texto incluido en cada rectángulo es el número de personas que pertenencen a dicho sector para un perfil en particular. Si se mantiene el puntero encima de un rectángulo, aparece un tooltip que indica el perfil al cual pertenece el rectángulo en cuestión.
En este caso, la visualización no ofrece ninguna posibilidad adicional de interactuar con esta: es una representación estática del conjunto de datos.
Un treemap es una representación gráfica de una tabla de contingencia entre dos o más variables, aunque su interpretación puede ser compleja en el caso de tres o más variables.
En el caso de dos variables, usando una codificación por colores de la primera (como en el ejemplo mostrado), es posible observar si la distribución de la primera variable es más o menos uniforme, o bien existen algunos valores que predominan sobre otros. Para cada rectángulo definido por la primera variable, se puede hacer el mismo análisis sobre la segunda. Finalmente, comparando entre rectángulos, se puede observar si existe alguna relación entre ambas variables, de forma que algunos de los valores de la segunda variable muestren un patrón en función de algunos valores de la primera variable.
En datos con mucha dispersión de valores, los valores pequeños se muestran, pero mucha veces resultan inidentificables a la vista. El uso de valores/etiquetas es complejo por el espacio variable del contenedor; esto se puede solucionar usando tooltips y/o leyendas, dependiendo del tamaño del árbol de la jerarquía.
Igualmente, si se muestran tres o más niveles en un treemap, la codificación de colores necesaria se vuelve más compleja y puede dificultar la interpretación de la visualización.
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.min.js (v4, descargable también desde D3.js), que debe estar en el directorio /js/ dentro del directorio de trabajo de la página web mencionada.
El fichero CSV que visualizar debe ir separado por comas «,» y utilizar una codificación UTF-8. El fichero usado en este ejemplo puede descargarse desde este enlace. Se recomienda utilizar LibreOffice para su manipulación.
El fichero treemap_base.js que contiene el código D3.js puede ser modificado para reutilizar la visualización con otros ficheros CSV, de la manera siguiente:
d3.csv("./data/PEC0_20152.csv", function(error, csv) {
es la que carga el fichero CSV y genera la visualización.
var treemap = d3.treemap()
.size([width, height])
.padding(1)
.round(true);
instancian el layout indicándole el ancho y alto de la zona de visualización, un parámetro de padding para separar ligeramente los elementos y con el parámetro round activado para redondear las coordenadas de cada
rectángulo.
var anidados = d3.nest()
.key(function(d){return d.Perfil;})
.key(function(d){return d.Sector;})
.rollup(function(leaves) { return leaves.length; })
.entries(data);
var root = d3.hierarchy({values: anidados}, function(d) { return d.values; })
.sum(function(d) { return d.value; })
.sort(function(a, b) { return b.value - a.value; });
generan la estructura de datos necesaria para calcular el layout a partir del fichero CSV. Agrupan los valores
en dos niveles usando las columnas «Perfil» y «Sector» del fichero de datos.
treemap(root);ejecuta el layout sobre la estructura de datos preparada a partir del CSV y genera los atributos necesarios para generar la visualización.
Se propone invertir el orden de las variables usadas para crear la visualización, comparando ambas visualizaciones y determinar cuál refleja mejor la posible relación entre las dos variables.
Como generalización, se propone añadir una tercera variable, comparando el resultado obtenido en función de la ordenación de las tres variables en la jerarquía. Nótese que el número de ordenaciones posibles crece exponencialmente con el número N de variables (se trata de un factorial, N!). ¿Es posible establecer un criterio en función de la naturaleza de cada variable para seleccionar a priori la mejor visualización posible?
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.
