El flujo de los datos Libro digital - Social Data Ibero

Color y Estilos Visuales

El sistema de color en Observable Plot

El color y los estilos visuales son herramientas fundamentales en la visualización de datos. No solo hacen que un gráfico sea más atractivo, sino que también pueden comunicar información adicional, dirigir la atención y mejorar la legibilidad.

En esta lección aprenderemos a controlar:

Gráfico base

Comenzaremos con un gráfico de dispersión de la lección anterior que muestra la relación entre la mortalidad infantil y la expectativa de vida:

Ver código Plot.plot gráfico base 
Plot.plot({
  marks: [
    Plot.dot(datos, {
      x: "infant_mortality",
      y: "life_expectancy"
    })
  ]
})

Este gráfico funciona, pero es demasiado básico y no muestra de manera sencilla lo que se quiere dar a entender. Vamos a mejorarlo paso a paso agregando propiedades de color y estilo.

Agregando color de relleno: fill

La propiedad fill controla el color interior de las formas (puntos, barras, áreas, etc.). Observable Plot acepta múltiples formas de definir colores:

1. Nombres de colores CSS

Existen más de 140 nombres de colores predefinidos en CSS, entre los que se encuentran "steelblue", "coral", "forestgreen", "crimson", "gold", "orchid", "teal", "salmon", "slateblue", ...

Ver código Plot.plot con fill nombre CSS 
Plot.plot({
  marks: [
    Plot.dot(datos, {
      x: "infant_mortality",
      y: "life_expectancy",
      fill: "steelblue"
    })
  ]
})

¿Qué cambió?

Se agregó la línea:

Ahora los puntos tienen color azul acero en lugar del negro predeterminado.

Cuándo usar nombres CSS:

2. Códigos hexadecimales

El formato hexadecimal permite especificar cualquier color usando el formato #RRGGBB.

Ver código Plot.plot con fill hexadecimal 
Plot.plot({
  marks: [
    Plot.dot(datos, {
      x: "infant_mortality",
      y: "life_expectancy",
      fill: "#4682b4"  // steelblue en hexadecimal
    })
  ]
})

Estructura del código hex:

Ejemplos:

Cuándo usar hex:

3. RGB y RGBA

El formato RGB especifica colores usando valores numéricos para rojo, verde y azul (0-255).

Ver código Plot.plot con fill RGB 
Plot.plot({
  marks: [
    Plot.dot(datos, {
      x: "infant_mortality",
      y: "life_expectancy",
      fill: "rgb(70, 130, 180)"  // steelblue en RGB
    })
  ]
})

RGBA agrega un cuarto valor para la opacidad (0-1):

Ver código Plot.plot con fill RGBA 
Plot.plot({
  marks: [
    Plot.dot(datos, {
      x: "infant_mortality",
      y: "life_expectancy",
      fill: "rgba(70, 130, 180, 0.6)"  // 60% opaco
    })
  ]
})

Cuándo usar RGB/RGBA:

Controlando la opacidad: fillOpacity

La propiedad fillOpacity controla la transparencia del relleno de forma independiente al color.

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

Valores:

¿Por qué usar opacidad?

La opacidad es especialmente útil cuando:

  1. Hay puntos superpuestos: permite ver puntos que están detrás de otros
  2. Se quiere mostrar densidad: áreas con más superposición se ven más oscuras
  3. Se busca un estilo visual más suave: hace que el gráfico se vea menos "pesado"
  4. Se necesita destacar ciertos elementos: combinando opacidades diferentes

Agregando bordes: stroke

La propiedad stroke define el color del borde (contorno) de las formas.

Ver código Plot.plot con stroke 
Plot.plot({
  marks: [
    Plot.dot(datos, {
      x: "infant_mortality",
      y: "life_expectancy",
      fill: "steelblue",
      fillOpacity: 0.6,
      stroke: "darkblue"
    })
  ]
})

¿Qué cambió?

Se agregó:

Los bordes ayudan a definir mejor los límites de cada forma, especialmente cuando hay superposición y se pueden usar los diferentes formatos para aplicar colores.

Controlando el grosor del borde: strokeWidth

La propiedad strokeWidth define el grosor del borde en píxeles.

Ver código Plot.plot con strokeWidth 
Plot.plot({
  marks: [
    Plot.dot(datos, {
      x: "infant_mortality",
      y: "life_expectancy",
      fill: "steelblue",
      fillOpacity: 0.6,
      stroke: "darkblue",
      strokeWidth: 2
    })
  ]
})

Guía de grosores

Opacidad del borde: strokeOpacity

Al igual que el relleno, los bordes también pueden tener opacidad controlada.

Ver código Plot.plot con strokeOpacity 
Plot.plot({
  marks: [
    Plot.dot(datos, {
      x: "infant_mortality",
      y: "life_expectancy",
      fill: "steelblue",
      fillOpacity: 0.6,
      stroke: "darkblue",
      strokeWidth: 2,
      strokeOpacity: 0.3
    })
  ]
})

Uso común:

