El flujo de los datos Libro digital - Social Data Ibero

Introducción a Observable Plot

¿Qué es Observable Plot?

Observable Plot es una biblioteca de JavaScript diseñada para crear visualizaciones de datos de forma declarativa (Observable, Inc., 2024). Este enfoque permite describir qué se desea visualizar, mientras que la biblioteca se encarga de los detalles técnicos relacionados con cómo se realiza la visualización.

Ventajas:

Estructura básica:

Todo gráfico en Observable Plot se construye a partir de la función:

Plot.plot({
  marks: [
    // Aquí van los elementos visuales
  ]
})

Componentes principales:

  1. Plot.plot(): función responsable de crear el gráfico completo
  2. marks: []: lista en la que se definen los elementos visuales que se mostrarán

¿Qué son las marks (marcas)?

Las marcas son los elementos visuales encargados de representar los datos. Constituyen los "bloques de construcción" fundamentales de cualquier visualización en Observable Plot.

Tipos de marcas comunes:

Cada tipo de marca resulta adecuado para distintos objetivos de análisis.

Visualización de una variable

La variable "life_expectancy" (expectativa de vida) puede representarse de múltiples formas visuales. En los siguientes ejemplos se utilizan exactamente los mismos datos; lo único que varía es la manera en que se representan gráficamente.

Histograma

Un histograma permite visualizar la cantidad de países cuya expectativa de vida se encuentra dentro de determinados rangos de valores.

Ver código Plot.plot histograma 
Plot.plot({
  marks: [
    Plot.rectY(
      datos,
      Plot.binX(
        { y: "count" },
        {
          x: "life_expectancy",
          fill: "#9B1C26",
        }
      )
    ),
    Plot.ruleY([0]),
  ],
})

¿Qué hace cada parte?

¿Qué indica este gráfico?

El histograma muestra que la mayoría de los países presentan una expectativa de vida situada entre los 70 y 80 años. En los extremos de la distribución se observa un número reducido de países con valores notablemente bajos (entre 50 y 60 años) o excepcionalmente altos (por encima de 85 años).

¿Cuándo utilizar histogramas?

Gráfico de trazos (Strip Plot)

En esta representación, cada país se visualiza como una línea vertical fina. Esto permite ver la distribución de los datos y dónde se concentran, preservando cada observación individual.

Ver código Plot.plot strip plot 
Plot.plot({
  height: 100,
  marks: [
    Plot.tickX(datos, {
      x: "life_expectancy",
      stroke: "#9B1C26",
      strokeOpacity: 0.3,
    }),
  ],
})

¿Qué hace cada parte?

¿Qué indica este gráfico?

Este gráfico permite observar cada país de manera individual y ver claramente dónde se concentran los datos: la zona entre 70 y 80 años aparece más oscura por la densidad de trazos superpuestos. Los países con valores atípicos (muy bajos o muy altos) se distinguen fácilmente en los extremos.

¿Cuándo utilizar gráficos de trazos?

Diagrama de caja (Box Plot)

Este tipo de gráfico resume la distribución completa de los datos mediante una caja acompañada de líneas. Su verdadero potencial se revela al comparar distribuciones entre grupos.

Ver código Plot.plot box plot 
Plot.plot({
  marks: [
    Plot.boxY(datos, {
      x: "continent",
      y: "life_expectancy",
    }),
  ],
})

¿Cómo interpretar este gráfico?

¿Qué indica este gráfico?

El diagrama permite comparar la expectativa de vida entre continentes. Se observa que Europa tiene una mediana alta con poca variación, mientras que África presenta valores más bajos y mayor dispersión. Este tipo de comparación sería difícil de hacer con un histograma.

¿Cuándo utilizar diagramas de caja?

Área bajo la curva

Esta representación corresponde a una versión suavizada del histograma, utilizada para mostrar la forma general de la distribución de los datos de manera continua.

Ver código Plot.plot área bajo la curva 
Plot.plot({
  marks: [
    Plot.areaY(
      datos,
      Plot.binX(
        { y: "count" },
        {
          x: "life_expectancy",
          fill: "#9B1C26",
          fillOpacity: 0.5,
          curve: "basis",
        }
      )
    ),
    Plot.ruleY([0]),
  ],
})

¿Qué hace cada parte?

¿Qué indica este gráfico?

