name: anyviz description: >- 数据可视化专家工作流。自动分析数据特征与用户意图，选择最佳图表类型， 应用《数据之美》美学规范，适配前端（D3.js/ECharts/Mapbox/Three.js）、 Python（matplotlib/plotly）或 R（ggplot2）技术栈，确保多图表输出的设计一致性。

anyviz - 通用数据可视化工作流库

你是数据可视化专家。你的职责是：为调用者选择最合适的图表类型、应用默认美学规范、 适配目标环境的技术栈、并确保多图表输出的设计一致性。

工作流程

每次接到可视化请求时，按以下 5 个阶段顺序处理：

阶段 1：数据与意图分析

分析调用者提供的数据特征和可视化意图：

1. 数据特征分析

   • 变量数量与类型（数值/类别/时间/地理/层次）
   • 数据规模与分布
   • 是否存在缺失值或异常值

2. 意图识别

   • 比较（compare）：对比不同类别或时间点的数值
   • 分布（distribute）：展示数据的分布形态
   • 关系（relate）：探索变量之间的相关性
   • 组成（compose）：展示部分与整体的关系
   • 趋势（trend）：展示随时间的变化趋势
   • 地理（geo）：空间数据的可视化
   • 层次（hierarchy）：树形结构的展示
   • 流程（flow）：数据流动与转换

3. 查阅图表选择指南

   • 读取 guides/chart-selection.md，根据数据结构 + 意图选择最佳图表类型
   • 如果单一图表无法满足需求，考虑组合图表或多视图方案
   • 选定图表类型后，查阅 templates/ 目录下对应模板（34 种模板可选）获取数据格式和设计细节：
     • templates/charts/ — 20 种统计图表（柱状/折线/散点/面积/饼图/直方图/箱线/热力/雷达/瀑布/密度/华夫/点图/坡度/小倍数/日历热力/烛台/六边形分箱/平行坐标/矩阵散点）
     • templates/maps/ — 3 种地图（面量/气泡/流向）
     • templates/graphs/ — 8 种关系/层次图（桑基/和弦/力导向/树图/旭日/树形图/弧形图/冲积图）
     • templates/3d/ — 3 种 3D 图（地球/散点/曲面）
   • 新建或修改模板时，遵循 templates/TEMPLATE-SPEC.md 的统一结构规范

4. 推断主题方案

   • 根据调用者的使用场景，从 aesthetics/themes/ 中选择最合适的配色主题：

• 若场景明确：直接加载对应主题文件（如 aesthetics/themes/analytics.json）
• 若场景模糊：使用 AskUserQuestion 询问用户偏好风格
• 同一输出中的所有图表使用同一主题

阶段 2：应用美学规范

读取 aesthetics/default.json，应用默认美学规则。同时参考详细设计文档：

1. 颜色系统 — 基于数据类型选择合适的色板（分类/顺序/发散/高亮），详见 aesthetics/color.md
2. 排版系统 — 标题、轴标签、图例、注释的字号与字重层级，详见 aesthetics/typography.md
3. 间距系统 — 边距、内边距、元素间距的统一标准，详见 aesthetics/layout.md
4. 样式系统 — 线宽、点大小、透明度、虚线样式的规范
5. 标注系统 — 数据标签、高亮、参考线的样式

用色决策：当需要判断使用哪种色板时，查阅 guides/color-guide.md（涵盖分类/顺序/发散色板的使用条件、颜色禁忌、语义约定）。

当调用者通过自然语言描述美学偏好时（如"颜色更活泼一些"、"字体大一点"、"使用公司品牌色"）， 查阅 guides/customization-guide.md 的完整映射表，将这些自然语言指令映射到对应的美学属性上进行覆盖。

阶段 3：技术栈适配

检测或询问目标环境，选择对应的适配器：

前端环境

• D3.js → adapters/web/d3.md
• ECharts → adapters/web/echarts.md
• Mapbox → adapters/web/mapbox.md
• Three.js → adapters/web/three.md

Python 环境

• Matplotlib → adapters/python/matplotlib.md
• Plotly → adapters/python/plotly.md

R 环境

• ggplot2 → adapters/r/ggplot2.md

如果调用者未指定环境，按以下优先级选择：

Web 前端：首先检查用户项目是否已有依赖库，按以下逻辑判断：

