Data visualization

Skill jagreehal/jagreehal-claude-skills/skills/data-visualization

Chooses encodings, chart types, layouts, and rendering tech so visualizations communicate accurately and accessibly. Use this skill when building charts, graphs, or dashboards, picking SVG/Canvas/WebGL, or making visuals colorblind-safe and screen-reader accessible. Do not use when/for general UI layout without data graphics (use ui-design-principles) or backend analytics pipelines.From its SKILL.md

Install

npx -y skills add jagreehal/jagreehal-claude-skills --skill data-visualization

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.4 KB, as published. Nobody here has run it

Data Visualization

Critical rules

Visualization is communication — every visual element must serve understanding.
Prefer established algorithms/libraries (dagre, d3-force, ELK) over custom layout.
Encode by perceptual accuracy: position > length > angle > area > color.
Never rely on color alone; pair with shape, pattern, or labels.
Match rendering to scale: SVG <1000, Canvas 1000–10000, WebGL >10000.
Before chart selection catalogs or rendering/a11y detail, read the matching resource below.

Workflow

State the question the viz must answer and the data volume.
Before picking a chart type or encoding, read references/chart-selection.md.
Choose encoding/chart; reject pie-heavy, 3D, dual-axis, and non-zero bar baselines when they mislead.
Before implementing layout/render/a11y, read references/rendering-and-a11y.md.
Pick SVG/Canvas/WebGL and a layout library; keep layout off the main thread when heavy.
Add title/desc, keyboard support, table fallback; verify colorblind-safe encoding.

Resources

references/chart-selection.md — encoding hierarchy, chart-by-question, color, anti-patterns. Read when choosing a chart.
references/rendering-and-a11y.md — render thresholds, layouts, perf, a11y, libraries. Read when implementing.

Validation

Question → chart type selected accordingly
Data volume → rendering technology matches threshold
Established algorithm/library used (not custom layout)
Colorblind-safe: shape/pattern/label, not color alone
Accessible: title, description, table fallback, keyboard
Perceptually honest: position encoding, zero baseline, 2D, single axis meaning

Constraints

General UI without data graphics → ui-design-principles. Backend analytics pipelines are out of scope.
Adjacent: design-principles, documentation-standards.