Diseño y visualización de datos

Juan Morales
Introducción 03
Tufte vs Wurman 04
Cómo pensamos con la vista 09
Tipos de tareas y tipos de datos 12
¿Qué hace que una visualización sea buena? 15
Conceptos imprescindibles de estadística 19
Herramientas imprescindibles 22
Visualizar para comunicar 25
Visualizar para decidir 29
Visualizar para descubrir 32
Visualizar sobre mapas 35
Los mapas temáticos 41
Introducción El objetivo de la visualización de datos
no es crear imágenes bonitas. Debemos
crear puntos de vista nuevos desde lo
que comunicar, comprobar o descubrir
ideas más o menos complejas. Nuestra
labor como diseñadores es entender
quién lo usa y con qué fin.

Las buenas decisiones de diseño son

las que convierten a los datos en
información. Este curso te permitirá
saber cuáles son las buenas preguntas
que debes hacerte cuando te enfrentes
al diseño con datos. Herramientas,
ejemplos y ejercicios realizados por el
director del curso, Juan Morales.

Juan Morales, doctor

en visualización y
científico de datos

Juan Morales lleva más de una década

enfocado en el diseño con datos.
Ha participado en varios proyectos
internacionales y realizó su tesis con el
prestigioso Ben Scheniderman, pionero
de la visualización de datos y de la
interacción hombre máquina.

Actualmente trabaja en Graphext, una

de las mejores herramientas de
analítica del mundo.

03
CAPÍTULO 2

Tufte vs Wurman
Tufte, Wurman... y Aicher.
Tres maneras diferentes de
entender cómo convertimos los
datos en conocimiento.

A continuación encontrarás un
listado de recursos que te ayudarán
a profundizar más en la visión de
cada uno de ellos.

05
Edward Tufte

Beautiful Evidence (Highlights)

Edward Tufte discutió sus teorías visuales y de diseño
analítico en una conferencia para Intelligence Squared en
Londres. Puedes ver una parte de esa conferencia en este
enlace.

Chartjunk
Extractos de varios de sus libros donde habla de fallos
comunes a la hora de visualizar y cómo resolverlos.

Visual Explanations: images and quantities, evidence

and narrative
Tufte habla de cómo contar historias con datos de manera
visual. Incluye historias reales donde el diseño de datos se
convirtió en catástrofe (Challenger) o en heroicidad (John
Snow).

06
Richard Saul Wurman

TEDxEast
Richard Saul Wurman
Wurman involucra a la audiencia en una narración
inspiradora, provocativa y humorística diseñada para hacer
pensar al oyente. Su objetivo es aportar claridad a los
problemas complejos. Ha diseñado y publicado libros sobre
temas que van desde el fútbol hasta el cuidado de la salud y
guías de ciudades.

Information Architects
Richard Saul Wurman
El libro que dio nombre al campo de la Arquitectura de la
información. Es una colección de buenas referencias y
proyectos que presentan datos complejos de manera clara
y concisa.

07
Otl Aicher

The precise and modern design of Munich 1972

Design Focus
Acosado por la percepción de la Alemania nazi de antes de
la guerra, el diseño preciso y moderno de Otl Aicher ayudó a
renovar la imagen de Alemania en el mundo. Este video te
traslada a las historias detrás del diseño de los Juegos
Olímpicos.

Sistemas de signos en la comunicación audiovisual

Con este libro, Aicher pretende ampliar información sobre la
comunicación mediante símbolos gráficos en vista a la
utilización practica y a la profundización teórica.

08
CAPÍTULO 3

Cómo pensamos
con la vista
A principio del siglo XX un grupo de
psicólogos alemanes averiguaron que
el acto de mirar tiene una componente
activa. Se dieron cuenta de que
creamos y construimos nuestra
percepción a partir de los estímulos
que recibimos.

Esta corriente recibió el nombre de

Gestalt y a continuación te facilitamos
recursos para profundizar en sus
principios.

10
La sintaxis de la imagen
Donis A. Dondis
Un libro clásico del diseño que aplica la psicología de la
Gestalt sobre la percepción visual en el ámbito del
diseño gráfico.

Los 7 principios Gestalt del diseño digital

En este artículo, desglosan qué es la psicología de la Gestalt,
los siete principios de diseño de la Gestalt y cómo aplicaro
en el diseño digitial.

