- 📁 references/
- 📄 SKILL.md
openchart
Generates OpenChart (https://github.com/tryopendata/openchart) chart, table, graph, and sankey specs from data, and guides editorial design decisions. Use when creating visualizations, building charts, rendering data tables, generating VizSpec JSON, creating network graphs, building sankey/flow diagrams, answering questions about OpenChart types and encoding rules, or making design decisions about chart type selection, color strategy, typography, annotations, and editorial framing. Also covers custom D3.js infographics for cases beyond declarative specs. --- # Data Visualization with OpenChart **Core concept:** Write a VizSpec JSON object, render with `<Chart>` / `<DataTable>` / `<Graph>` / `<Sankey>` (React/Vue/Svelte) or `createChart()` / `createTable()` / `createGraph()` / `createSankey()` (vanilla JS). The engine validates, compiles, and renders. Specs are plain JSON, no imperative drawing. See https://github.com/tryopendata/openchart for the rendering engine. **CSS is required.** OpenChart's stylesheet must be loaded for proper rendering (chrome, tables, tooltips, brand watermark). Framework imports handle this automatically, but CDN/standalone HTML needs an explicit `<link>`: ```html <link rel="stylesheet" href="https://esm.sh/@opendata-ai/openchart-vanilla/styles.css"> ``` See [rendering reference](references/rendering.md) for details. ## Chart Selection Decision Tree ``` Single value to highlight -> Use chrome.title as a big number display Temporal x-axis column? -> 1 series: line | 2-5 series: line + color | 6+: filter to top 5 Categorical + numeric? -> Ranked list: bar (horizontal) | Periodic (Q1, Jan): bar (vertical) | 2-6 composition: arc Two numeric columns? -> point (optional size/color for 3rd/4th dims) Categorical + series + num? -> stacked bar (use color for series) Distribution/spread? -> circle (strip plot) Nodes + edges / network? -> graph (force/radial/hierarchical layout) Flow between stages? -> sankey