How do I install the Canon Data Viz skill?

Run npx skillmds@latest add dragoon0x/canon-data-viz in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Canon Data Viz safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Canon Data Viz?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Canon Data Viz free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Canon Data Viz?

dragoon0x (@dragoon0x) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Canon Data Viz by dragoon0x — Agent Skill

Name: Canon Data Viz
Author: dragoon0x

Canon Data Viz

Use when designing dashboards, metrics displays, KPI widgets, sparklines, progress indicators, or any data-dense UI that isn't a standard chart. Covers the big-number pattern, sparklines, progress bars, gauges, metric comparison, and dashboard composition. Trigger when the user mentions dashboard, KPI, metric, progress bar, gauge, sparkline, or data display.

dragoon0x 5d33df3 3.5 KB Updated Sep 17, 2026

File contents

CANON · Data Visualization (Beyond Charts)

canon-charts covers standard chart types. This skill covers the smaller, denser data displays that fill dashboards and metric screens.

Big number + context

The most effective data display is a large number with a small piece of context.

$2.4M
Revenue · ↑12% vs Q3

Element	Spec
Number	28–48px, font-weight 700, `tabular-nums`
Label	12–14px, muted color, below or above
Trend indicator	↑↓ arrow or colored percentage, 13–14px
Sparkline (optional)	80–160px wide, 24–40px tall, below the number

Sparklines

Tiny line charts without axes. Show shape, not precision.

Width: 80–160px. Height: 24–40px.
No labels, no axes, no grid.
Color: single color for the line. Optional fill gradient below (10–20% opacity).
Hover: show exact value at the point.
End dot: highlight current/latest value.

Progress bars

Type	Use
Determinate (%)	Known total (file upload, form completion)
Indeterminate	Unknown duration (processing, searching)
Segmented	Multi-step with known stages
Circular	Compact display (loading, completion %)

Spec:

Height: 4–8px for linear, 40–80px diameter for circular.
Border radius: fully rounded.
Color: brand for progress, muted for track.
Percentage label: optional, but show it for determinate bars > 50px wide.
role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax.

Metric comparison

When showing before/after or period-over-period:

Revenue           Costs
$2.4M  ↑12%      $1.1M  ↓3%
vs $2.1M Q3      vs $1.13M Q3

Align numbers right for comparison.
Green for positive trends, red for negative (with ↑↓ arrows for colorblind safety).
Comparison row in smaller, muted text.
Use tabular-nums everywhere.

Dashboard composition

Most important metric: top-left (F-pattern entry).
Max 6–8 widgets per screen before it needs drill-down.
Consistent card heights per row.
Global timeframe selector (don't make each widget have its own).
Refresh indicator for live dashboards.

Anti-patterns

Anti-pattern	Why it fails
Giant chart where a big number would do	Overcomplicates a simple insight
Dashboard with 15 widgets	Information overload
Sparkline with axes	Defeats the purpose — too much detail for the space
Progress bar without ARIA	Screen readers don't announce progress
Red/green only for trends	Colorblind fail — add ↑↓ arrows
Each widget has its own date range	Confusing, not comparable

Audit checklist

Big numbers use tabular-nums and bold weight
Trend indicators pair color with ↑↓ arrows
Sparklines have no axes (shape only)
Progress bars have role="progressbar" + aria values
Dashboard ≤ 8 widgets before drill-down
Global timeframe selector
Muted comparison text for context

Sources

Stephen Few · Information Dashboard Design
Edward Tufte · sparkline concept
canon-charts for standard chart types
WCAG 2.2 · 1.4.1 Use of Color, 4.1.2 Name Role Value

---name: canon-data-vizdescription: Use when designing dashboards, metrics displays, KPI widgets, sparklines, progress indicators, or any data-dense UI that isn't a standard chart. Covers the big-number pattern, sparklines, progress bars, gauges, metric comparison, and dashboard composition. Trigger when the user mentions dashboard, KPI, metric, progress bar, gauge, sparkline, or data display.---# CANON · Data Visualization (Beyond Charts)`canon-charts` covers standard chart types. This skill covers the smaller, denser data displays that fill dashboards and metric screens.## Big number + contextThe most effective data display is a large number with a small piece of context.```$2.4MRevenue · ↑12% vs Q3```| Element | Spec ||---|---|| Number | 28–48px, font-weight 700, `tabular-nums` || Label | 12–14px, muted color, below or above || Trend indicator | ↑↓ arrow or colored percentage, 13–14px || Sparkline (optional) | 80–160px wide, 24–40px tall, below the number |## SparklinesTiny line charts without axes. Show shape, not precision.- Width: 80–160px. Height: 24–40px.- No labels, no axes, no grid.- Color: single color for the line. Optional fill gradient below (10–20% opacity).- Hover: show exact value at the point.- End dot: highlight current/latest value.## Progress bars| Type | Use ||---|---|| Determinate (%) | Known total (file upload, form completion) || Indeterminate | Unknown duration (processing, searching) || Segmented | Multi-step with known stages || Circular | Compact display (loading, completion %) |Spec:- Height: 4–8px for linear, 40–80px diameter for circular.- Border radius: fully rounded.- Color: brand for progress, muted for track.- Percentage label: optional, but show it for determinate bars > 50px wide.- `role="progressbar"` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax`.## Metric comparisonWhen showing before/after or period-over-period:```Revenue Costs$2.4M ↑12% $1.1M ↓3%vs $2.1M Q3 vs $1.13M Q3```- Align numbers right for comparison.- Green for positive trends, red for negative (with ↑↓ arrows for colorblind safety).- Comparison row in smaller, muted text.- Use `tabular-nums` everywhere.## Dashboard composition- Most important metric: top-left (F-pattern entry).- Max 6–8 widgets per screen before it needs drill-down.- Consistent card heights per row.- Global timeframe selector (don't make each widget have its own).- Refresh indicator for live dashboards.## Anti-patterns| Anti-pattern | Why it fails ||---|---|| Giant chart where a big number would do | Overcomplicates a simple insight || Dashboard with 15 widgets | Information overload || Sparkline with axes | Defeats the purpose — too much detail for the space || Progress bar without ARIA | Screen readers don't announce progress || Red/green only for trends | Colorblind fail — add ↑↓ arrows || Each widget has its own date range | Confusing, not comparable |## Audit checklist- [ ] Big numbers use `tabular-nums` and bold weight- [ ] Trend indicators pair color with ↑↓ arrows- [ ] Sparklines have no axes (shape only)- [ ] Progress bars have `role="progressbar"` + aria values- [ ] Dashboard ≤ 8 widgets before drill-down- [ ] Global timeframe selector- [ ] Muted comparison text for context## Sources- Stephen Few · Information Dashboard Design- Edward Tufte · sparkline concept- `canon-charts` for standard chart types- WCAG 2.2 · 1.4.1 Use of Color, 4.1.2 Name Role Value

Frequently asked questions