Information visualization: perception for design

Colin Ware
Libro académico en inglés. La biblia sobre percepción para
la visualización de datos.

Perception in visualization
Christopher G. Healey
Artículo largo en inglés donde se explica con mucho detalle
conceptos como la prevención o la interferencia entre
variables visuales.

11
CAPÍTULO 4

Tipos de tareas y
tipos de datos
Los sistemas computacionales
de visualización proveen
representaciones visuales de
conjuntos de datos diseñadas para
ayudar a las persona a efectuar
tareas de manera más efectiva.

Tamara Munzner

13
Visualization Analysis and Design
Tamara Munzner
Tamara Munzner es una de las personas más relevantes
en el diseño y la visualización de datos. En este libro podrás
ampliar el contenido de este capítulo y el siguiente.

Data Viz Project

Ferdio
La biblioteca de visualizaciones de datos más grande del
mundo. Presenta todas las visualizaciones relevantes y
populares en las que conseguirás un montón de referencias
e inspiración.

14
CAPÍTULO 5

¿Qué hace que una

visualización sea buena?
Desde el principio de la escritura, el
ser humano ha intentado organizar
y comunicar todo su saber
histórico. Y con el paso del tiempo
han ido mejorando y resolviendo
mejor su tarea.

Con estas referencias podrás

profundizar en la historia de las
visualizaciones.

16
Cartographies of Time
Daniel Roseberg
Daniel Roseberg consigue contar la historia del diseño del
timeline o línea temporal con un grandísimo detalle.

Dos siglos de gráficos estadísticos

Instituto Nacional de Estadística
Recorrido en castellano por los principales hitos en la
historia de los gráficos estadísticos. Preparado por el INE.

El arte funcional
Alberto Cairo
Alberto Cairo es una de las personas más relevantes en el
diseño y la visualización de datos. Entre muchos de sus
libros, encontramos éste en el que introduce al lector con
rigurosidad, en el mundo de la visualización de datos.

17
Principio de eficacia y variables visuales
¿Cómo medimos la eficacia en el contexto de la visualización
de datos? Tamara Munzner nos lo dejaba muy claro con el
principio de eficacia. Recuerda, debemos mapear las columnas
más importantes de nuestros datos con la variable visual más
eficaz.

Ten a mano siempre esta gráfico para conocer si tu

visualización está diseñada de la forma más eficaz posible.

VARIABLES DE MAGNITUD VARIABLES DE IDENTIDAD

EFECTIVIDAD
columnas ordinales o cuantitativas columnas categóricas

POSICIÓN
REGIÓN ESPACIAL
misma escala

POSICIÓN COLOR
diferente escala tono

LONGITUD
MOVIMIENTO
(tamaño 1D)

INCLINACIÓN FORMA
ÁNGULO

ÁREA
(tamaño 2D)

PROFUNDIDAD
(posición 3D)

COLOR*
luminancia

COLOR*
saturación

CURVATURA**

VOLUMEN**
(tamaño 3D)

* Tanto la luminancia como la saturación tienen la misma efectividad.

** Tanto la curvatura como el volumen tienen la misma efectividad.

18
CAPÍTULO 6

Conceptos imprescindibles
de estadística
La estadística es una herramienta
muy importante con la que podrás
analizar tus datos de manera rigurosa
y poder tomar las decisiones
correctas a la hora de diseñar las
visualizaciones.

Con estos enlaces podrás profundizar

un poco más en los conceptos
estadísticos más importantes.

20
Lo que perdemos al enfocarnos en promedios
Mona Chalabi
Es tentador enfocarse en los promedios cuando pensamos
en los datos, pero el mundo es mucho más desordenado de
lo que esos números pueden parecer. Pero, si nos fijamos en
los valores atípicos ¿qué ganamos? O cómo los llama Mona
Chalabi, los pájaros perdidos.

Curso de estadística y probabilidad

Este curso te ayudará a analizar y aprender sobre
estadística y probabilidad.

Tidy Data
Hadley Wickham
Es un artículo un poco académico, en el que propone un
concepto llamado Datos ordenados.

21
CAPÍTULO 7

Herramientas
Imprescindibles
Existen millones de herramientas
que nos facilitarán la vida a la
hora de diseñar una visualización
de datos.

A continuación tienes un listado

con las más utilizadas.

