Run any Skill in Manus with one click

canon-data-viz

Stars4

Forks0

UpdatedApril 18, 2026 at 06:53

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

Dragoon0x

Dragoon0x/canon

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Graphic DesignersArts, Design, Entertainment, Sports, and Media Occupations·SOC 27-1024

SKILL.md

readonly

name	canon-data-viz
description	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 + 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

More from this repository

same repository

canon-brand-voice

Dragoon0x/canon

Use when defining or auditing a product's written voice — the consistent personality across all UI copy. Covers voice vs tone, voice attribute definition, do/don't tables, and how to keep AI-generated copy on-brand. Trigger when the user mentions brand voice, tone of voice, writing style guide, copy guidelines, or product personality.

2026-04-184

canon-bundle-size

Dragoon0x/canon

Use when auditing or reducing JavaScript and CSS bundle sizes, setting performance budgets, choosing lighter alternatives to heavy libraries, configuring tree shaking, code splitting, and lazy loading. Trigger when the user mentions bundle size, JavaScript size, tree shaking, code splitting, lazy loading, or performance budget.

2026-04-184

canon-color-blindness

Dragoon0x/canon

Use when designing or auditing for color vision deficiency — ensuring that color is never the only visual signal, checking charts and status indicators, picking colorblind-safe palettes, and testing against deuteranopia, protanopia, and tritanopia simulations. Trigger when the user mentions color blindness, color vision, CVD, deuteranopia, protanopia, accessibility color, or color-only signal.

2026-04-184

canon-content-strategy

Dragoon0x/canon

Use when planning content hierarchy, information density, content-first design, microcopy systems, or editorial patterns. Covers the content-before-design principle, content inventory, progressive disclosure, scannability, and content governance. Trigger when the user mentions content strategy, content hierarchy, information architecture, microcopy, or editorial design.

2026-04-184

canon-cursors

Dragoon0x/canon

Use when designing or auditing cursor behavior — matching cursor shape to affordance, custom cursors, drag cursors, resize cursors, and the hover+cursor pairing rule. Trigger when the user mentions cursor, pointer, mouse cursor, drag cursor, or resize handle.

2026-04-184

canon-dark-mode

Dragoon0x/canon

Use when designing, auditing, or implementing dark mode. Covers lightness inversion (not hue shift), elevation via lightness not shadow, surface stacking, contrast rechecking, and the prefers-color-scheme media query. Trigger when the user mentions dark mode, dark theme, night mode, theme toggle, or color scheme.

2026-04-184

name	canon-data-viz
description	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 + 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