xxd-data-viz

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

1. 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.
2. 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.
3. Build the palette from project colors only.
4. Add chart implementation details:
   • Background/grid/axis color.
   • Legend or direct labels.
   • Hover and selection color.
   • Missing data and disabled series.
5. 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.