Diplomado en Big Data y Data Science

Visualización de datos
Sebastián Rodríguez Ortiz
Diciembre, 2018

Escuela de Ingeniería Informática

Pontificia Universidad Católica de Valparaíso
Definición según Andy Kirk
Definiendo visualización de datos
Definición
• Según Andy Kirk:
“La representación y presentación de los datos para facilitar el
entendimiento”
Definiendo visualización de datos
Representación y presentación
• Para derivar entendimiento de los datos hay que hacer la representación
de los datos
Definiendo visualización de datos
Representación
• La representación esta ligada a las marcas:
– Puntos
– Líneas
– Áreas
– Barras
– Etc.
• Básicamente, elementos de un gráfico
Definiendo visualización de datos
Presentación
• La presentación por su parte esta ligada a los atributos:
– Colores
– Anotaciones
– Uso del color
– Composición
– Etc.
• Esto corresponde a
las propiedades del gráfico
Definiendo visualización de datos
Definición
• Según Andy Kirk:
“La representación y presentación de los datos para facilitar el
entendimiento”
Definiendo visualización de datos
Tres etapas de entender

• Cada etapa es dependiente de cada una de las anteriores

• Uno puede influenciar pero no controlar el entendimiento
• Es una responsabilidad compartida entre:
– Visualizador
– Público
Definiendo visualización de datos
Percibir
• Corresponde al acto de leer un gráfico
– ¿Qué es lo que quiere mostrar el gráfico?
– ¿Dónde están los puntos grandes, medianos y pequeños?
– ¿Cómo se relacionan los elementos?
– ¿Que relaciones existen entre los valores?
• Entender en esta etapa corresponde a la capacidad del público de
decodificar los gráficos
Definiendo visualización de datos
Percibir
Definiendo visualización de datos
Interpretar
• Darle sentido a lo percibido:
– ¿Qué significa el gráfico?
– ¿Es bueno que los puntos sean grandes, medianos y pequeños?
– ¿Lo que ocurre es inusual o esperado?
– ¿La relación es significativa o insignificante?
• La capacidad de interpretar está influenciada por:
– El conocimiento pre-existente del sujeto (datos)
– La capacidad de utilizar este conocimiento para obtener las implicancias
Definiendo visualización de datos
Interpretar
Definiendo visualización de datos
Interpretar
Definiendo visualización de datos
Interpretar
Definiendo visualización de datos
Comprender
• Reflexión personal de lo percibido e interpretado
– ¿Qué significa esto para mi?
– ¿Qué es lo principal que comunica?
– ¿Qué he aprendido (o no)?
– ¿Qué acciones se pueden tomar?
Definiendo visualización de datos
Comprender
• Messi y el fútbol:
Definiendo visualización de datos
Comprender
• Kane y hockey sobre hielo:
Definiendo visualización de datos
Comprender
• Winglets y Spungles:
5 Ideas de cómo se procesan visualmente los
gráficos
5 ideas de cómo se procesan visualmente los
gráficos
1. Uno no va en orden
2. Vemos lo que se destaca
3. Vemos pocas cosas a la vez
4. Se busca el significado y hacer conexiones
5. Confiamos en metáforas y convenciones
• Esto es útil para el proceso de entendimiento del público
5 ideas de cómo se procesan visualmente los gráficos
1.- Uno no va en orden
• Ej: Lectura de párrafos vs gráficos
– Párrafos: Secuencial (Izquierda a derecha)
– Gráficos: Elementos del mismo
• El orden varia por cada persona
• Observar un gráfico puede ser rápido y
el foco está concentrado en áreas.
5 ideas de cómo se procesan visualmente los gráficos
2.- Vemos lo que destaca
• Nuestros ojos se dirigen
principalmente a donde existen
cambios y diferencias:
– Intersecciones
– Colores Dominantes
– Peaks
– Valles
– Outliers
5 ideas de cómo se procesan visualmente los gráficos
3.- Vemos pocas cosas a la vez
• Mientras más datos hayan, más
singular es el significado de dicho
gráfico
• ¿Qué sucede si queremos ver el
rendimiento de individuos?
5 ideas de cómo se procesan visualmente los gráficos
3.- Vemos pocas cosas a la vez
• Mientras más datos hayan, más
singular es el significado de dicho
gráfico
• ¿Qué sucede si queremos ver el
rendimiento de individuos?
5 ideas de cómo se procesan visualmente los gráficos
3.- Vemos pocas cosas a la vez
• Mientras más datos hayan, más
singular es el significado de dicho
gráfico
• ¿Qué sucede si queremos ver el
rendimiento de individuos?
• Un problema surge a medida que
aumenta la complejidad de los datos
(Añadir variables)
5 ideas de cómo se procesan visualmente los gráficos
3.- Vemos pocas cosas a la vez
• Mientras más datos hayan, más
singular es el significado de dicho
gráfico
• ¿Qué sucede si queremos ver el
rendimiento de individuos?
• Un problema surge a medida que
aumenta la complejidad de los datos
(Añadir variables)
5 ideas de cómo se procesan visualmente los gráficos
3.- Vemos pocas cosas a la vez
• Mala complejidad no revela puntos importantes, ni relaciones/tendencias.
Ofusca, frustra y confunde
– Ejemplo : Gráfico anterior
• Buena complejidad emerge de las visualizaciones que un humano puede
procesar
5 ideas de cómo se procesan visualmente los gráficos
3.- Vemos pocas cosas a la vez
• Corredores de bolsa y conexiones a una plataforma social de mercadeo
5 ideas de cómo se procesan visualmente los gráficos
4.- Se busca significado y hacer conexiones
• Arma de doble filo, ya que si bien ayuda, también puede generar una falsa
narrativa
5 ideas de cómo se procesan visualmente los gráficos
4.- Se busca significado y hacer conexiones
• Arma de doble filo, ya que si bien ayuda, también puede generar una falsa
narrativa
• Correlación no implica causalidad
5 ideas de cómo se procesan visualmente los gráficos
4.- Se busca significado y hacer conexiones
• Una comunicación visual buena no tiene que ser utilizada solo para generar
mejores respuestas, sino que también generar buenas conversaciones
• Ejemplo de una mala comunicación visual:
5 ideas de cómo se procesan visualmente los gráficos
5.- Confiamos en convenciones y metáforas
5 ideas de cómo se procesan visualmente los gráficos
5.- Confiamos en convenciones y metáforas
5 ideas de cómo se procesan visualmente los gráficos
5.- Confiamos en convenciones y metáforas
• Convenciones y metáforas son temas importantes a respetar:
– Tiempo: de izquierda a derecha (Muy usualmente en el eje X)
– Colores: Rojo es negativo, Verde es positivo
– Temperatura: Rojo es calor, por su parte Azul es frio
5 ideas de cómo se procesan visualmente los gráficos
5.- Confiamos en convenciones y metáforas
5 ideas de cómo se procesan visualmente los gráficos
5.- Confiamos en convenciones y metáforas
Refinar
Refinar
Refinar para impresionar y persuadir
• “Perfeccionar un cosa adecuándola a un fin determinado.”
– Impresionar: Ser efectivo
– Persuadir: Contar una historia
Refinar
Refinar para impresionar
• Un ejemplo:
Refinar
Refinar para impresionar
• Hacer algo bonito/simple tiene una funcionalidad más allá que la
estética:
– Efectividad
• Un buen diseño permite acceder a ideas sobre el gráfico
• ¿Cómo enfrentar esto?
– Tres recomendaciones
Refinar
Refinar para impresionar
• Primera recomendación: Estructura y Jerarquías
– ¿Se ve bien y limpio el gráfico?
– ¿Qué tan ordenado está?
Refinar
Primera recomendación: Estructura y Jerarquías
Refinar
Primera recomendación: Estructura y Jerarquías
• Los gráficos tienen que tener una estructura:
– Titulo
– Subtitulo
– Campo Visual
– Fuentes
• Autoexplicativo -> más efectivo
• Reutilizable
Refinar
Primera recomendación: Estructura y Jerarquías
• Esto es una recomendación
– No es necesario que estén todos los campos
– Es necesario que exista consistencia entre varios gráficos
Refinar
Primera recomendación: Estructura y Jerarquías
• Mantener elementos alineados
– Grillas
Refinar
Refinar para impresionar
• Segunda recomendación: Claridad
• ¿Hace sentido lo que se esta observando?
• ¿Tienes que dedicar tiempo para buscar lo que se supone que tienes que
ver?
Refinar
Segunda recomendación: Claridad
Refinar
Segunda recomendación: Claridad
•Remover elementos ajenos
– Ser agresivos
– Mantener el significado de lo que se quiere mostrar
•Utilizar todos los elementos ayuden a la visualización
– Resaltar la idea
– Aprovechar la estructura del gráfico (ej: Titulo descriptivo)
Refinar
Segunda recomendación: Claridad
•Remover ambigüedades:
– Evitar mal interpretaciones
– Un propósito para cada elemento
Refinar
Segunda recomendación: Claridad
•Ocupar metáforas
– Rojo -> Calor
– Azul -> Frio
Refinar
Refinar para impresionar
• Tercera recomendación: Simplicidad
– ¿El gráfico se ve simple y elegante?
– Minimalismo

