Data Visualization Tools &

Techniques
Clase 2
Conceptos previos
¿Qué es visualización de datos?
• Es una técnica utilizada para comunicar datos o información
codificándolos como objetos visuales contenidos en gráficos. El
objetivo es comunicar información de forma clara y eficaz a los
usuarios
• Es la representación visual de información que tiene como fin el
apoyo a la toma de decisiones
Conceptos previos
¿Para que nos sirven las visualizaciones?
• Explorar, responder a preguntas o plantear nuevas preguntas
• Analizar, ver patrones, relaciones y valores atípicos entre las
variables (datos)
• Explicar, Crear una historia que nos muestre el comportamiento de
variables a través del tiempo
Conceptos previos
Metodología de desarrollo de Visualizaciones
• Fase 1 – Definición de la información
• Se investiga y define el objetivo de las visualizaciones
• Definimos indicadores
• Tipos de usuarios
• Gobernanza de datos (Que audiencia ve que contenido, limites de visibilidad)
• Actualización de datos
• Origen de la información (Base de datos, Exceles, documentos Word, etc)
• En que dispositivos se consumirán las visualizaciones
• Tamaño de las pantallas (por pixeles)
Conceptos previos
Metodología de desarrollo de Visualizaciones
• Fase 2 – Preparación de datos
• Verifica los accesos a las fuentes de datos y se validan
• Análisis exploratorio
• Limpieza y transformación de datos
Conceptos previos
Metodología de desarrollo de Visualizaciones
• Fase 3 – Diseño de Visualizaciones/Dashboards
• Se realizan los bosquejos que los dashboards
• Se valida que cumplan con los objetivos de las visualizaciones
• Desarrollamos las visualizaciones / tableros
• Presentación de tableros
• Mantenimiento y soporte de los tableros
Conceptos previos
Contenido
• Paginas oficiales de e-learning herramientas principales
• ¿Qué es un dashboard?
• Principios de Gestalt
• Principios de una visualización y dashboard
• Paleta de Colores
• Brand Book
• Buenas prácticas de visualizacion
Paginas oficiales de e-learning
herramientas principales
Paginas oficiales de e-learning
herramientas principales
• Tableau
• https://www.tableau.com/es-es/learn
• https://www.tableau.com/es-es/learn/training/20203#visual-analytics
• https://www.tableau.com/es-es/about/blog
• https://www.youtube.com/c/tableausoftware/videos
• https://www.tableau.com/learn/training/elearning (de pago mensual)
• Shiny Apps
• https://shiny.rstudio.com/tutorial/
• https://mastering-shiny.org/
Paginas oficiales de Elearning
herramientas principales
• PowerBI
• https://powerbi.microsoft.com/es-es/learning/
• https://powerbi.microsoft.com/es-es/blog/
• https://www.youtube.com/user/mspowerbi
• https://www.youtube.com/channel/UCFp1vaKzpfvoGai0vE5VJ0w

• QlikSense
• https://www.qlik.com/us/services/training/free-training
• https://learning.qlik.com/
¿Qué es un dashboard?
¿Qué es un dashboard?
Es una herramienta de gestión de la información que monitoriza,
analiza y muestra de manera visual
• Indicadores clave de desempeño (KPI),
• Métricas
• Datos fundamentales
para hacer un seguimiento del estado de una empresa, un
departamento, una campaña o un proceso específico.
Características de un dashboard
• Personalizado, Un dashboard debe contener únicamente los KPI o métricas que sean
relevantes para el departamento, campaña o proceso que nos ocupa.

• Visual, La idea de un dashboard es que podamos obtener la información que buscamos

a golpe de vista. Por ello, los datos se presentan en forma de gráficos y debemos
contar con indicadores rápidos a través de claves de color, flechas hacia arriba o abajo
o cifras destacadas.

• Práctico, La función principal de un dashboard siempre debe ser orientar las acciones
de nuestro equipo. Por tanto, debe facilitarnos la información necesaria para que
podamos saber cuáles son los siguientes pasos a seguir para mejorar los resultados.