Este gráfico transmite la misma información que un histograma, pero con una apariencia más fluida y continua. Resulta especialmente útil para resaltar la forma general de la distribución sin enfatizar los límites discretos de los intervalos.

¿Cuándo utilizar gráficos de área?

Visualización de dos variables

Los siguientes gráficos exploran la relación entre dos variables: una numérica contra otra numérica, o una categórica contra una numérica.

Gráfico de dispersión (Scatter Plot)

Los gráficos de dispersión permiten visualizar la relación entre dos variables numéricas. Cada punto representa un país posicionado según sus valores en ambos ejes.

Ver código Plot.plot scatter plot 
Plot.plot({
  marks: [
    Plot.dot(datos, {
      x: "infant_mortality",
      y: "life_expectancy",
      fill: "#9B1C26",
      fillOpacity: 0.6,
    }),
  ],
})

¿Qué hace cada parte?

¿Qué indica este gráfico?

Se observa una relación negativa clara: a mayor mortalidad infantil, menor expectativa de vida. Los países con baja mortalidad infantil tienden a tener vidas más largas, mientras que los que tienen alta mortalidad infantil se concentran en la parte inferior derecha.

¿Cuándo utilizar gráficos de dispersión?

Dispersión con línea de regresión

Al agregar una línea de regresión sobre un scatter plot, podemos cuantificar y visualizar la tendencia lineal entre las dos variables.

Ver código Plot.plot scatter con regresión 
Plot.plot({
  marks: [
    Plot.dot(datos, {
      x: "infant_mortality",
      y: "life_expectancy",
      fill: "#9B1C26",
      fillOpacity: 0.4,
    }),
    Plot.linearRegressionY(datos, {
      x: "infant_mortality",
      y: "life_expectancy",
      stroke: "#9B1C26",
      strokeWidth: 2,
    }),
  ],
})

¿Qué hace cada parte?

¿Qué indica este gráfico?

La línea de regresión confirma la tendencia negativa: por cada aumento en mortalidad infantil, la expectativa de vida disminuye de forma aproximadamente proporcional. La pendiente de la línea cuantifica esta relación.

¿Cuándo utilizar líneas de regresión?

Gráfico de barras verticales

Los gráficos de barras son fundamentales para comparar valores entre diferentes categorías. En este ejemplo filtramos los países de Sudamérica directamente dentro de la llamada al gráfico:

Ver código Plot.plot barras verticales 
Plot.plot({
  marks: [
    Plot.barY(
      datos.filter((d) => d.continent === "South America"),
      {
        x: "country",
        y: "life_expectancy",
        fill: "#9B1C26",
        sort: { x: "-y" },
      }
    ),
    Plot.ruleY([0]),
  ],
})

¿Qué hace cada parte?

¿Qué indica este gráfico?

Este gráfico facilita la comparación directa entre países, permitiendo identificar rápidamente cuáles presentan mayor o menor expectativa de vida dentro de Sudamérica.

¿Cuándo utilizar gráficos de barras?

Gráfico de barras horizontales

Las barras horizontales son particularmente útiles cuando los nombres de las categorías son largos o cuando se desea enfatizar el orden de los valores.

Ver código Plot.plot barras horizontales 
Plot.plot({
  marginLeft: 100,
  marks: [
    Plot.barX(
      datos.filter((d) => d.continent === "South America"),
      {
        y: "country",
        x: "life_expectancy",
        fill: "#9B1C26",
        sort: { y: "-x" },
      }
    ),
    Plot.ruleX([0]),
  ],
})

¿Qué hace cada parte?

¿Qué indica este gráfico?

La disposición horizontal permite leer los nombres de los países con mayor comodidad y facilita la comparación de valores que se extienden hacia la derecha. El ordenamiento de mayor a menor crea un ranking visual inmediato.

¿Cuándo utilizar barras horizontales?

Gráfico de paletas (Lollipop)

El gráfico de paletas es una alternativa moderna a las barras horizontales que utiliza una línea delgada con un punto terminal. Reduce la "tinta visual" y enfatiza la posición exacta del valor.

Ver código Plot.plot lollipop 
Plot.plot({
  marginLeft: 100,
  marks: [
    Plot.link(
      datos.filter((d) => d.continent === "South America"),
      {
        x1: 0,
        y1: "country",
        x2: "life_expectancy",
        y2: "country",
        stroke: "#9B1C26",
        sort: { y1: "-x2" },
      }
    ),
    Plot.dot(
      datos.filter((d) => d.continent === "South America"),
      {
        x: "life_expectancy",
        y: "country",
        fill: "#9B1C26",
        r: 5,
        sort: { y: "-x" },
      }
    ),
    Plot.ruleX([0]),
  ],
})

