| name | xxd-data-viz |
| description | Create chart and data visualization palettes from Chinese traditional colors. Use when a user needs categorical, sequential, diverging, highlight, dashboard, map, ECharts, D3, Chart.js, or colorblind-aware data palettes with Chinese traditional color identity. |
xxd-data-viz
Purpose
Use this skill when colors must encode data. It should not turn a poster palette into a chart palette; it must choose colors by data meaning, distinguishability, ordering, and accessibility.
Pain Points This Solves
- Attractive palettes fail charts because categories are not distinct or values are not ordered by lightness.
- Designers mix categorical, sequential, and diverging color logic in one chart.
- Chart color often relies on hue alone, which weakens accessibility and makes legends harder to read.
Data Contract
- Use the bundled references inside this skill:
references/chinese-color-master-list.md: full 742-color Markdown source list.references/chinese-color-harmony.csv: complete machine-readable harmony table for all 742 colors.references/chinese-color-harmony.md: Markdown version of the same harmony relationships.
- Do not treat all harmony colors as chart-ready; validate distinctness or ordering for the chart mode.
- Do not rely on hue alone. Add label, order, pattern, stroke, marker shape, direct labeling, or interaction guidance when needed.
Chart Mode Workflow
- Identify data meaning before picking colors:
- Categorical: unrelated groups.
- Sequential: low to high values.
- Diverging: two directions around a meaningful midpoint.
- Highlight: one or two emphasized series against quiet context.
- Dashboard semantic: success, warning, danger, info, selected, neutral.
- Choose selection criteria:
- Categorical: maximize hue and lightness separation.
- Sequential: monotonic lightness is more important than poetic harmony.
- Diverging: balance perceived strength on both sides and reserve a neutral midpoint.
- Highlight: keep background series quiet and the target unmistakable.
- Build the palette from project colors only.
- Add chart implementation details:
- Background/grid/axis color.
- Legend or direct labels.
- Hover and selection color.
- Missing data and disabled series.
- If requested, output ECharts, D3, Chart.js, or CSV arrays.
Output Shape
- Data context: chart type, series count, background, data meaning.
- Mode decision: categorical, sequential, diverging, highlight, or semantic.
- Palette table: order or series, color name, HEX, role, reason.
- Usage rules: legend, labels, grid, hover, selection, missing data.
- Accessibility notes: where labels, markers, strokes, or patterns are required.
- Optional code in the requested chart format.
For charts with more than 12 categories, recommend grouping, sorting, filtering, or interaction rather than forcing more colors.