• En tiempo real o actualizado, La información debería estar actualizada al momento en

todas las fuentes y mostrarse en el dashboard.
Principios de Gestalt
Que significa Gestalt
• La palabra Gestalt es del idioma alemán que literalmente significa
patrón, figura, forma o estructura unificada

• Estos principios intentan explicar cuándo y cómo nuestras mentes

perciben los diferentes componentes visuales como parte de un
todo

• Se han formulado listas para resumir los principios básicos de la

percepción visual, estos principios intentan explicar cuándo y cómo
nuestras mentes perciben los diferentes componentes visuales como
parte de un todo.
Principios de Gestalt
1. Simplicidad
La ley de la simplicidad indica que nuestra
mente percibe todo en su forma más
simple.
Por ejemplo, cuando la siguiente imagen
se analiza en detalle está hecha de
componentes individuales que vistos por
separado, no tienen significado en lo
absoluto y sin embargo, juntos, nuestra
mente automáticamente los percibe para
deletrear la palabra ‘logo’.
Principios de Gestalt
2. Figura y fondo
El principio de figura y fondo trata de
explicar que elemento en un diseño se
percibirá de inmediato como la figura y
que elemento se percibirá como el fondo.
Para poner las cosas en contexto, la
“figura” es elemento en el que se centra la
mirada, mientras que el “fondo” es lo que
está detrás de la figura
Principios de Gestalt
2. Figura y fondo
Este principio marcar una gran diferencia
en la forma que una imagen expresa un
mensaje.
Este anuncio para el Festival gastronómico
y de vino de Melbourne (2007), en el que
las botellas están colocadas
estratégicamente para crear la ilusión de
un tenedor. En este caso, al combinar
objetos que tengan relación con la comida
y el vino, este diseño transmitió el mensaje
del evento de una forma mucho más
irresistible.
Principios de Gestalt
3. Proximidad
Si los elementos están muy cerca el uno al
otro, los percibimos como que pertenecen
al mismo grupo, eso es lo que nos indica
este principio.
Ejemplo, nuestra mente percibe cada una
de las barras verticales adyacentes se
combinan y forman una imagen de un
venado.
Principios de Gestalt
4. Semejanza
El principio de semejanza nos indica
que si los elementos se parecen el uno
al otro, los percibimos como si
pertenecieran al mismo grupo.

La semejanza se puede causar a través

de los colores, tamaño, orientación,
textura e inclusive, con las fuentes.
Principios de Gestalt
5. Dirección común
Establece que vemos aquellos
elementos visuales que se mueven
en la misma dirección como parte de
un solo grupo.

Ejemplo, al ver que cada una de las

aves viaja como una unidad en la
misma dirección, nuestra mente las
percibe como si fueran parte de un
solo grupo que lleva un pez.
 Principios de Gestalt
6. Simetría
Este principio describe que los elementos simétricos se
perciben como parte del mismo grupo.
Esta relación es la que nos ayuda a percibir estos
elementos como una sola figura.

Por ejemplo, el póster para la Bike Expo en Nueva York,

el centro de atención del concepto era un círculo
unificado. Para crearlo, el diseño empleó mitad de la
rueda de una bicicleta y mitad de la tapa de una
alcantarilla, y si bien la textura y el color son distintos, el
solo hecho que fueran simétricas las unió en los ojos de
la audiencia.
Principios de Gestalt
7. Continuidad
La asociación visual se crea cuando los
elementos se alinean unos con otros.
Las líneas se perciban como una sola figura en
tanto que sean continuas y mientas más
fluidos sean los segmentos, más las vemos
como una figura unificada.
Ejemplo, tenemos esta tarjeta de navidad, en
la cual la línea delgada verde del lápiz que se
afila guía el ojo por la composición de arriba a
abajo, creando, de forma muy inesperada, la
figura de un árbol de navidad.
Principios de Gestalt
8. Cierre
Cuando los elementos son parte de una
figura cerrada, percibimos que pertenecen al
mismo grupo.
Un gran diseño con el que podemos
observar cómo funciona el principio de
cierre es con el logotipo de FedEx que,
mediante el espacio negativo entre la E y la
X, más la ilusión de cierre al colocar ambas
letras muy juntas, el diseño “esconde” una
flecha hacia la derecha que no muchas
personas han sido capaces de notar a través
de los años.
Principios de Gestalt
9. Región común
El principio de la región común nos indica
que cuando encontramos varios elementos
que forman parte de una sola región, los
asociamos como un solo grupo.

