¿Qué es Observable Framework?

Imagina que pudieras escribir un documento donde el texto, los datos y las visualizaciones interactivas convivieran en un mismo lugar, y que al publicarlo obtuvieras un sitio web rápido, moderno y sin necesidad de mantener un servidor. Eso es, en esencia, lo que ofrece Observable Framework (Observable, Inc., s/f): un generador de sitios estáticos de código abierto pensado para construir aplicaciones de datos, tableros analíticos e informes interactivos.

En este capítulo exploraremos de dónde viene, qué problemas resuelve y por qué lo elegimos como columna vertebral de este libro.

El problema: del dato a la narrativa web

Quien trabaja con datos conoce bien esta secuencia: se escribe un script en Python o R, se procesan tablas, se generan gráficos estáticos y, al final, se exportan como imágenes que terminan pegadas en una presentación o en un PDF. El resultado es un producto congelado en el tiempo: si los datos cambian, hay que repetir todo el proceso; si el lector quiere explorar un subconjunto, no puede hacerlo.

Los notebooks computacionales, como Jupyter, mejoraron esta situación al permitir que código y narrativa convivieran en un mismo documento. Compartir un notebook, sin embargo, suele requerir que quien lo recibe tenga instalado el mismo entorno, o bien que exista un servidor que ejecute el código en segundo plano. Herramientas como Streamlit o Dash resuelven la interactividad, pero a cambio exigen un servidor de Python en ejecución permanente. Quarto, por su parte, genera documentos estáticos elegantes, aunque su enfoque principal son los reportes y publicaciones académicas, no las aplicaciones de datos interactivas.

¿Y si existiera una herramienta que combinara lo mejor de estos mundos? Un entorno donde puedas escribir en Markdown, incrustar código que se ejecute en el navegador del lector, procesar datos con el lenguaje que prefieras y publicar el resultado como un sitio web estático que no dependa de ningún servidor. Esa herramienta existe, y se llama Observable Framework.

Una breve historia: de D3 a Observable Framework

Para entender Observable Framework conviene conocer la trayectoria que llevó a su creación. Es una historia de más de quince años de experimentación con la visualización de datos en la web, y la Figura 1.1 sintetiza los cuatro hitos que la articulan.

D3.js: el lienzo en blanco (2011)

En 2011, Mike Bostock, Vadim Ogievetsky y Jeffrey Heer publicaron D3 (Data-Driven Documents), una biblioteca de JavaScript que proponía algo radical: en lugar de encapsular la visualización dentro de una capa de abstracción opaca, D3 permitía manipular directamente el DOM del navegador, vinculando datos a elementos HTML y SVG (Bostock et al., 2011). Esta transparencia le dio a D3 una flexibilidad sin precedentes: cualquier visualización que el navegador pudiera renderizar, D3 podía construirla.

El precio de esa libertad fue una curva de aprendizaje pronunciada. Crear un gráfico de barras en D3 requería comprender selectores, escalas, ejes, transiciones y el ciclo enter-update-exit. Para profesionales de la visualización, D3 se convirtió en la herramienta de referencia; para analistas de datos que simplemente querían graficar una tendencia, resultaba intimidante.

Observable Notebooks: programar es explorar (~2017)

Consciente de esa brecha, Bostock creó Observable (observablehq.com), un entorno de notebooks reactivos que funcionaba directamente en el navegador. La idea central era poderosa: cada celda de código era una unidad reactiva (al modificar una variable, todas las celdas que dependían de ella se actualizaban automáticamente).

Este modelo tiene raíces profundas. En 1984, Donald Knuth propuso la programación literaria, un paradigma donde el código se escribe como un ensayo destinado a ser leído por humanos, no solo por máquinas (Knuth, 1984). Décadas después, Bret Victor llevó esta idea más lejos con las explicaciones explorables: documentos interactivos donde el lector no solo lee, sino que manipula parámetros y observa cómo cambian los resultados en tiempo real (Victor, 2011). Los notebooks de Observable materializaron ambas visiones en una plataforma accesible desde cualquier navegador.