23
Datawrapper Academy
Datawrapper tiene una excelente documentación de la
herramienta, llena no sólo de consejos de cómo usar
Datawrapper sino de buenos ejemplos de uso de los
Charts clásicos.

Color Brewer
Cynthia Brewer
La herramienta clásica de creación de paletas de colores
para visualización.

Color Schemes
Mike Bostock
Listado interactivo de paletas de color para visualización.
Incluye paletas para datos secuenciales de un sólo tono y
multitono, datos divergentes, datos cíclicos y categóricos.

Data Color Picker

Erik D. Kennedy
Es una herramienta para genera paletas de colores a partir
de un par de colores que escojas. Los genera calculando
colores perceptualmente equidistantes y puede crear
escalas de un solo tono, multitono y divergentes.

24
CAPÍTULO 8

Visualizar para comunicar

A continuación tienes una serie de
artículos con los que conseguirás
comprender mejor las visualizaciones
para comunicar.

Profundizarás en algunos de los

proyectos más importantes que se
han realizado entorno a las
visualizaciones para contar historias.

26
Our explanatory approach to visualizing data
Datawrapper
Artículo corto en inglés que explica qué diferencias existen
entre una visualización para comunicar y una para explorar.
Defiende la no interacción en visualizaciones narrativas.

Dear Data
Giorgia Lupi
Dear Data es una colección de postales que contienen datos
registrados de la vida cotidiana de las diseñadoras de
información Stefanie Posavec y Giorgia Lupi.

Storytelling with data

Cole Nussbaumer Knaflic
Storytelling with Data es uno de los libros más citados para
contar historias con datos. En esta charla, podrás ver los
puntos más importantes del libro.

How it’s made: Wrapped

Spotify
¿Cómo creamos aún más conversaciones a través de
nuestro datos? El equipo de Spotify cuenta cómo se
construye su campaña de comunicación con datos:
Wrapped.

27
Am I normal?
Mona Chalabi
En esta serie original de TED, la periodista de datos Mona
Chalabi, realiza una investigación sobre lo que hay detrás de
las preguntas engañosas.
¿Tengo suficientes amigos? ¿Qué tan precisos son
los informes meteorológicos? ¿Debería tomarme tanto
tiempo superar mi ruptura? Además del video, tienes un
podcast para profundizar en estos temas y más.

Endangered species
Mona Chalabi
Mona Chalabi es periodista de datos en The Guardian. Hace
unos años hizo un artículo magnífico explicando las especies
en peligro de extinción con unas visualizaciones fascinantes.
En ellas podrás ver como cuenta los datos en relación a algo
que podemos imaginar.

28
CAPÍTULO 9

Visualizar para decidir

Adentráte en los escenarios de
visualización de Stephen Few y en
diferentes herramientas para la
creación de dashboards.

30
Mixpanel
Una herramienta de creación de dashboard diseñada para
métricas de uso de productos digitales.

Juice box data

Una herramienta de creación de dashboard con un enfoque
narrativo. El texto gana relevancia y acompaña, – de manera
perfecta–, a las visualizaciones interactivas.

Information dashboard design

Stephen Few
El clásico entre los clásicos de los dashboards. No se centra
en la herramienta, sino en los conceptos fundamentales que
debes saber para crear una herramienta de monitorización.

31
CAPÍTULO 10

Visualizar para descubrir

Te facilitamos una serie de
herramientas, videos y libros sobre
la visualizaciones destinadas a
descubrir y sus peculiaridades.

33
Graphext
Herramienta de análisis exploratorio de datos diseñada para
que la persona pueda descubrir preguntas y encontrar
respuestas sobre sus propios datos de manera ágil y sencilla.

Gapminder
Ola Rosling, Anna Rosling y Hans Rosling
Herramienta de exploración de datos estadísticos globales.
Se pueden explorar millones de estadísticas de todos los
países del mundo. Son muy interesantes sus vídeos sobre
cómo el desarrollo del mundo avanza más de lo que
creemos. Sobre el mismo tema escribieron el bestseller
Factfulness.
Factfulness

Now you see it

Stephen Few
Libro clásico sobre visualización exploratoria o cómo lo llama
el autor Data sensemaking. Incluye conceptos estadísticos y
técnicas de interacción sobre visualizaciones.

34
CAPÍTULO 11

Visualizar sobre mapas

