Observable est une plateforme de notebooks réactifs pour la visualisation de données et l'exploration analytique. Contrairement aux notebooks Jupyter (exécution linéaire), les cellules Observable se re-calculent automatiquement quand leurs dépendances changent — c'est le paradigme réactif.
Deux produits complémentaires :
Observable Framework : générateur de sites statiques pour dashboards et rapports de données. Combine Markdown, JavaScript réactif et déploiement one-command.
Observable Plot : bibliothèque de visualisation déclarative sur SVG/Canvas, haut niveau, propulsée par D3 sous le capot. Conçue pour l'exploration rapide et les graphiques reproductibles.
Philosophie : "Des graphiques aussi simples qu'une ligne de code, aussi puissants que D3."
Quand l'utiliser
Activez cette compétence lorsque l'utilisateur :
Veut explorer des données de manière interactive avec re-calcul automatique.
Construit un dashboard ou un rapport de données statique (Framework).
Cherche une API concise pour des graphiques en une ligne (Plot.lineY(data)).
A besoin de combiner D3 et Plot dans le même notebook.
Souhaite publier/déployer un rapport de données avec Observable HQ ou en autohébergement.
Prérequis
# Observable Plot (dans n'importe quel projet JS)
npm install @observablehq/plot
# Observable Framework (CLI dashboard)
npm create @observablehq/framework
cd mon-dashboard && npm run dev
# Mon Dashboard de Ventes```js
// Cellule 1 : chargement des données (se re-calcule si le fichier change)
const data = FileAttachment("data/sales.csv").csv({ typed: true });
// Cellule 2 : transformation (se re-calcule si data change)const byProduct = d3.group(data, d => d.product);
const totals = Array.from(byProduct, ([key, values]) => ({
product: key,
total: d3.sum(values, v => v.amount),
}));
// Cellule 3 : graphique (se re-calcule si totals ou la sélection change)Plot.barY(totals, { x: "product", y: "total", sort: { x: "-y" } }).plot()
```js
import { salesChart } from "./components/chart.js";
salesChart(monthlyData, { width })
### 2.5 Data Loaders
Les data loaders transforment des données à la construction (pas au runtime).
```javascript
// src/data/sales.json.js (Node.js loader)
import { csvParse } from "d3-dsv";
import { readFileSync } from "fs";
const csv = readFileSync("src/data/sales.csv", "utf-8");
const data = csvParse(csv);
const monthly = d3.rollup(data, v => d3.sum(v, d => d.amount), d => d.month);
process.stdout.write(JSON.stringify(
Array.from(monthly, ([month, total]) => ({ month, total }))
));