Observable Framework: lo mejor de ambos mundos (2024)

Los notebooks resolvieron la exploración, pero tenían limitaciones para la producción: dependían de la nube de Observable, usaban una sintaxis propia de celdas y no se integraban fácilmente con los flujos de trabajo habituales de desarrollo (Git, editores locales, CI/CD).

En 2024, el equipo de Observable publicó Observable Framework, un generador de sitios estáticos de código abierto con licencia ISC (Observablehq/Framework, 2026). El cambio fue significativo: ahora las páginas se escriben en archivos Markdown locales, el JavaScript es estándar (sin sintaxis propietaria), los datos se procesan con cualquier lenguaje al momento de construir el sitio y el resultado se despliega en cualquier servidor web estático. La reactividad, esa chispa que hacía brillar a los notebooks, se conservó intacta.

¿Qué es Observable Framework?

Demos ahora una definición más precisa. Observable Framework es un generador de sitios estáticos de código abierto, diseñado específicamente para crear aplicaciones de datos, tableros analíticos e informes interactivos (Observable, Inc., s/f). Sus características principales son:

• Generador de sitios estáticos: al ejecutar el comando de construcción, el framework produce una carpeta con archivos HTML, CSS y JavaScript listos para publicarse en cualquier servidor web. No hay base de datos ni proceso en ejecución en segundo plano; el sitio resultante es tan rápido como una página HTML convencional.

• Markdown reactivo: cada página es un archivo Markdown donde los bloques de código JavaScript se ejecutan directamente en el navegador del lector. Si una variable cambia, todas las expresiones que dependen de ella se recalculan automáticamente.

• Políglota en datos: los data loaders, scripts que alimentan de datos al sitio, pueden escribirse en Python, R, SQL, JavaScript, shell o cualquier lenguaje que imprima resultados a la salida estándar. El framework los ejecuta al construir el sitio y almacena los resultados como archivos estáticos.

• JavaScript estándar: a diferencia de los notebooks de Observable, que usaban una sintaxis propia de celdas, Observable Framework emplea módulos ES estándar. Esto significa que puedes usar cualquier editor, depurador y herramienta de desarrollo que ya conozcas.

• Bibliotecas integradas: el framework incluye de serie Observable Plot (una biblioteca declarativa de alto nivel para crear gráficos) (Observable, Inc., 2024), D3 para visualizaciones personalizadas, e Inputs para controles interactivos como menús, sliders y campos de búsqueda.

La filosofía: comprender antes de codificar

El diseño de Observable Framework responde a una pregunta: ¿cómo reducir la distancia entre tener datos y comprenderlos? La respuesta se articula en torno a dos ejes.

Menos preparación

En muchas herramientas, antes de ver un primer gráfico hay que instalar dependencias, configurar un entorno, importar bibliotecas y escribir decenas de líneas de código de infraestructura. Observable Framework minimiza esa fricción: las bibliotecas de visualización están disponibles de forma inmediata, los datos se cargan con una sola línea y el resultado aparece al instante en el navegador.

Mejor rendimiento

Cuando un colega o un tomador de decisiones abre un tablero analítico, espera que la información aparezca de inmediato. Al precalcular los datos durante la construcción del sitio en lugar de consultarlos en tiempo real, Observable Framework garantiza tiempos de carga mínimos. El navegador del lector recibe datos ya procesados y solo se encarga de renderizar las visualizaciones.

La escalera de abstracción

Mike Bostock describe su visión como una escalera de abstracción. En el peldaño más alto están las interfaces visuales de alto nivel, como Observable Plot, que permiten crear gráficos con pocas líneas de código declarativo, siguiendo la tradición de la gramática de gráficos propuesta por Wilkinson (Wilkinson, 2005) y refinada por Wickham (Wickham, 2010). En los peldaños inferiores se encuentran D3 y la manipulación directa de SVG y Canvas, donde el control es total pero el esfuerzo es mayor.

