菜单
Guide for using Observable Plot, a JavaScript library for exploratory data visualization built on D3. Use this skill when creating charts, exploring data, or building visualizations with marks, scales, and transforms.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
ALWAYS invoke this skill as your FIRST action — before any Read, Write, Edit, or Bash — whenever a task involves Go in any way — creating or editing any `.go` file, `go.mod`, or `go test`; adding or changing handlers, structs, methods, interfaces, error handling, goroutines, channels, sqlc/database code, or gomponents views; or refactoring, reviewing, debugging, or testing Go. This is a hard requirement, not a suggestion — the user develops all Go through this skill, which encodes project-specific conventions (structure, error handling, testing, naming) that default Go habits violate. Do not start editing Go and consult it later — load it first. Skip only when no Go code is read or written (pure Python, shell, SQL, Dockerfiles, CI config, or conceptual Go questions with no code).
Use when you write or revise a long-form document an audience will read—documentation, a README, a how-to or user guide, a spec, a design or decision doc, a blog post, a proposal, an announcement, or a standalone report or summary written for a person. Such writing should be clear, concrete, and tight, so draft it from the start by Strunk's Elements of Style (active voice; definite, specific, concrete words; omit needless words) instead of first-draft sprawl. Do NOT fire for short or code-adjacent text—commit messages, PR descriptions, release notes or changelogs, error messages, UI strings, code comments, config, version bumps, quick internal scratch notes, or the implementation diary. These exclusions win even when the text reaches an audience: a release note, changelog, or PR description is a working artifact, not a document drafted for readers.
Guide for using git with specific preferences -- branch names without `feat/`/`hotfix/` prefixes, backticks around code identifiers in commit messages, asking about GitHub issues to reference before committing. Use this whenever you branch, commit, or write a commit message -- not just when explicitly asked to "commit". These conventions aren't in your default knowledge and you'll get them wrong without consulting this skill.
Present output one unit at a time instead of dumping a list or wall of text. Use when the user says "one at a time", "/one-at-a-time", "one thing at a time", "go one at a time", asks you to slow down, to stop the wall of text, or to stop dumping everything at once -- either to redo output you just gave, or to pace the rest of a task.
Guide for instrumenting and operating observable software systems. Use this skill whenever the user is adding or reviewing telemetry, instrumenting code with OpenTelemetry, working with traces/spans/metrics/logs/structured events, debugging production behavior, designing SLOs or alerts, setting up sampling or telemetry pipelines, choosing observability storage, or making code observable for humans or AI agents -- even if they don't say the word "observability". Triggers include "add tracing", "instrument this", "OTel/OpenTelemetry", "why is this slow in prod", "set up an SLO", "alert fatigue", "high cardinality", "structured logging", "wide events", and observability for LLM/agent applications.
Building, rendering, or editing any HTML or UI in a Go application means using gomponents — ALWAYS invoke this skill as your FIRST action, before any Read, Write, Edit, or Bash. This fires for any view, page, layout, component, form, table, navbar, footer, or list that renders to HTML; any function returning a `Node`; anything in the `html` package; and converting HTML or templates into Go. It is a hard requirement — the user writes all HTML through gomponents, a pure-Go component library whose conventions (dot imports, `Node` composition, `Map`/`If`/`Iff`, `Group`, HTML5 documents) ordinary Go and HTML habits get wrong. Load it even when the Go skill also applies. Skip only when no HTML or view code is touched (pure database, handler, or business logic; plain `.css`/`.js`/`.html` files; conceptual questions with no code).
| name | observable-plot |
| description | Guide for using Observable Plot, a JavaScript library for exploratory data visualization built on D3. Use this skill when creating charts, exploring data, or building visualizations with marks, scales, and transforms. |
| license | MIT |
Observable Plot is a JavaScript library for exploratory data visualization. It's built on D3 and provides a concise, declarative API for creating charts.
npm install @observablehq/plot
Or via CDN:
<script type="module">
import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm";
</script>
The main function that renders a visualization. Returns an SVG or HTML figure element.
Plot.plot({
marks: [
Plot.dot(data, {x: "weight", y: "height"})
]
})
| Option | Description | Default |
|---|---|---|
width | Outer width in pixels | 640 |
height | Outer height in pixels | auto |
margin | All margins | varies |
marginTop/Right/Bottom/Left | Individual margins | varies |
marks | Array of marks to render | required |
color | Color scale options | auto |
x, y | Position scale options | auto |
title, subtitle | Chart titles | none |
caption | Figure caption | none |
Plot expects tabular data as arrays of objects:
const data = [
{date: new Date("2024-01-01"), value: 100, category: "A"},
{date: new Date("2024-01-02"), value: 120, category: "B"}
];
Map data columns to visual properties:
Plot.dot(data, {
x: "date", // column name
y: "value", // column name
fill: "category", // color by category
r: 5 // constant radius
})
Plot.lineY(data, {x: "date", y: "value"}).plot()
Plot.barY(data, {x: "category", y: "value"}).plot()
Plot.dot(data, {x: "weight", y: "height", fill: "species"}).plot()
Plot.rectY(data, Plot.binX({y: "count"}, {x: "value"})).plot()
Plot.areaY(data, {x: "date", y: "value", fill: "steelblue"}).plot()
This skill includes detailed documentation for each feature:
marks/area.md - Area charts and stacked areasmarks/bar.md - Bar charts (horizontal and vertical)marks/dot.md - Scatter plots and bubble chartsmarks/line.md - Line chartsmarks/rect.md - Rectangles, histograms, heatmapsmarks/text.md - Text labels and annotationsmarks/rule.md - Reference linesmarks/cell.md - Heatmaps with ordinal dimensionsmarks/tip.md - Interactive tooltipsmarks/axis.md - Custom axesmarks/geo.md - Geographic/map visualizationsmarks/link.md - Connections between pointsmarks/arrow.md - Directed arrowsmarks/vector.md - Vector fieldsmarks/tick.md - Tick marksmarks/box.md - Box plotsmarks/frame.md - Frame decorationmarks/image.md - Image glyphsmarks/contour.md - Contour plotsmarks/density.md - Density estimationmarks/raster.md - Raster/heatmap imagesmarks/hexgrid.md - Hexagonal gridsmarks/waffle.md - Waffle chartsmarks/delaunay.md - Voronoi and Delaunaymarks/bollinger.md - Bollinger bandsmarks/difference.md - Difference chartsmarks/tree.md - Hierarchical treesmarks/auto.md - Automatic mark selectionmarks/linear-regression.md - Trend linesmarks/crosshair.md - Interactive crosshairsmarks/grid.md - Grid linestransforms/bin.md - Binning for histogramstransforms/group.md - Grouping categorical datatransforms/stack.md - Stacking for area/bar chartstransforms/dodge.md - Beeswarm plotstransforms/hexbin.md - Hexagonal binningtransforms/window.md - Moving averagestransforms/select.md - Selecting specific pointstransforms/normalize.md - Normalizing valuesfeatures/scales.md - Scale configurationfeatures/facets.md - Small multiplesfeatures/projections.md - Map projectionsfeatures/legends.md - Legend configurationfeatures/interactions.md - Interactive featuresfeatures/curves.md - Line interpolationfeatures/markers.md - Line markersfeatures/shorthand.md - Concise syntaxfeatures/intervals.md - Time intervalsPlot.plot({
y: {grid: true},
marks: [Plot.line(data, {x: "date", y: "value"})]
})
Plot.plot({
color: {legend: true},
marks: [Plot.dot(data, {x: "x", y: "y", fill: "category"})]
})
Plot.plot({
facet: {data, x: "region"},
marks: [Plot.dot(data, {x: "income", y: "lifeExpectancy"})]
})
Plot.plot({
marks: [
Plot.dot(data, {x: "x", y: "y", tip: true})
]
})
Plot.plot({
marks: [
Plot.areaY(data, {x: "date", y: "value", fill: "category"})
]
})
import * as Plot from "@observablehq/plot";
import { useRef, useEffect } from "react";
function Chart({ data }) {
const ref = useRef();
useEffect(() => {
const plot = Plot.plot({
marks: [Plot.dot(data, {x: "x", y: "y"})]
});
ref.current.append(plot);
return () => plot.remove();
}, [data]);
return <div ref={ref} />;
}
const plot = Plot.plot({
marks: [Plot.dot(data, {x: "x", y: "y"})]
});
document.body.append(plot);