Dataviz
Use this skill before producing a chart, dashboard, map, or data visualization.
Workflow
- Identify the analytic task: comparison, trend, distribution, relationship,
ranking, part-to-whole, geography, or status monitoring.
- Choose the simplest chart form that answers that task. Read
references/choosing-a-form.md when the form is not obvious.
- Write the finding into the title, subtitle, axis label, or direct annotation.
A viewer should know what changed, what is high or low, or what decision the
chart supports.
- Pick colors from
references/palette.md, or validate any custom palette with
the script below.
- Check
references/anti-patterns.md before finalizing the design.
Palette Validation
Resolve paths relative to the skill base directory shown above this skill body.
Do not assume $QWEN_SKILL_ROOT is set for normal shell commands.
Run:
node <skill-base-directory>/scripts/validate_palette.js '#1d4ed8,#b45309,#166534' --mode light
Treat FAIL as a required palette change. Treat WARN as acceptable only when
the chart also uses labels, shape, texture, ordering, or another secondary
encoding.
Mark Rules
- Use categorical palettes for unordered groups; use sequential or diverging
ramps only for ordered values.
- Prefer direct labels over legends when the chart has a small number of series.
- Keep gridlines subtle and fewer than the data marks.
- Avoid dual axes unless both series share a clearly explained transformation.
- Do not rely on color alone for critical distinctions.
- Keep dashboards scan-friendly: align cards, use consistent number formats,
and reserve saturated color for important state changes.
1---2name: dataviz3description: Design guidance for charts, graphs, dashboards, maps, and data visualizations, including a local palette validator.4---5
6# Dataviz
7
8Use this skill before producing a chart, dashboard, map, or data visualization.
9
10## Workflow
11
121. Identify the analytic task: comparison, trend, distribution, relationship,
13 ranking, part-to-whole, geography, or status monitoring.
142. Choose the simplest chart form that answers that task. Read
15 `references/choosing-a-form.md` when the form is not obvious.
163. Write the finding into the title, subtitle, axis label, or direct annotation.
17 A viewer should know what changed, what is high or low, or what decision the
18 chart supports.
194. Pick colors from `references/palette.md`, or validate any custom palette with
20 the script below.
215. Check `references/anti-patterns.md` before finalizing the design.
22
23## Palette Validation
24
25Resolve paths relative to the skill base directory shown above this skill body.
26Do not assume `$QWEN_SKILL_ROOT` is set for normal shell commands.
27
28Run:
29
30```bash
31node <skill-base-directory>/scripts/validate_palette.js '#1d4ed8,#b45309,#166534' --mode light
32```
33
34Treat `FAIL` as a required palette change. Treat `WARN` as acceptable only when
35the chart also uses labels, shape, texture, ordering, or another secondary
36encoding.
37
38## Mark Rules
39
40- Use categorical palettes for unordered groups; use sequential or diverging
41 ramps only for ordered values.
42- Prefer direct labels over legends when the chart has a small number of series.
43- Keep gridlines subtle and fewer than the data marks.
44- Avoid dual axes unless both series share a clearly explained transformation.
45- Do not rely on color alone for critical distinctions.
46- Keep dashboards scan-friendly: align cards, use consistent number formats,
47 and reserve saturated color for important state changes.
gabrielmoreira