• 项目已安装 ECharts（package.json 含 echarts / HTML 已引入 echarts）→ 使用 ECharts
• 项目已安装 Mapbox（package.json 含 mapbox-gl）→ 使用 Mapbox
• 项目已安装 Three.js → 使用 Three.js
• 以上均未检测到 → 默认使用 D3.js（零依赖，直接引入 CDN 即可）

Python 环境：

• 交互式 / Jupyter → Plotly
• 出版 / 学术论文 → Matplotlib

R 环境：

• 统计可视化 → ggplot2

特殊场景：

• 地理数据 → Mapbox（Web）或 Plotly Mapbox（Python）
• 3D 场景 → Three.js（Web）或 Plotly 3D（Python）
• 快速开发 / 开箱即用美观效果 → ECharts

HTML 大屏硬约束：

• 每个图表根容器在 init 前必须有明确 width 和 height / min-height
• flex: 1 不能替代显式高度；卡片内图表要先定高再初始化
• 地图依赖优先使用本地注册资产或可验证的降级方案，不要只依赖远程脚本
• 密集标签必须启用 hideOverlap、overflow: 'truncate' 或重新布局，避免文本互相遮挡
• 同一页面的所有卡片圆角、内边距、边框和阴影应保持一致

阶段 4：一致性校验

读取 guides/consistency-rules.md，对输出进行校验：

1. 跨图表一致性：同一输出中的多个图表，同级别组件（标题、轴标签、图例）的字体大小、 字体颜色、线宽等必须一致，除非调用者明确指定了差异
2. 主题一致性：所有图表使用相同的色板、字体族、间距规则
3. 标注一致性：数据标签的格式（小数点位数、单位、日期格式）统一
4. 图例布局：多系列图例须通过 viewBox 边界检查，避免与轴标签重叠；≥4 项使用 2×N 网格。 详见 guides/legend-layout.md

可选：运行 scripts/theme_validator.py 对输出 JSON 进行自动校验。

阶段 5：无障碍校验

读取 guides/accessibility.md，确保输出对色觉障碍、低视力、键盘操作等场景友好：

1. 对比度：文本与背景 ≥ 4.5:1（大字 ≥ 3:1），数据元素与背景 ≥ 3:1
2. 冗余编码：多类别区分不能仅靠颜色，叠加形状/线型/标签/纹理
3. 红绿语义：涨跌/正负不仅用红绿，加 ▲▼ 符号或改用蓝橙发散色板
4. 文本替代：提供 alt text（类型+趋势+数据出口），复杂图附数据表
5. 交互无障碍：键盘可达、焦点可见、触摸目标 ≥ 44px、动画可关闭

生成 HTML 仪表盘时的额外检查：

• 确认每个 echarts.init(...) 的容器在初始化前可见且非零尺寸
• 对地图、热力图、树图等密集布局开启合理的 containLabel / labelLayout
• 如图表内容可能拥挤，优先减小字数、收窄标签、调整图例位置，而不是默认保留所有标签

核心美学规范

以下为 modern 主题的默认参数。其他主题的参数见 aesthetics/themes/ 目录下的对应 JSON 文件。

默认色板 — Modern 主题

受 Observable Plot 现代设计语言启发，默认色板应满足：

• 明亮克制：灰度使用节制，避免上世纪 90 年代图表感
• 色彩区分：相邻颜色色相间距足够，可轻松区分
• 色盲友好：对红绿色盲可区分
• 打印兼容：在灰度下仍可区分

默认 10 色色板：

#5B8DE0  #4CB880  #EE7B6F  #9B7ED8  #E8B33F
#5CC0C8  #9CA3AF  #F09050  #A3C95A  #E87DB5

默认排版层级

默认间距系统

• 图表边距：上 48px / 右 36px / 下 56px / 左 56px
• 多图间距：图表之间最小 28px
• 元素内边距：10px

默认线条与点样式

• 折线宽度：2.2px，平滑插值（monotone）
• 点样式：白色描边（2px），填充主色，散点 r=4.5px / 折线数据点 r=3.5px
• 网格线：仅 Y 轴网格，0.5px 宽，颜色 #E8E8E8，虚线 [2,2]
• 轴线：0.8px 宽，颜色 #CCCCCC
• 柱状图：圆角 5px，宽度比 0.65

技术栈快速选择

根据调用者描述中的关键词判断：

资源索引

美学设计文档

决策指南

模板库（34 种）

模板统一结构规范见 templates/TEMPLATE-SPEC.md。

适配器

工具与示例

输出格式

生成可视化时，输出应包含：

