Parallel Coordinates
Una visualización para datos multidimensionales numéricos.
PID_00233252
Autor: Álex GonzálezCoordinación:
Julià Minguillón
Este ejemplo, de Mike Bostock, muestra los precios medios en diferentes categorías para diferentes ciudades. Cada línea une los valores de cada ciudad para las diferentes dimensiones/ejes. Se puede observar la tendencia de la mayoría de los valores, pero teniendo en cuenta la ordenación de las variables, que determina las combinaciones generadas. Conceptualmente sería una especie de gráfico de radar "aplanado".
La siguiente visualización muestra cómo usar Parallel Coordinates para visualizar un conjunto de valores para una lista de entidades. En este caso los valores son las puntuaciones en cada prueba de las primeras clasificadas en la prueba de Heptatlon de las olimpiadas de los años 2012 y 2016.
Los atributos de los que se dispone para cada participante en la prueba de Heptatlon son los resultados en puntos obtenidos para cada una de las siguientes pruebas:
Cada una de las barras verticales que representa los valores que puede tomar una de las variables puede ser arrastrada y reordenada, de manera que es posible comparar cualquier pareja de variables.
Situando el cursor sobre una de las barras verticales también se muestra mediante un tooltip el texto que indica de qué variable se trata.
Por otra parte, situando el cursor encima de una línea que une los diferentes valores posibles se muestra un tooltip con un texto que identifica dicho elemento en el conjunto de los datos.
Finalmente, el selector inferior permite elegir el conjunto de datos que visualizar, en función de otra variable, en este caso el año.
Para cada pareja consecutiva de variables, la visualización muestra los cambios de valor, por lo que es posible detectar correlaciones en función de si todos los elementos del conjunto de datos muestran la misma tendencia de cambio.
La visualización también permite detectar valores extremos para cada una de las variables, y hacerse una idea de la distribución de cada variable en función de la densidad de líneas en una región o segmento.
Cuando se visualizan muchos elementos a la vez, es más fácil detectar tendencias y posibles correlaciones, pero es prácticamente imposible identificar elementos individuales, dado que se visualiza el conjunto de datos tal cual, sin agregados o resúmenes.
En el caso de visualizar variables categóricas, debería ser posible reordenar los valores de cada una de ellas para poder ver si existe relación entre sí, dada la falta de orden implícito en estas. En ese caso se recomienda usar la visualización Parallel Sets.
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), que debe estar en el mismo directorio de trabajo que la página web mencionada, en un subdirectorio llamado js.
El fichero .CSV a visualizar debe ir separado por comas "," y utilizar una codificación UTF-8. Los ficheros usados en este ejemplo pueden descargarse desde este enlace y este. Se recomienda utilizar LibreOffice para su manipulación.
El fichero parallelCoordinates_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:
var filename = "./data/heptatlon_"+selected_year+".csv";
d3.csv(filename, function(error, results) {
son las que cargan el fichero CSV seleccionado y se genera la visualización.
var x = d3.scalePoint();
x.range([50,svg.attr("width")-50]);
instancian el layout de los ejes indicándole el ancho de la zona de visualización.
x.domain(dimensions = d3.keys(results[0]).filter(function(d) {
return d != "Name" && (y[d] = d3.scaleLinear().domain(d3.extent(results,
function(p) { return +p[d]; })).range([svg.attr("height")-50, 50]));
}));
adapta el layout a los campos que no sean el campo de identificación e instancia cada escala del eje y para
cada columna.
foreground = g.append("g")
.attr("class", "foreground")
.selectAll("path")
.data(results)
.enter().append("path")
.attr("d", path);
dibujan una línea ("path") para cada conjunto de valores de un elemento del conjunto de datos.Se propone modificar la visualización mostrada como ejemplo, cambiando el conjunto de datos mostrado, así como usar diferentes subconjuntos de variables de este.
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), 2017.