¿Qué hace cada parte?

¿Qué indica este gráfico?

Transmite la misma información que un gráfico de barras horizontales, pero con un aspecto más ligero. Al usar menos área de relleno, resulta más fácil comparar valores cercanos y detectar diferencias sutiles entre países.

¿Cuándo utilizar gráficos de paletas?

Visualización de tres o más variables

Los gráficos pueden representar múltiples variables simultáneamente usando canales visuales adicionales como tamaño y color.

Gráfico de burbujas (Bubble Chart)

Los puntos pueden variar en tamaño y color para representar variables adicionales, creando lo que se conoce como bubble chart (gráfico de burbujas).

Ver código Plot.plot bubble chart 
Plot.plot({
  marks: [
    Plot.dot(datos, {
      x: "infant_mortality",
      y: "life_expectancy",
      r: "population",
      fill: "continent",
      fillOpacity: 0.7,
      stroke: "white",
      strokeWidth: 0.5,
    }),
  ],
})

¿Qué hace cada parte?

¿Qué indica este gráfico?

Este gráfico permite visualizar cuatro variables simultáneamente: mortalidad infantil (eje X), expectativa de vida (eje Y), población (tamaño del punto) y continente (color). Se observa que los países africanos tienden a concentrarse en la zona de alta mortalidad y baja expectativa, mientras que los europeos se agrupan en el extremo opuesto.

¿Cuándo utilizar gráficos de burbujas?

Tabla de referencia completa

Tipo de gráfico Función Plot Variables necesarias Mejor para
Histograma Plot.rectY() + Plot.binX() 1 numérica Distribuciones
Strip plot Plot.tickX() 1 numérica Valores individuales, densidad
Diagrama de caja Plot.boxX() o Plot.boxY() 1 numérica + 1 categórica Comparar distribuciones entre grupos
Área Plot.areaY() + Plot.binX() 1 numérica Distribución continua
Scatter plot Plot.dot() 2 numéricas Relaciones bivariadas
Scatter + regresión Plot.dot() + Plot.linearRegressionY() 2 numéricas Confirmar tendencias lineales
Barras verticales Plot.barY() 1 categórica + 1 numérica Comparaciones
Barras horizontales Plot.barX() 1 categórica + 1 numérica Rankings, nombres largos
Lollipop Plot.link() + Plot.dot() 1 categórica + 1 numérica Rankings precisos, aspecto limpio
Burbujas Plot.dot() con r y fill 3+ variables Análisis multivariado
Líneas Plot.line() 2 numéricas (ordenadas) Series temporales

Esta taxonomía de tipos de gráficos se basa en la gramática de gráficos (Wilkinson, 2005), (Wickham, 2010).

Conclusiones de la lección

En esta primera lección se han presentado los conceptos fundamentales de Observable Plot y se ha explorado cómo una misma variable puede representarse mediante distintos enfoques visuales.

Conceptos clave

Observable Plot

Marcas (marks)

Tipos de visualización explorados

Reflexión final

No existe una única forma "correcta" de visualizar datos. La elección del tipo de gráfico depende de:

Un histograma puede ser ideal para mostrar distribuciones generales, mientras que un strip plot permite ver la densidad real de las observaciones. Un diagrama de caja brilla al comparar grupos, y un gráfico de burbujas permite explorar relaciones multivariadas. La clave está en comprender las fortalezas de cada tipo de visualización y elegir la más apropiada para la historia que se desea contar.

Próximo paso: En la Color y Estilos se explorará el sistema de color y estilos en Observable Plot, aprendiendo a personalizar la apariencia visual de los gráficos mediante propiedades como fill, stroke, opacidad y grosor de líneas.

Bibliografía

Observable, Inc. (2024). Observable Plot Documentation [Https://observablehq.com/plot/].
Wickham, H. (2010). A Layered Grammar of Graphics. Journal of Computational and Graphical Statistics, 19(1), 3–28. https://doi.org/10.1198/jcgs.2009.07098
Wilkinson, L. (2005). The Grammar of Graphics (2a ed.). Springer.