Conocer el lugar o la zona exacta
donde ocurren las cosas tiene un
potencial enorme.

Te facilitamos un listado con

referencias para que puedas
profundizar más en la visualización
sobre mapas.

36
Distorsiones
Desde la historia de los mapas, su visualización siempre ha
tenido una cierta distorsión que por mucho que queramos, es
inevitable que ocurra.

Existen diferentes herramientas que nos ayudan y nos permiten

de manera muy visual, darnos cuenta de todas las distorsiones
que podemos encontrar:

The True Size Of

Esta web nos permite comprobar las distorsiones que causa
la proyección Mercator, las más extendida hoy en día en la
visualización geográfica.

Proyecciones topográficas
Mike Bostock ha creado una herramienta donde poder
explorar decenas de proyecciones topográficas diferentes
que permiten ver la distorsión que sufren los diferentes
países según el tipo de proyección.

37
Aaron Kolbin
Aaron Koblin es un artista especializado en datos y tecnologías
digitales. Su trabajo toma datos del mundo real y los utiliza para
reflexionar sobre las tendencias culturales y la relación entre los
humanos y la tecnología.

Flying Patterns
En esta visualización, Kolbin muestra los patrones y las
densidades del tráfico aéreo estadounidense durante un
período de veinticuatro horas. Kolbin usa las variaciones de
color y el grosos para ilustrar una amplia de datos y eventos,
incluidas las alteracionesd elas rutas, los cambios el tráfico
de vuelos, zonas de exclusión geográfica, etc.

Visualizing ourselves ... with crowd-sourced data

Desde líneas elegantes que trazan vuelos de aerolíneas
hasta paisajes de datos de teléfonos celulares. Aaron Kolbin
nos sorprende en una Charla TED del 2011. Subtítulado en
más de 20 idiomas, entre ellos, el castellano.

38
Los clásicos
Desde hace siglos, la humanidad ha querido visualizar parte de
las historias que han ocurrido en el mundo. Históricamente, los
eruditos la utilizaban para sus planes, dirección y entendimiento.
Aquí tienes algunas de las visualizaciones más importantes y
que debes conocer:

El mapa de cólera de John Snow (1855)

Su mapa es considerado pionero en el uso del método
geográfico para estudiar una epidemia. Cambió para siempre
cómo percibimos las visualizaciones de datos: no sólo como
un apoyo clarificador a un modelo ya conocido, sino como
sustento y prueba del mismo.

La Rosa de Nightingale (1859)

Uno de los gráficos más conocidos en la historia de la
visualización de datos es el “diagrama de la rosa” que la
Florence Nightingale diseñó con
enfermera y estadística Florence
motivo de su estudio sobre la mortalidad de las tropas
británicas en la guerra de Crimea en 1856.

Carta figurativa de Charles Minard (1869)

Un ejemplo clásico es la carta figurativa de Charles Minard.
Esta visualización publicada en 1869 muestra la campaña
militar de Napoleón a Rusia en 1812.

39
Empresas relevantes en la
visualización geográfica
Para una compañía, poner los datos relevantes sobre un mapa
ayuda a tomar grandes decisiones. Desde hace ya muchos
años, existen varias empresas muy relevantes que tomaron la
decisión de trabajar con científicos de datos para ayudar a esa
toma de decisiones:

CartoDB: Los mapas españoles que servirán para cambiar

el mundo
Sergio Álvarez Leiva, cofundador de CartoDB y director de
varios programas en el Instituto Tramontana, cuenta en esta
entrevista como, con buenos datos, se pueden construir
mapas que explican muchas cosas. Desde los movimientos
migratorios de algunas especies animales, al mejor lugar
para situar un determinado comercio en un barrio.

Sergio Estella: Vizzuality

Sergio Estella lidera Vizzuality, y es una de las entrevistas del
curso. Vizzuality es una de las mejores empresas de diseño y
visualización de datos con proyección mundial.
Su propósito es la creación de un futuro mejor para nuestro
planeta y la sociedad.

Mapbox
Es uno de los productos más utilizados. Han creado libro
llamado The guide to map design
design, con las mejores prácticas
para diseñar mapas para navegación, dispositivos móviles y
visualización de datos.

40
CAPÍTULO 11

Los mapas temáticos

Los mapas temáticos nos ayudan a
representar datos sobre una ubicación.
Nos permiten una mayor comprensión
de los datos y descubrir patrones
espaciales.

