Visualization design: más que solo una tipología de visualizations
Espacio de visualizations
Diseñando con Data y Graphics
Tomaremos un enfoque más granular para crear visualizations
Cada elemento de dato se codifica mediante un graphical mark
Cómo dibujamos el mark depende de los attributes, o campos, del elemento de dato.
Un enfoque estructurado para la creación de graphics nos ayuda a entender el espacio de diseño
Enfoque Declarativo para el Diseño
Elige un mark
Para cada attribute: • Determina el type del attribute • Elige un visual channel • Elige un mapping: del data domain al visual range • … ¡dibújalo! • (hay algunas variaciones de este enfoque)
Graphical Marks, Visual Channels
Data: Attributes
Partiendo de los data, ¿cómo llegamos a los graphics?
Primero, necesitamos determinar el attribute de un elemento de dato.
Scales
Luego: elegimos un mapping del data domain al visual range. Una scale.
Distinguimos scales según los attributes de los data. El data domain o el visual range pueden ser categorical, ordinal, o quantitative.
Quantitative: Quantitative Linear Scale
El domain y el range son ambos quantitative. Primero consideramos una scale linear.
Preliminares matemáticos:
Asumamos que el data domain tiene un valor mínimo y máximo \[ d_{min} \rightarrow d_{max}\]
Asumamos que el data range tiene un valor mínimo y máximo \[ r_{min} \rightarrow r_{max}\]
Quantitative: Quantitative Linear Scale
Buscamos una función linear tal que: \[ f(d_{min}) = r_{min}\] y \[ f(d_{max}) = r_{max}\]
Quantitative: Quantitative Linear Scale
Proceso de dos pasos:
Normalizar los data en el domain: \[
\alpha(d) = \frac{d - d_{min}}{d_{max} - d_{min}}
\]
Interpolación linear en el range: \[
f(\alpha(d)) = (1 - \alpha(d)) . r_{min} + \alpha(d) . r_{max}
\]
Ejemplo de Linear Scale
Otras Quantitative Scales
Se pueden usar para diferentes funciones, ej. quadratic, square root, etc.
Nuestro data domain es quantitative, nuestro visual range es discrete - y en particular, ordered. \[ d_{min} \rightarrow d_{max} \\
R = [r_1, r_2, \dots, r_n]
\]
Supuesto común: el range está dividido uniformemente por el domain. \[ f(\alpha(d)) = r_i \text{ Donde } i = 1 + \lfloor n.\alpha_d \rfloor \]
Caso Especial: Binning Transformation
Ordinal: Quantitative Point Scale
Nuestro data domain es ordinal, nuestro visual range es quantitative. \[
D = [d_1, d_2, \dots, d_m] \text{ y } r_{min} \rightarrow r_{max}
\]
También es común introducir padding al inicio y al final.
\[
f(d_i) = r_{min} + (i-1).step
\]
Se usa para: bar marks, group transformations.
Ejemplo
Resumen: Una Receta para Crear Visualizations
Ingredientes: • Identificar los elementos de dato. • Seleccionar los data attributes. • Determinar un type para cada attribute. • Determinar un graphical mark para un elemento. • Seleccionar un visual channel para cada attribute. • Seleccionar una scale para cada channel.
• Elige un mapping: del data domain al visual range • … ¡dibújalo! • (hay algunas variaciones de este enfoque)