Ejemplo, este póster para la película de

Pixar Intensamente, utilizan este principio
para unificar los personajes de la película
en la silueta de una persona y como los
vemos dentro de la misma región,
percibimos que coexisten en ese espacio..
Principios de Gestalt
10. Conectividad de los elementos
Los elementos están conectados por
otros elementos. Una forma rápida de
ver este principio en acción es con una
infografía o diagrama de flujo, en el que
las flechas conectan una figura con la
siguiente.

En esta creación los objetos están

unificados por una línea que va por toda
la composición y que a pesar de toda la
actividad que tiene el diseño, le da una
unidad y cohesión visual.
Paleta de Colores
Paleta de colores
Es una de las herramientas de diseño gráfico elementales, ya que se utiliza
para crear combinaciones de colores que trabajen bien juntos. La paleta de
colores se utiliza en las artes gráficas para componer ambientes y tonalidades
de producto
Colores monocromáticos
Estas paletas de colores están compuestas por un color y diferentes
tonos, matices y tintes. Las paletas de color monocromáticas se
forman con un color y a ese color se le agrega negro o blanco.
Colores complementarios
La paleta de colores complementarios es un poco más atrevida, pues
está formada por los colores opuestos de la rueda de colores, como el
rojo y el verde, o el azul y el amarillo.
Colores análogos
Esta paleta es fácil de crear pues se arma con los tres colores que
están juntos en la rueda de color. Estos colores comparten tono y
entonces es fácil crear la sensación de comodidad. Un ejemplo de
esto es una paleta conformada por rojo, anaranjado y amarillo
Paleta de colores triádica
Esta paleta se crea utilizando tres colores distintos que se encuentran a la misma
distancia en la rueda de colores.

La ventaja de esta paleta es que crea combinaciones muy atractivas, pero es

difícil de crear.
Tipo de paletas
Creación de Paleta de colores
La paleta de colores nos servira para obtener las tonalidades
derivadas de un color para crear un conjunto monocromatico o
complementario de colores
https://color.adobe.com/
https://www.color-hex.com/
https://colorhunt.co/
BrandBook
BrandBook
El BrandBook o manual de identidad corporativa es una guía en el
cual se definen, de manera concisa, todos los elementos que ayudan
a construir la identidad corporativa. A su vez, ayuda a dilucidar cómo
es percibida la marca por las personas ajenas a la empresa.

Gracias a este elemento, las empresas tienen en su haber un conjunto

de pautas que sirven de bandera para que todo el personal de la
organización tenga claro lo que significa y representa su marca.

Es el primer paso para una buena gestión de marca.

BrandBook
Dentro del brandbook se tiene un aspecto llamado “ Identidad
visual” , dentro de este punto se tiene claro los siguientes aspectos:

• Logotipo
• Paleta de colores
• Tipografías
• Estilo de fotografías
• https://www.millicom.com/2018annualreport
• https://www.tigo.com.gt/
• https://www.tigo.com.hn/
• https://www.tigo.com.co/
Ejercicio #2
Principios Gestalt
• Encontrar un ejemplo (imagen) de cada uno de los diez principios

Paleta de colores
• Crear una paleta de colores monocromática
• Crear una paleta de colores complementaria
• Crear una paleta de colores análoga
• Crear una paleta de colores triádica

• 5 Mejores prácticas para la visualización de datos

• Según su criterio

Ejercicio 5 puntos
¿Qué aprendimos hoy?
Dudas o comentarios

raarroyo@uvg.edu.gt