Treemap
Una visualització per a dades multidimensionals categòriques.
PID_00233252
Autor: Álex GonzálezCoordinació:
Julià Minguillón
El mapa d'arbre és una visualització purament jeràrquica. Mostra la superfície relativa (com un rectangle) que ocupa un conjunt de dades d'acord amb una primera variable, els seus subconjunts d'acord amb una segona, etc., i així fins al nivell desitjat. La superfície de cada subconjunt i de cada subconjunt dins d'aquest està en relació directa amb la freqüència relativa del valor de l'atribut que s'hagi indicat. En estar definides les àrees com a rectangles, no hi ha espais buits (com sí ocorre en el cas de la visualització de tipus Bubble) i el resultat és al seu torn un rectangle, per la qual cosa l'espai de la visualització «s'aprofita» completament.
La visualització següent mostra com usar un mapa d'arbre per a visualitzar un conjunt de dades categòric; en aquest cas es tracta de dades provinents d'una enquesta feta als estudiants del màster de Business intelligence de la UOC, contestada per cent quaranta persones. Les dades han estat processades per eliminar valors perduts i agrupades per reduir el nombre de categories amb molts valors possibles (dins «Altres»).
Els atributs de què es disposa per a cada participant en l'enquesta són els següents:
S'ha generat la jerarquia dividint el dataset per l'atribut Perfil i després per l'atribut Sector, amb la qual cosa s'ha creat un arbre (o partició de l'espai) de dos nivells, adequat per a ser mostrat amb la visualització. Cadascun dels rectangles del primer nivell utilitza un color diferent (sis en total, com a valors possibles de la variable Perfil), per mostrar la jerarquia.
Per a cada valor de la columna «Perfil» del fitxer de dades, es defineix una àrea que en aquest cas es distingeix de la resta pel color. Dins de la població de cada perfil se subdivideix l'àrea en els diferents valors per a aquesta població segons la columna «Sector», generant de nou diversos rectangles. La proporció entre l'àrea de cada rectangle i l'àrea total del seu sector és igual a la relació entre el nombre de persones que pertanyen a aquest perfil i el nombre total de persones pertanyents al sector.
El text inclòs en cada rectangle és el nombre de persones que pertanyen a aquest sector per a un perfil en particular. Si es manté el punter damunt d'un rectangle, apareix un indicador de funció que indica el perfil al qual pertany el rectangle en qüestió.
En aquest cas, la visualització no ofereix cap possibilitat addicional d'interactuar-hi: és una representació estàtica del conjunt de dades.
Un mapa d'arbre és una representació gràfica d'una taula de contingència entre dues o més variables, encara que la seva interpretació pot ser complexa en el cas de tres o més variables.
En el cas de dues variables, usant una codificació per colors de la primera (com en l'exemple mostrat), és possible observar si la distribució de la primera variable és més o menys uniforme o bé si hi ha alguns valors que predominen sobre uns altres. Per a cada rectangle definit per la primera variable, es pot fer la mateixa anàlisi sobre la segona. Finalment, comparant entre rectangles, es pot observar si hi ha alguna relació entre ambdues variables, de manera que alguns dels valors de la segona variable mostrin un patró en funció d'alguns valors de la primera variable.
En dades amb molta dispersió de valors, els valors petits es mostren però moltes vegades són inidentificables a la vista. L'ús de valors/etiquetes és complex per l'espai variable del contenidor; això es pot solucionar usant indicadors de funció i/o llegendes, depenent de la grandària de l'arbre de la jerarquia.
Igualment, si es mostren tres o més nivells en un mapa d'arbre, la codificació de colors necessària es torna més complexa i pot dificultar la interpretació de la visualització.
Aquesta visualització consisteix en una pàgina HTML (enllaç) que incorpora codi D3.js ( enllaç) i pot ser utilitzada com a base per a reproduir-la usant qualsevol altre conjunt de dades.
És necessari disposar de la llibreria d3.min.js (v4, descarregable també des de D3.js), que ha d'estar en el directori /js/ dins del directori de treball de la pàgina web esmentada.
El fitxer CSV per visualitzar ha d'anar separat per comes «,» i utilitzar una codificació UTF-8. El fitxer usat en aquest exemple pot descarregar-se des d'aquest enllaç. Es recomana utilitzar LibreOffice per a manipular-lo.
El fitxer treemap_base.js, que conté el codi D3.js, pot ser modificat per reutilitzar la visualització amb altres fitxers CSV, de la manera següent:
d3.csv("./data/PAC0_20152.csv", function(error, csv) {
és la que carrega el fitxer CSV i genera la visualització.
var treemap = d3.treemap()
.size([width, height])
.padding(1)
.round(true);
instancien el layout indicant-li l'ample i alt de la zona de visualització, un paràmetre de farciment
per a separar lleugerament els elements i amb el paràmetre round activat per arrodonir les coordenades
de cada rectangle.
var niats = 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: niats}, function(d) { return d.values; })
.sum(function(d) { return d.value; })
.sort(function(a, b) { return b.value - a.value; });
generen l'estructura de dades necessària per a calcular el layout a partir del fitxer CSV. Agrupen els
valors en dos nivells usant les columnes «Perfil» i «Sector» del fitxer de dades.
treemap(root);executa el layout sobre l'estructura de dades preparada a partir del CSV i genera els atributs necessaris per a generar la visualització.
Es proposa invertir l'ordre de les variables usades per crear la visualització, comparant ambdues visualitzacions, i determinar quina reflecteix millor la possible relació entre les dues variables.
Com a generalització, es proposa afegir una tercera variable comparant el resultat obtingut en funció de l'ordenació de les tres variables en la jerarquia. Noti's que el nombre d'ordenacions possibles creix exponencialment amb el nombre N de variables (es tracta d'un factorial, N!). ¿És possible establir un criteri en funció de la naturalesa de cada variable per a seleccionar a priori la millor visualització possible?
Materials creats per Álex González (outliers) i Julià Minguillón, publicats amb una llicència Creative Commons CC-BY-SA 3.0, Universitat Oberta de Catalunya (FUOC), 2016.
