# Xxd Data Viz

> 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.

- **Type:** Skill
- **Install:** `agentstack add skill-jiangnan030-del-pfc-codex-skills-xxd-data-viz`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [jiangnan030-del](https://agentstack.voostack.com/s/jiangnan030-del)
- **Installs:** 0
- **Category:** [Data & Analytics](https://agentstack.voostack.com/c/data-and-analytics)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [jiangnan030-del](https://github.com/jiangnan030-del)
- **Source:** https://github.com/jiangnan030-del/pfc-codex-skills/tree/main/skills/xxd-data-viz

## Install

```sh
agentstack add skill-jiangnan030-del-pfc-codex-skills-xxd-data-viz
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

- This public package is self-contained in `SKILL.md`; no external color-table files are required.
- Use the proven palettes and color-selection rules documented below as the authoritative contract.
- Do not treat poetic color harmony as chart-ready by default; 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.

## Proven Palette: 3D UCS Surface + Signed Error

Use this palette when a 3D surface encodes a continuous UCS value and lollipop
markers encode signed model error:

```python
from matplotlib.colors import LinearSegmentedColormap

VALUE_CMAP = LinearSegmentedColormap.from_list(
    'ucs_zhongguo_seq',
    [
        '#003152',  # 普鲁士蓝, lowest value
        '#1661AB',  # 靛青
        '#2376B7',  # 花青
        '#1E9EB3',  # 翠蓝
        '#57C3C2',  # 石绿
        '#B6D7A8',  # 松花
        '#F8C471',  # 缃绮
        '#FED71A',  # 佛手黄, highest value
    ],
    N=256,
)

POS_BALL = '#D92121'  # 朱砂红, positive error / over-prediction
POS_STEM = '#A61B29'  # 苋菜红
NEG_BALL = '#1A94BC'  # 钴蓝, negative error / under-prediction
NEG_STEM = '#15559A'  # 海涛蓝
COL_SPINE = '#2C2C2C'
COL_GRID = '#DDDDDD'
COL_TEXT = '#1A1A1A'
COL_BG = '#FFFFFF'
```

Usage rules:

- Treat the surface as sequential data; map low-to-high values through the full
  blue-cyan-green-yellow ramp.
- Treat signed model error as diverging semantic glyph color: warm red for
  over-prediction and cool blue for under-prediction.
- Add shape/depth cues, not only hue: use lollipop direction, cylinder/sphere
  glyphs, legend labels, and an overall error range.
- Avoid per-point numeric labels when many lollipops are present; they obscure the
  surface and reduce accessibility.

## Required Inputs

Ask for these if missing:

- chart type and data meaning: categorical, sequential, diverging, highlight, semantic dashboard, map, or interaction state;
- number of series/classes and background color;
- accessibility constraints such as colorblind-safe, grayscale print, direct labels, markers, or patterns;
- target implementation format, if any: Matplotlib, ECharts, D3, Chart.js, CSS, JSON, or CSV.

## Output Contract

Return a palette decision that includes:

- data context and chosen palette mode;
- ordered color list with Chinese color name, HEX value, role, and reason;
- usage rules for axes, grid, labels, legend, hover/selection, missing data, and disabled states;
- accessibility notes and optional implementation code in the requested format.

## Local Contents

This lightweight skill keeps its reusable palette rules, proven UCS/error palette, input contract, and output contract entirely in this `SKILL.md`.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [jiangnan030-del](https://github.com/jiangnan030-del)
- **Source:** [jiangnan030-del/pfc-codex-skills](https://github.com/jiangnan030-del/pfc-codex-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-jiangnan030-del-pfc-codex-skills-xxd-data-viz
- Seller: https://agentstack.voostack.com/s/jiangnan030-del
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.