• Circulo virtuoso con la claridad

– Simplicidad contribuye a la claridad
– Claridad mejora la sensación de simplicidad
Refinar
Tercera recomendación: Simplicidad
Refinar
Tercera recomendación: Simplicidad
• Mostrar solo lo que es necesario
• Cada elemento tiene que ser:
– Único
– Necesario
– Simple
Refinar
Tercera recomendación: Simplicidad
• Mostrar solo lo que es necesario
Refinar
Tercera recomendación: Simplicidad
• Mostrar solo lo que es necesario
Refinar
Tercera recomendación: Simplicidad
• Mostrar solo lo que es necesario
Refinar
Tercera recomendación: Simplicidad
• Minimizar los colores a utilizar
• Limitar el movimiento de los ojos
Refinar
Tercera recomendación: Simplicidad
• ¿Qué elementos hay que eliminar?
Refinar
Refinar para Persuadir
• No siempre es suficiente hacer un gráfico simple
• Revelar verdades que están en los datos
• Competir por:
– Atención, recursos y dinero
– Hacer pitch a clientes
– Reclutar nuevos clientes
– Cambiar opiniones
– Ayudar a formar una opinión
Refinar
Refinar para Persuadir
Refinar
Refinar para Persuadir
• Tres recomendaciones para el enfoque de persuasión
1. Perfeccionar la idea
2. Hacer que los elementos se destaquen
3. Ajustar lo que hay alrededor
Refinar
Refinar para Persuadir
• Primera recomendación: Perfeccionar la idea
• Enfoque no-persuasivo vs persuasivo
– Ejemplo anterior: Pobrezas en áreas suburbanas
• Enfoque no-persuasivo: “Quiero comparar la pobreza entre áreas suburbanas y urbanas,
década a década
• Enfoque persuasivo: “Necesito convencer a la gente que la pobreza suburbana es un
problema en ascenso, sobrepasando a la pobreza urbana”
Refinar
Refinar para Persuadir
• Ejemplo:
Refinar
Refinar para Persuadir
• Segunda recomendación: Hacer que los elementos se destaquen
• Reforzar la idea principal
– Enfatizando
• Añadir información que llame la atención
• Usar colores únicos
• Anotaciones, punteros, etiquetas, etc.
– Aislando
• Reducir los elementos únicos del gráfico
Refinar
Refinar para Persuadir
Refinar
Refinar para Persuadir
Refinar
Refinar para Persuadir
Refinar
Refinar para Persuadir
• Tercera recomendación: Ajustar lo que hay alrededor
• La forma agresiva para persuadir
– Remover puntos de referencias
– Añadir puntos de referencia
– Mover los puntos de referencia
Refinar
Refinar para Persuadir
• Remover puntos de referencia
Refinar
Refinar para Persuadir
• Añadir puntos de referencia
Refinar
Refinar para Persuadir
• Mover puntos de referencia
Refinar
Refinar para Persuadir
• Mover puntos de referencia
Consejos finales
• Practicar
• Ser críticos con las visualizaciones que uno realiza
– Revisarlas, anotar lo bueno y lo malo de éstas
• Ver otras visualizaciones
– Por qué funcionan, o por qué no
– https://www.reddit.com/r/dataisbeautiful/
– https://www.reddit.com/r/dataisugly/
• ¿Practicar?
Consejos Finales
Herramientas de visualización de datos
Herramientas de visualización de datos
Categorías
• Manipulación de datos
• Prototipado
• Workspace en escritorio y en la nube
• Plataformas de visualización y analíticas
• Diseño
• Desarrollo
Herramientas de visualización de datos
Manipulación de datos
• Pros
– Fácil de usar
– Output rápido para testing y prototipado
– Bueno para confirmación visual y visualización diaria
• Contras
– Herramientas más enfocadas en la data que en la visualización
– Plantillas de diseño puede que no sean lo mas óptimo
– No tantos gráficos avanzados
Herramientas Tipo Tipo de graficos Formatos de exportación
Gratis Registrarse Pago Basico Avanzado
Microsoft Excel X X X Algunos bmp, gif, jpg, pdf, png
Google Sheets X X Algunos html,png
Numbers (Apple) X X pdf,png
Herramientas de visualización de datos
Prototipado
• Pros
– Fácil de usar y gratis online
– Output relativamente estético
– Bueno para confirmación visual y visualización diaria
• Contras
– Un poco difícil ajustar los datos y re visualizar
– Marcas y atributos inconsistentes entre herramientas
– Algunas características requieren de pago
Herramientas Tipo Tipo de graficos Formatos de exportación
Gratis Registrarse Pago Basico Avanzado
Datawrapper X X X X html,pdf,png
Raw X X X html,png,svg
Chartbuilder X X png,svg
Infogr.am X X X X html,png
Vizable X X X png
Herramientas de visualización de datos
Workspace en escritorio y en la nube
• Pros
– Mayor cantidad de sets de características que las herramientas de prototipado
– Buenas visualizaciones, con una variedad de customización
– Bueno para confirmación visual, exploración y visualización diaria
• Contras
– Curva de aprendizaje difícil
– Marcas y atributos inconsistentes entre herramientas
– Hay que pagar para mantener los gráficos privados
Herramientas Tipo Tipo de graficos Formatos de exportación
Gratis Registrarse Pago Basico Avanzado
Plot.ly X X X X Algunos eps,html,pdf,png,svg
Quadrigram X X X Algunos html,png,svg
Silk X X X html
Tableau Public X X X X X bmp,html,jpg,png
Qlik Sense X X X X X html,jpg,pdf,png
Herramientas de visualización de datos
Plataformas de visualización y analíticas
• Pros
– Sistemas poderosos de análisis y visualización de datos
– Buenas para desarrollar equipos de visualización de datos
– Bueno para confirmación visual, exploración y visualización diaria
• Contras
– Curva de aprendizaje requiere de entrenamiento formal
– Demasiado poder para crear solo un tipo de gráfico
– Requieren una inversión significativa