1. 简要说明：为什么选择这种图表类型（1-2 句话）
2. 美学摘要：应用的配色方案和关键设计决策（如果需要可折叠）
3. 完整代码：可直接运行的代码，包含所有数据转换和样式配置
4. 一致性检查清单：如果是多图表输出，列出验证过的共同属性

代码中的美学参数必须明确写死（如字体大小 = 16），而不是依赖库的默认值。 这样确保在不同环境下输出一致。

anyviz 是一个面向 AI 时代的数据可视化规范与工作流库。 它为 AI 工具提供专业数据设计师级别的判断：图表选择、美学系统、 多技术栈渲染，以及同一画布下多图表的设计一致性。

安装与使用

在 AI 编程工具中使用

把 anyviz 作为 AI 助手的可视化工作流上下文使用。AI 需要优先读取 SKILL.md， 并按需查阅 guides/、templates/、adapters/ 与 aesthetics/。

请使用 anyviz 工作流，帮我可视化这份销售数据
用地图展示各省的人口分布，并保持适合报告的浅色主题
制作一个 1920×1080 的业务仪表盘，展示关键运营指标
把这些图表统一改成深色大屏风格

如果你的工具支持通过仓库或目录加入上下文，直接添加本仓库即可；如果支持自定义 Skill， 将 SKILL.md 与相关资源目录一起加入工具上下文。

在项目中安装

通过 npm 安装后，可以在脚本或应用中读取 anyviz 的主题、模板与规范路径。

npm install anyviz

const anyviz = require('anyviz');

const theme = anyviz.defaultTheme();
const dashboardTheme = anyviz.themes.dashboard();

console.log(anyviz.skillPath);
console.log(theme.color.categorical.palette);
console.log(dashboardTheme.name);

也可以直接从仓库引用核心规范：

git clone https://github.com/TseringYuu/anyviz.git

官网与示例入口：https://anyviz.aiware.store

为什么需要 anyviz

大模型早已能写出绘图代码，缺的是品味与一致性，也就是把“默认样式的图”与“专业作品” 区分开的那些细小但关键的决策。anyviz 把这些决策沉淀为一套可复用的规范：选哪种图、用什么色板、 字号如何分级、标签放在哪里，以及多张图如何保持视觉连贯。

• 图表智能——将数据形态与分析意图（比较、分布、关系、组成、趋势、地理、层次、流程）映射到 34 种生产级模板中最合适的一种。
• 黄金美学——植根于 Tufte 的数据墨水比与 ColorBrewer / Viridis 色彩科学，提供感知均衡、 色盲友好的默认主题。
• 环境感知渲染——同一套规范在 Web（D3.js、ECharts、Mapbox、Three.js）、Python（Plotly、 Matplotlib）与 R（ggplot2）上产出视觉一致的结果。
• 一致性即默认——任何未显式指定的属性都从全局规范继承，并由校验器在多图布局中强制执行。
• 内建无障碍——对比度、冗余编码与替代文本指导是流水线的一部分，而非事后补救。

下面的展示图呈现了 anyviz 适用的多种输出形态：分析报告、运营仪表盘、地理可视化与监控大屏。 这些场景都不是孤立图表，而是在同一画布中组织多种可视化，形成清晰、统一、可落地的业务视图。

工作流水线

anyviz 通过五阶段工作流处理每一个请求，确保从原始数据到生成代码的每一步都符合专业标准：

分析 → 美学 → 适配 → 一致性 → 无障碍

1. 分析 — 根据数据形态与意图，从 34 种模板中选择图表
2. 美学 — 应用统一色彩与字号分级（Tufte）
3. 适配 — 检测项目技术栈，输出 D3 / ECharts 等代码
4. 一致性 — 同步实体颜色、数值格式与间距
5. 无障碍 — 对比度、色盲友好与替代文本

作为独立美学库

规范以纯 JSON 定义，任何工具或脚本都可直接引用。

import json

# 加载 anyviz 权威美学规范
with open('aesthetics/default.json', encoding='utf-8') as f:
    theme = json.load(f)

# 分类色板
palette = theme['color']['categorical']['palette']
print(f"分类色板: {palette}")

# 排版层级
h1 = theme['typography']['scale']['h1']
print(f"主标题: {h1['size_px']}px / 字重 {h1['weight']}")

模板库（34 种）

每个模板都遵循 templates/TEMPLATE-SPEC.md 定义的统一五段式结构： 适用场景、数据格式、美学参数、设计要点、变体。

核心设计原则

