3. Visualization & Understanding of Data

1. What is Data Visualization?

• Definition: The graphical representation of data and information.
• Purpose: To simplify complex data and make patterns, trends, and insights visible and understandable.

2. Why Data Visualization Matters

• Aids in decision-making by clarifying data.
• Enhances communication between technical and non-technical audiences.
• Enables data exploration: finding outliers, trends, and clusters.
• Offers cognitive advantages through visual perception.

3. Data Types for Visualization

• Qualitative (categorical): e.g., names, labels, types.
• Quantitative (numerical): e.g., measurements, counts.
• Temporal data: time-based sequences.
• Geospatial data: location-based data.

4. The Visualization Process

• Data Collection
• Cleaning & Preparation
• Choice of Visualization Technique
• Design and Implementation
• Interpretation
• Iteration and Refinement

5. Key Principles of Good Visualization

• Clarity: The message should be easily understood.
• Accuracy: No distortion or misleading graphics.
• Efficiency: The viewer should quickly grasp insights.
• Aesthetics: Pleasant design supports engagement but doesn’t overwhelm content.

6. Types of Visual Representations

• Basic Charts:

  • Bar charts
  • Line graphs
  • Pie charts

• Multivariate Displays:

  • Scatter plots
  • Bubble charts

• Hierarchical Structures:

  • Tree diagrams
  • Sunburst charts

• Network & Relational Data:

  • Node-link diagrams

• Geographical Visualizations:

  • Choropleth maps
  • Heat maps

7. Tools and Technologies

• Spreadsheets (Excel, Google Sheets)
• Programming Libraries (e.g., D3.js, matplotlib, seaborn)
• Dashboards (Tableau, Power BI)
• Custom-built solutions (using JavaScript or Python)

8. Common Pitfalls to Avoid

• Misleading scales
• Overuse of colors or 3D
• Information overload (too much data on one chart)
• Ambiguous labels or titles

9. Applications in Real-World Contexts

• Science & Research: visualizing experimental results
• Business Intelligence: dashboards and KPIs
• Journalism: storytelling with data
• Public Health: tracking disease outbreaks
• Environmental Monitoring: climate and pollution data

10. Historical Context & Evolution

• From William Playfair’s bar charts in the 18th century
• Through Florence Nightingale’s use of data in medical reform
• To modern interactive, real-time dashboards

Tema 1 — Introducción a la Visualización de Datos

Apuntes condensados para GitHub: definiciones claras, decisión de gráfico, principios de percepción y diseño.

0) Qué es y por qué importa

• Transforma datos complejos en representaciones visuales que facilitan comprensión, exploración, comunicación, toma de decisiones y detección de anomalías.
• Clave: comunicar la idea con la mínima fricción cognitiva.

mindmap
  root((Visualización de Datos))
    Mejora la comprensión
      Patrones
      Tendencias
      Relaciones
    Explorar
      Interactividad
      Filtros/Zoom
    Comunicar
      Mensaje claro
      Storytelling
    Decidir
      Problemas
      Oportunidades
      Tendencias
    Detectar
      Errores
      Outliers

Loading

---

1) Tipos de datos → qué puedo codificar

• Nominal: categorías sin orden (colores, países).
• Ordinal: categorías con orden, sin escala uniforme (bajo/medio/alto).
• Intervalo: orden y escala uniforme, sin cero absoluto (°C, °F).
• Razón: orden, escala uniforme y cero absoluto (altura, peso, ingresos).

Regla práctica: cuanto más “fuerte” la estructura del dato, más comparaciones numéricas fiables puedes mostrar (posición > longitud > área > color).

---

2) Objetivo → Exploratoria vs. Explicativa

flowchart LR
    A[¿Cuál es tu objetivo?] -->|Entender los datos| B[Exploratoria]
    A -->|Contar un hallazgo| C[Explicativa]

    B --> B1[Flexibilidad]
    B --> B2[Alta densidad]
    B --> B3[Interactividad]
    C --> C1[Mensaje evidente]
    C --> C2[Simplicidad]
    C --> C3[Narrativa + contexto]

Loading

• Exploratoria: para ti/equipo de datos; prueba rápida, filtros, detalle.
• Explicativa: para audiencia amplia; claridad, estética, anotaciones.

---

3) Percepción visual (qué capta el ojo sin esfuerzo)

• Atención limitada: guíala con novedad, intensidad, contraste, significado.

• Preatención (procesamiento rápido e inconsciente):

  • Posición en un eje (comparación cuantitativa top).
  • Longitud (barras/columnas).
  • Tono (categórico), luminancia/saturación (ordinal/cuantitativo).
  • Tamaño (cuantitativo, ojo: percepción no lineal de áreas).
  • Forma (categórico, poco robusta con muchas clases).

Principio KISS: usa la codificación más precisa disponible (posición > longitud > ángulo/área > color).

---

4) Tipos de gráficos (qué usar y cuándo)