Estilos de gráficos útiles

A continuación se presentan algunas combinaciones de estilos que funcionan bien en diferentes contextos:

Estilo 1: Minimalista

Sin bordes, color sólido, alta opacidad.

Ver código Plot.plot estilo minimalista 
Plot.plot({
  marks: [
    Plot.dot(datos, {
      x: "infant_mortality",
      y: "life_expectancy",
      fill: "#3b82f6",
      fillOpacity: 0.9,
      stroke: "none"
    })
  ]
})

Cuándo usar:

Estilo 2: Alta visibilidad

Borde oscuro contrastante, relleno semi-transparente.

Ver código Plot.plot estilo alta visibilidad 
Plot.plot({
  marks: [
    Plot.dot(datos, {
      x: "infant_mortality",
      y: "life_expectancy",
      fill: "steelblue",
      fillOpacity: 0.6,
      stroke: "#1e3a8a",
      strokeWidth: 1.5
    })
  ]
})

Cuándo usar:

Estilo 3: Transparente con borde prominente

Relleno muy transparente, borde visible.

Ver código Plot.plot estilo transparente con borde 
Plot.plot({
  marks: [
    Plot.dot(datos, {
      x: "infant_mortality",
      y: "life_expectancy",
      fill: "coral",
      fillOpacity: 0.3,
      stroke: "coral",
      strokeWidth: 2,
      strokeOpacity: 0.9
    })
  ]
})

Cuándo usar:

Estilo 4: Sin relleno (solo contorno)

Solo borde, sin relleno interior.

Ver código Plot.plot estilo solo contorno 
Plot.plot({
  marks: [
    Plot.dot(datos, {
      x: "infant_mortality",
      y: "life_expectancy",
      fill: "none",
      stroke: "forestgreen",
      strokeWidth: 2
    })
  ]
})

Cuándo usar:

Aplicando a otros tipos de gráficos

Las propiedades de color y estilo funcionan de manera similar en todos los tipos de marcas. Veamos ejemplos:

Histograma con estilos

Ver código Plot.plot histograma con estilos 
Plot.plot({
  marks: [
    Plot.rectY(datos, Plot.binX({y: "count"}, {
      x: "life_expectancy",
      fill: "coral",
      fillOpacity: 0.7,
      stroke: "white",
      strokeWidth: 2
    }))
  ]
})

Barras horizontales con estilos

Ver código Plot.plot barras con estilos 
Plot.plot({
  marks: [
    Plot.barX(
      datos.slice(10, 20),
      {
        y: "country",
        x: "life_expectancy",
        fill: "forestgreen",
        fillOpacity: 0.8,
        stroke: "darkgreen",
        strokeWidth: 1
      }
    )
  ]
})

Área con estilos

Ver código Plot.plot área con estilos 
Plot.plot({
  marks: [
    Plot.areaY(datos, Plot.binX({y: "count"}, {
      x: "life_expectancy",
      curve: "basis",
      fill: "mediumpurple",
      fillOpacity: 0.5,
      stroke: "purple",
      strokeWidth: 2
    }))
  ]
})

Mejores prácticas y accesibilidad

Contraste adecuado

Buenas prácticas: (Web Accessibility Initiative, 2018), (Nam Wook, 2021)

Evitar:

Saturación y fatiga visual

Buenas prácticas: (Few, 2012)

Evitar:

Resumen de propiedades

Propiedad Tipo Valores Función
fill Color Nombre, hex, rgb(a) Color del relleno interior
fillOpacity Número 0 (transparente) a 1 (opaco) Transparencia del relleno
stroke Color Nombre, hex, rgb(a), "none" Color del borde
strokeWidth Número 0+ píxeles Grosor del borde
strokeOpacity Número 0 (transparente) a 1 (opaco) Transparencia del borde

Conclusiones de la lección

En esta lección se ha explorado el sistema completo de color y estilos visuales en Observable Plot, partiendo de un gráfico básico y agregando propiedades progresivamente.

Conceptos clave

Propiedades de color

Propiedades de opacidad

Grosor de borde

Reflexión final

El color y los estilos no son solo decorativos: son herramientas de comunicación visual. La elección adecuada de colores, opacidades y bordes puede:

La clave está en encontrar el equilibrio entre estética y funcionalidad, siempre priorizando la claridad del mensaje.

Próximo paso: En la Configuración de Ejes se explorará la configuración de ejes, aprendiendo a personalizar etiquetas, cuadrículas, rangos y formatos para crear visualizaciones profesionales y fáciles de interpretar.

Bibliografía

Few, S. (2012). Show Me the Numbers: Designing Tables and Graphs to Enlighten (2a ed.). Analytics Press.
Nam Wook, K. (2021). Accessible Visualization: Design Space, Opportunities, and Challenges. Computer Graphics Forum, 40(3), 173–188. https://doi.org/10.1111/cgf.14298
Web Accessibility Initiative. (2018). Web Content Accessibility Guidelines (WCAG) 2.1 [Https://www.w3.org/WAI/WCAG21/quickref/].