Lo valioso de esta arquitectura es que el usuario puede descender por la escalera cuando necesita más control, sin abandonar el entorno. Comienza con una visualización de Plot, y si necesita una interacción especial o un diseño que Plot no contempla, desciende a D3 sin cambiar de herramienta ni de paradigma.

Esta fluidez entre niveles de abstracción conecta con lo que Heer y Shneiderman describen como dinámicas interactivas para el análisis visual: la capacidad de explorar, filtrar y reconfigurar visualizaciones de forma fluida como parte del proceso de comprensión (Heer & Shneiderman, 2012).

Arquitectura en una página

Sin entrar aún en los detalles técnicos, que abordaremos progresivamente a lo largo del libro, Observable Framework se sostiene sobre cuatro pilares. La Figura 1.2 muestra cómo se relacionan entre sí a lo largo del ciclo de vida del sitio.

1. Páginas en Markdown

Cada archivo .md dentro de la carpeta src/ se convierte en una página del sitio. El enrutamiento es automático: la estructura de carpetas define la navegación. Dentro de cada archivo conviven prosa, código y visualizaciones.

2. JavaScript reactivo

Los bloques de código delimitados por ```js se ejecutan en el navegador. Cuando defines una variable en un bloque, cualquier otro bloque que la referencie se actualiza automáticamente al cambiar su valor. Esta reactividad es la misma que hacía poderosos a los notebooks, pero ahora funciona en archivos locales que puedes versionar con Git.

3. Data loaders

Los scripts dentro de src/data/ son los encargados de alimentar al sitio con datos. Un archivo llamado paises.csv.py, por ejemplo, es un script de Python que imprime un CSV a la salida estándar. El framework lo ejecuta una vez al construir el sitio, almacena el resultado y lo pone a disposición de las páginas a través de la función FileAttachment.

4. Sitio estático

Al ejecutar npm run build, el framework compila todas las páginas y sus datos en una carpeta dist/ que contiene únicamente archivos estáticos. Este resultado se puede publicar en GitHub Pages, Netlify, un servidor Apache o cualquier servicio de hosting. No se requiere ningún proceso en ejecución para servir el sitio.

Para conocer la estructura de carpetas en detalle y aprender a configurar la navegación, consulta el capítulo Páginas, navegación y estructura.

Un primer vistazo

Antes de continuar con la teoría, veamos Observable Framework en acción. El código que aparece a continuación no es una imagen: se ejecuta en vivo, en esta misma página que estás leyendo.

Texto dinámico

Hoy es . Esta fecha no está escrita a mano: la calculó JavaScript al momento de cargar la página. Si la visitas mañana, mostrará la fecha de mañana.

Un gráfico en cinco líneas

Observable Plot permite crear visualizaciones con muy poco código. El gráfico de la Figura 1.3 se construye a partir de un arreglo de datos definido directamente en la página:

Plot.plot({
  width: 640,
  marginLeft: 140,
  style: { fontFamily: "Inter, system-ui, sans-serif", fontSize: "12px" },
  x: { grid: true, label: "Menciones →" },
  y: { label: null },
  marks: [
    Plot.barX(
      [
        { recurso: "Datos abiertos", menciones: 82 },
        { recurso: "Encuestas", menciones: 65 },
        { recurso: "Redes sociales", menciones: 54 },
        { recurso: "Sensores IoT", menciones: 41 },
        { recurso: "Registros admin.", menciones: 37 }
      ],
      { y: "recurso", x: "menciones", fill: "#E30A18", sort: { y: "-x" } }
    ),
    Plot.ruleX([0])
  ]
})

No hizo falta importar ninguna biblioteca ni configurar un entorno: Observable Plot está disponible de forma inmediata en cualquier página del framework.

Interactividad con un control deslizante

La reactividad se vuelve especialmente útil cuando se combina con controles interactivos. En la Figura 1.4, mueve el deslizador y observa cómo las barras y la línea de umbral se actualizan al instante.

const umbral = view(Inputs.range([0, 100], {
  label: "Umbral mínimo de menciones",
  step: 1,
  value: 30
}));

const fuentes = [
  { recurso: "Datos abiertos", menciones: 82 },
  { recurso: "Encuestas", menciones: 65 },
  { recurso: "Redes sociales", menciones: 54 },
  { recurso: "Sensores IoT", menciones: 41 },
  { recurso: "Registros admin.", menciones: 37 },
  { recurso: "Web scraping", menciones: 29 },
  { recurso: "APIs públicas", menciones: 23 },
  { recurso: "Bases internas", menciones: 18 }
];

Plot.plot({
  width: 640,
  marginLeft: 140,
  style: { fontFamily: "Inter, system-ui, sans-serif", fontSize: "12px" },
  x: { grid: true, label: "Menciones →", domain: [0, 90] },
  y: { label: null },
  marks: [
    Plot.barX(
      fuentes.filter(d => d.menciones >= umbral),
      { y: "recurso", x: "menciones", fill: "#E30A18", sort: { y: "-x" } }
    ),
    Plot.ruleX([umbral], { stroke: "#1D1D1B", strokeDasharray: "3,3", strokeWidth: 1.5 }),
    Plot.ruleX([0])
  ]
})

Al arrastrar el control, la variable umbral cambia de valor. Como el gráfico depende de esa variable, se redibuja automáticamente y muestra solo las fuentes que la superan. No escribimos ningún event listener ni función de actualización: la reactividad del framework se encarga de todo.

¿Cómo se compara con otras herramientas?

Observable Framework no es la única opción para comunicar datos en la web, pero ocupa un nicho particular. La Tabla 1.1 resume cómo se ubica respecto a las alternativas más habituales.

¿Qué aprenderemos en este libro?

Este libro recorre el camino completo desde la instalación hasta la publicación de un sitio de datos. Está organizado en cinco partes:

1. Fundamentos: qué es Observable Framework, cómo crear un primer proyecto, el poder del Markdown reactivo y la organización de páginas y navegación.

2. Datos: el corazón del framework: data loaders, procesamiento y transformación de datos, y consultas SQL directamente en el navegador.

3. Visualización con Observable Plot: desde los fundamentos de Plot hasta mapas, pasando por color, ejes, contexto y visualización múltiple.

4. D3 y más allá: el SVG como lenguaje visual, la introducción a D3 y cómo combinarlo con Plot.

5. Interactividad y componentes: controles reactivos para que el lector explore los datos a su propio ritmo, y componentes reutilizables para mantener el código organizado.

Al terminar, habrás construido un sitio de datos completo, desde la carga y transformación de información hasta la publicación de visualizaciones interactivas, usando las mismas herramientas con las que se escribió este libro.

Reflexión final

Observable Framework nace de más de quince años de experimentación con la visualización de datos en la web. Hereda la flexibilidad de D3, la reactividad de los notebooks y la solidez de los generadores de sitios estáticos modernos. El resultado es una herramienta que permite a analistas, científicos de datos y comunicadores concentrarse en lo que importa, entender y contar historias con datos, sin perderse en la infraestructura técnica.

A lo largo de este libro iremos desgranando cada pieza del framework: desde escribir una primera página hasta publicar un sitio completo con datos reales, gráficos interactivos y componentes reutilizables. La premisa es sencilla: si sabes escribir Markdown y tienes curiosidad por los datos, tienes todo lo necesario para empezar.

En el siguiente capítulo, Tu primer proyecto en 20 minutos, instalaremos Observable Framework y construiremos nuestro primer sitio de datos desde cero.