Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
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 }))
));
