Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
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 }))
));