Herramientas Tipo Tipo de graficos Formatos de exportación

Gratis Registrarse Pago Basico Avanzado
Tableau Desktop X X X X bmp,html,jpg,png
Qlik view X X X X X html,jpg,pdf,png
Herramientas de visualización de datos
Diseño
• Pros
– Herramienta poderosa y flexible
– Vale la pena su uso para diseñar visualizaciones de presentación/publicación
– Bueno para ilustración de ideas y visualización diaria
• Contras
– Curva de aprendizaje requiere de entrenamiento formal
– No es tan útil para hacer análisis visual y prototipado
– Requieren una inversión significativa

Herramientas Tipo Tipo de graficos Formatos de exportación

Gratis Registrarse Pago Basico Avanzado
Ilustrator X X X ai,bmp,eps,jpg,pdf,png,svg
 Herramientas de visualización de datos
Desarrollo
• Pros
– Herramientas flexibles para crear gráficos y dashboards
– Customizables, interactivos y muchos tipos de gráficos
– Bueno para exploración visual y visualización diaria
• Contras
– Curva de aprendizaje difícil, requiriendo habilidades de programación profesional
– Los tipos de gráficos varían entre herramientas, al igual que los diseños de salida
Herramientas Tipo Tipo de graficos Formatos de exportación
Gratis Registrarse Pago Basico Avanzado
D3 X X X html,svg
Google Charts X X Algunos html,svg
Highcharts X X Algunos html,svg
Diplomado en Big Data y Data Science

Visualización de datos
Sebastián Rodríguez Ortiz
Diciembre, 2018

Escuela de Ingeniería Informática

Pontificia Universidad Católica de Valparaíso
Próximos pasos
• Ejercicios prácticos
– Tableau Public
– Visdom