mindmap
  root((Tipos de gráficos))
    Barras/Columnas
      Comparar categorías
      Agrupadas/Apiladas
    Líneas
      Serie temporal
      Tendencias/multiples series
    Pastel (con moderación)
      Partes de un todo (pocas categorías)
    Histograma
      Distribuciones continuas
      Forma: sesgo, bimodalidad
    Dispersión
      Relación x–y
      Patrones/outliers/cluster
    Área (y apilada)
      Magnitud acumulada en el tiempo
    Box Plot
      Mediana, cuartiles, outliers
      Comparar distribuciones por grupos
    Mapa de calor
      Matrices/Correlaciones/Densidades

Loading

Mini–tabla de elección (reglas rápidas)

Objetivo	Mejor primera opción	Alternativas
Comparar categorías	Barras (horizontales si etiquetas largas)	Columnas, dot plot
Evolución temporal	Línea	Área (si acumulado), columnas (si periodos discretos)
Distribución (1 variable)	Histograma	Densidad, box plot
Relación (2 variables)	Dispersión	Hexbin/heatmap (muchos puntos)
Partes de un todo	Barras apiladas	Pastel (≤6 categorías, diferencias marcadas)
Resumen por grupos	Box plot	Violin, strip + box

---

5) Micro–decisor de gráfico (árbol)

flowchart TD
  Q[¿Qué quieres mostrar?] --> T1[Comparar categorías]
  Q --> T2[Serie temporal]
  Q --> T3[Distribución 1 variable]
  Q --> T4[Relación entre 2 variables]
  Q --> T5[Partes de un todo / composición]

  T1 -->|Pocas categorías| B[Barras]
  T1 -->|Muchas| D[Dot plot / Barras horizontales]
  T2 -->|Continuo| L[Líneas]
  T2 -->|Acumulado| A[Áreas]
  T3 --> H[Histograma]
  T3 --> BX[Box/Violin (comparar grupos)]
  T4 --> S[Dispersión]
  T4 --> M[Heatmap/Hexbin (muchos puntos)]
  T5 --> BA[Barras apiladas]
  T5 --> P[Pastel (≤6 categorías)]

Loading

---

6) Diseño y estética (que ayuden, no estorben)

• Simplicidad: quita todo lo que no aporte (tintas grises, cuadrículas discretas).
• Claridad: títulos concretos, ejes etiquetados, leyendas breves.
• Coherencia: misma paleta/estilo en una pieza o dashboard.
• Armonía: jerarquía visual (tamaño/contraste para “lo importante”).
• Propósito: cada marca y color justifican su existencia.

Antipatrones: pastel con 12 porciones, 3D innecesario, doble eje no escalado, arcoíris categórico sin daltónico–safe.

---

7) Notas de codificación (preatentiva) en 1 fórmula

Pequeño apunte (MathJax) sobre escalas perceptuales: si mapeas valores a área (círculos), tu audiencia percibe el radio, no el área. Mantén la proporcionalidad:

• Área objetivo (A \propto v) ⇒ radio (r = \sqrt{A/\pi} = k\sqrt{v}).

Implementación práctica: cuando crees burbujas, escala el radio con (\sqrt{v}), no lineal con (v).

---

8) Plantillas reutilizables (Mermaid) para tu repo

8.1. “Guía rápida” en un cuadro

classDiagram
  class Dato{
    +Nominal
    +Ordinal
    +Intervalo
    +Razon
  }

  class Objetivo{
    +Comparar
    +Tendencia
    +Distribuir
    +Relacionar
    +Composicion
  }

  class Grafico{
    +Barras
    +Lineas
    +Histograma
    +Dispersión
    +BoxPlot
    +Area
    +MapaCalor
    +Pastel*
  }

  Dato <.. Grafico : condiciona codificación
  Objetivo <.. Grafico : decide tipo

Loading

• Usa pastel con criterio (pocas categorías, diferencias claras).

8.2. “Checklist” para publicar

flowchart LR
  A[¿Mensaje en el título?] --> B{Ejes/Unidades claros}
  B --> C{Leyenda necesaria?}
  C --> D{Color daltónico-safe?}
  D --> E{¿Se puede leer en móvil?}
  E --> F{Anotaciones del insight}
  F --> G[OK: publicar]

Loading

---

9) Mini–glosario operativo

• Preatentivo: atributos detectados “de un vistazo” (posición, longitud, color básico).
• Outlier: observación atípica respecto a la distribución.
• Storytelling: narrativa que guía lectura y destaca el insight.
• Percepción no lineal de área: agranda diferencias percibidas; usa con cuidado.

---

10) Snippets de MathJax útiles (por si los necesitas)

• Escala z (anotación frecuente al mostrar distribuciones): [ z = \frac{x - \mu}{\sigma} ]
• Tasa / proporción (rotular ejes con claridad): [ \text{tasa} = \frac{\text{eventos}}{\text{población}}\times 10^k ]

---

11) Lista DRY de decisiones (para reusar en issues/PRs)

• ¿Qué pregunta responde el gráfico?
• ¿La codificación más precisa posible para el dato?
• ¿El mensaje se entiende en 5 segundos?
• ¿Hay una anotación que explicite el insight?
• ¿Se puede eliminar algo sin perder claridad?

---