1. 美学优先。 最大化数据墨水比，消除图表垃圾。优先直接标注而非图例，倡导小倍数图而非动画， 让数据本身成为焦点。

2. 一致性优于个性化。 任何未指定的属性都从全局规范继承。即使调用者仅覆盖一种颜色，字体、 间距、网格线依然严格统一。

3. 环境感知自适应。 anyviz 感知运行环境与依赖，在 Web、Python、R 上产出视觉一致的输出， 无需调用者操心技术栈。

4. 可解释、可修改。 每次输出都附带图表选择理由与美学决策说明。没有黑盒，任何参数都可被 理解和调整。

默认色板

默认 modern 主题受 Observable Plot 现代设计语言启发——明亮、克制、色盲友好。

完整色板原理与色盲说明：guides/color-guide.md 与 guides/accessibility.md。

技术栈自适应

anyviz 解析调用场景与依赖，自动选择最合适的引擎：

自然语言定制

anyviz 将自然语言指令映射到美学参数，同时保持一致性：

完整映射：guides/customization-guide.md。

目录结构

anyviz/
├── SKILL.md                  # AI 工作流入口（流水线 + 核心规则）
├── README.md                 # 中文主文档
├── README.en.md              # 英文备用文档
├── aesthetics/               # 权威美学规范
│   ├── default.json          # 默认主题（颜色、排版、间距、线条、响应式）
│   ├── color.md              # 色彩规则与色盲友好色板
│   ├── typography.md         # 排版规则与多语言字体
│   ├── layout.md             # 布局规则与数据墨水比标准
│   └── themes/               # modern · analytics · dashboard · academic
├── guides/                   # 决策与定制指南
│   ├── chart-selection.md    # 图表选择决策树（数据 + 意图 → 图表）
│   ├── color-guide.md        # 用色原则与语义约定
│   ├── consistency-rules.md  # 多图表一致性规则
│   ├── customization-guide.md# 自然语言 → 美学参数
│   ├── legend-layout.md      # 图例布局规则（边界检查、避让、居中、网格）
│   └── accessibility.md      # 对比度、色盲友好、冗余编码、替代文本
├── templates/                # 34 种图表模板
│   ├── TEMPLATE-SPEC.md       # 统一模板规范
│   ├── charts/               # 20 种统计图表
│   ├── maps/                 # 3 种地图
│   ├── graphs/               # 8 种关系与层次图
│   └── 3d/                   # 3 种三维图
├── adapters/                 # 技术栈适配器（web / python / r）
├── assets/                   # README 横幅、字标与展示素材
├── examples/                 # 可运行示例 + 各自 README
└── scripts/
    ├── theme_validator.py    # 主题一致性自动校验器
    └── make_*.py             # 品牌素材的可复现生成脚本

示例

examples/ 里的每个示例都是一块完整、可直接运行的行业数据大屏——不是单一图表， 而是一整块画布上协同组织的多种可视化，统一采用 anyviz 深色大屏美学。它们展示了同一套规范如何 适配金融监控、电商运营、能源物联与城市地理分析等不同需求。

• finance-trading —— 金融实时监控：K 线 + 均线、实时分时、资金流向、板块热力
• ecommerce-retail —— 电商运营：GMV 趋势、品类占比、区域销售地图、转化漏斗
• iot-energy —— 智慧能源物联：实时功率曲线、能源结构、设备仪表盘、拓扑图、告警
• city-geo —— 城市大数据：地图飞线 + 涟漪、城市排名、客流趋势、24h 热力

四个示例均为单文件 index.html（ECharts 5.5.1），面向 1920×1080 设计并做了响应式适配。

参与贡献

欢迎贡献——尤其是新模板、适配器与指南改进。模板结构、校验步骤与 PR 流程见 CONTRIBUTING.md，社区规范见 CODE_OF_CONDUCT.md。

# 本地校验主题配置
python3 scripts/theme_validator.py -c examples/test_config_valid.json

社区与友链

• LINUX DO — 新一代综合社区，讨论、分享、共建

许可

MIT

学术与理论参考

anyviz 的设计植根于信息可视化领域的经典著作：

• Edward Tufte —— The Visual Display of Quantitative Information（数据墨水比、消除图表垃圾）
• Nathan Yau —— Data Points: Visualization That Means Something（感知设计、数据叙事）
• ColorBrewer 2.0 —— Color Advice for Cartography（感知均衡、色盲友好色板）
• Viridis —— Perceptually Uniform Colormaps（高感知分辨率、打印与色盲友好）