En base a los tipos de datos y la tarea

que queramos realizar, existen
diferentes técnicas de visualización
geográfica. Os mostramos los más
útiles y poderosos para tomar
decisiones y comunicar.

42
Mapa de puntos

El mapa de puntos es el mapa temático más básico.

En esta visualización, cada dato geolocalizado se
muestra con un punto situado en el mapa. Además,
podemos representar más columnas de nuestro
dataset modificando el área o el color de cada punto.

El problema de esta visualización es su mala

escalabilidad. Es muy fácil pintar demasiados puntos
para mostrar nuestros datos. Muchas veces los datos
se concentran en ciertas localizaciones, como las
grandes ciudades, y tendremos mucho solape. Si el
mapa es interactivo y nos alejamos de él, nos ocurrirá
ese mismo solape.

Para poder solventar este problema, existen los mapas

de densidad de puntos.

43
Mapa de densidad de puntos

Los mapas de densidad de puntos dibujan glifos que

expresan el número de datos que coinciden en una
zona determinada.

Si el mapa es interactivo, el nivel más bajo se suele

representar por puntos, y a medida que nos bajos
alejando se van sustituyendo los puntos por dichos
glifos.

44
Mapa de calor

Si tenemos una densidad muy alta de puntos, la mejor

solución para representar ese tipo de datos es
realizando un mapa de calor que represente la densidad
de eventos en cada ubicación.

Este tipo de mapa se utiliza mucho cuando se quieren

representar datos en los que los límites geográficos
establecidos no son importantes. Por ejemplo, el tiempo
o incluso algunos fenómenos naturales. En ellos,
visualizar su intensidad nos ayuda a comprender mejor
las áreas de impacto en el mapa y olvidarnos de los
límites geográficos.

45
Mapa de líneas

Los mapas de líneas son muy útiles cuando queremos

visualizar datos que relacionan dos puntos del mapa,
como por ejemplo los vuelos que salen o llegan desde
los diferentes aeropuertos de un país.

Tan simple como representar las conexiones entre dos

localizaciones conocidas con una línea.

46
Mapa con líneas empaquetadas (Edge Bundling)

Dependiendo de la aglomeración de líneas es común

agregar todos los vuelos que se dan entre dos
aeropuertos y representar ese número de vuelos con el
grosor de la línea, formado así un diagrama de flujo.

Un claro ejemplo visto en este capítulo es el famoso

Flying Patterns de Aaron Koblin, en el que representó los
140.000 vuelos que surcan Estados Unidos en un día.

47
Mapa de coropletas

Los mapas de coropletas son una visualización geográfica

clásica y muy habitual. Se deben usar cuando tenemos
datos estadísticos sobre regiones geográficas, por ejemplo,
el número de votos de cada partido político en unas
elecciones democráticas o el porcentaje de desempleo.
La columna numérica se representará mediante el color de
cada región.

Como ya hemos visto, deberíamos utilizar la variación de

luminosidad o de saturación para expresar la magnitud. Si
necesitamos mucha resolución, podríamos usar alguna
escala de color secuencial multitono como viridis.

48
Mapa hexagonal (Hex map)

Los mapas hexagonales resuelven un problema que

encontramos en los mapas de coropletas. Muchas veces
tenemos muchísima disparidad entre tamaños de
diferentes regiones de un mapa. Si comparamos España
con Andorra, el área que ocupan es muy diferente y por
tanto la mancha de color de las dos regiones estará muy
desequilibrada.

Para tratar de solucionar este problema podemos dibujar

mapas no realistas, donde aproximamos la posición
relativa de las regiones con áreas hexagonales del
mismo tamaño. De esta forma conseguiremos que todas
las filas de nuestro dataset tengan el mismo peso visual.

49
Cartograma

Si necesitamos representar una columna cuantitativa

más de nuestros datos, podemos utilizar la visualización
de los cartogramas. Estos mapas distorsionan el área de
cada región para que sea proporcional al valor de la
columna que queremos representar.

50
Enfoques son cursos en vídeo creados
por el Instituto Tramontana. Conceptos,
referencias, ejercicios y teoría,
impartidos por los mayores expertos.

Pensados para profesionales y equipos

que desean ensanchar y profundizar en
sus conocimientos y capacidades
creando productos digitales.

enfoques.net
tramontana.net