data-viz

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Create data visualizations that clarify rather than decorate. The goal is not to make data look impressive; it is to help users understand patterns, compare values, and make decisions.

Consult the data visualization reference for chart type selection, responsive patterns, accessible data tables, color-vision-friendly palettes, and interaction design. Consult the colorblindness UX reference when semantic states, chart palettes, or category colors must remain distinguishable under color-vision deficiencies. Consult the complex table UX reference when a data table is a better or complementary presentation to a chart.

创建清晰易懂而非装饰性的数据可视化。目标不是让数据看起来令人印象深刻，而是帮助用户理解模式、比较数值并做出决策。

有关图表类型选择、响应式模式、可访问数据表、色觉友好调色板及交互设计，请参阅数据可视化参考文档。当语义状态、图表调色板或类别颜色必须在色觉缺陷情况下仍可区分时，请参阅色盲UX参考文档。当数据表是比图表更好的展示方式或可作为图表的补充时，请参阅复杂表格UX参考文档。

MANDATORY PREPARATION

必备准备工作

Users start this workflow with

/data-viz

. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first. Additionally gather: what question the user is trying to answer with the data, who the audience is, and whether the data updates in real time or is static.

用户通过

/data-viz

启动此工作流。该技能激活后，加载 $frontend-design —— 它包含设计原则、反模式以及上下文收集协议。在继续操作前必须遵循该协议——如果尚无设计上下文，你必须先加载 $setup。此外还需收集：用户试图通过数据回答什么问题、目标受众是谁，以及数据是实时更新还是静态的。

Assess Visualization Needs

评估可视化需求

Understand the data story before choosing a chart:

What is the user trying to understand?
- Comparisons across categories (bar chart)
- Trends over time (line chart)
- Part-to-whole relationships (stacked bar or treemap, rarely pie)
- Distributions or ranges (histogram, box plot, scatter plot)
- Hierarchical structures (treemap, sunburst)
What is the data shape?
- Number of data points (a few values vs. thousands)
- Number of series or categories (single series vs. multi-series)
- Time granularity (daily, monthly, yearly)
- Whether the data is continuous or categorical
What is the context?
- Dashboard (at-a-glance summaries) vs. exploratory analysis (deep interaction)
- Mobile-first vs. desktop-first audience
- Real-time updates vs. static reports
- Accessibility requirements (screen readers, color-vision deficiencies)

在选择图表之前，先理解数据故事：

用户试图理解什么？
- 跨类别比较（柱状图）
- 随时间变化的趋势（折线图）
- 部分与整体的关系（堆叠柱状图或树状图，尽量不用饼图）
- 分布或范围（直方图、箱线图、散点图）
- 层级结构（树状图、旭日图）
数据的形态是什么？
- 数据点数量（少量数值 vs. 数千个数值）
- 系列或类别的数量（单系列 vs. 多系列）
- 时间粒度（日、月、年）
- 数据是连续型还是分类型
使用场景是什么？
- 仪表盘（一目了然的汇总） vs. 探索性分析（深度交互）
- 受众以移动端为主 vs. 以桌面端为主
- 实时更新 vs. 静态报告
- 可访问性要求（屏幕阅读器、色觉缺陷）

Visualization Dimensions

可视化维度

Chart Selection

图表选择

Match the chart to the data relationship, not the aesthetic preference.

Bar charts for comparing values across categories. Use horizontal bars when category names are long. Start the value axis at zero.

Line charts for trends over time. Limit to ~5 lines. Label lines directly at the end when possible.

Scatter plots for relationships between two variables. Add trend lines only when correlation is real. Label interesting outliers.

Histograms for frequency distributions. Use when the shape of the data (clustering, spread, skew) matters.

Treemaps for hierarchical part-to-whole relationships with many categories.

Avoid pie charts except when there are very few categories and one slice clearly dominates. Even then, prefer donut charts or stacked bars.

根据数据关系选择图表，而非根据审美偏好。

柱状图 用于跨类别比较数值。当类别名称较长时使用横向柱状图。数值轴必须从零开始。

折线图 用于展示随时间变化的趋势。线条数量限制在约5条以内。尽可能在线条末端直接标注。

散点图 用于展示两个变量之间的关系。仅在存在真实相关性时添加趋势线。为值得关注的异常值添加标注。

直方图 用于展示频率分布。当数据的分布形态（聚类、离散度、偏态）很重要时使用。

树状图 用于展示包含多个类别的层级式部分与整体关系。

避免使用饼图，除非类别极少且其中一个扇区明显占主导地位。即便如此，也优先选择环形图或堆叠柱状图。

Accessible Data Presentation

可访问的数据展示

Every chart must have an accessible alternative.

Provide a text summary of the main insight before the visualization
Include a properly marked-up data table as a fallback (
```
<caption>
```
,
```
<th scope="...">
```
)
Associate the chart with its summary using
```
aria-describedby
```
Ensure keyboard navigation between data points with audible value announcements
Do not rely on color alone; use pattern, texture, or direct labeling

每个图表都必须具备可访问的替代方案。

在可视化内容前提供主要洞察的文本摘要
包含标记正确的数据表作为备用方案（
```
<caption>
```
、
```
<th scope="...">
```
）
使用
```
aria-describedby
```
将图表与其摘要关联
确保可通过键盘在数据点之间导航，并伴有语音播报数值
不要仅依赖颜色；使用图案、纹理或直接标注

Color Strategy

颜色策略

Use color intentionally in data visualization.

Sequential scales: Single hue varying in lightness for magnitude (density, volume)
Diverging scales: Two hues with a neutral midpoint for deviation from center (variance, profit/loss)
Categorical scales: Maximally distinct hues with consistent luminance for distinct groups
Avoid red-green combinations; use blue-orange or purple-yellow instead
Test palettes with color-vision simulators

在数据可视化中有意识地使用颜色。

顺序色阶：单一色相的亮度变化，用于表示量级（密度、体积）
发散色阶：两种色相加中性中点，用于表示与中心的偏差（方差、盈亏）
分类色阶：亮度一致、差异最大的色相，用于区分不同组别
避免使用红绿色组合；改用蓝橙或紫黄组合
使用色觉模拟器测试调色板

Responsive Behavior

响应式行为

Charts must remain legible across viewport sizes.

Simplify legends and rotate labels on medium layouts
Consider switching chart types on narrow layouts (horizontal bars instead of vertical)
Use interaction to compensate: pinch-to-zoom, tap for exact values, summary views by default
Test truncation and wrapping behavior at minimum widths

图表在不同视口尺寸下都必须保持清晰易读。

在中等尺寸布局中简化图例并旋转标签
考虑在窄布局中切换图表类型（用横向柱状图替代纵向柱状图）
使用交互来弥补：捏合缩放、点击查看精确数值、默认显示摘要视图
在最小宽度下测试截断和换行行为

Interaction Design

交互设计

Click or tap legend items to toggle series visibility
Hover or focus to highlight a series and dim others
Brush or drag to select time ranges for zooming
Click a data point to reveal detail in a panel or adjacent view
Provide a "reset view" option after filtering or zooming
Update real-time charts without full re-renders; animate only changed elements

点击或轻触图例项可切换系列的可见性
悬停或聚焦时高亮某个系列并淡化其他系列
刷选或拖动选择时间范围以进行缩放
点击数据点可在面板或相邻视图中显示详情
在筛选或缩放后提供“重置视图”选项
实时图表更新时无需完全重渲染；仅为变化的元素添加动画

Dashboard Design

仪表盘设计

Dashboards combine multiple visualizations into an at-a-glance surface.

Layout principles:

Most important metrics at the top left (for left-to-right readers)
Group related charts visually with proximity and consistent sizing
Use consistent color coding across all charts for the same categories
Leave breathing room; dense dashboards overwhelm rather than inform

Interactivity:

Global filters (date range, category) should update all charts simultaneously
Clicking a chart element should update detail panels or related charts
Avoid auto-refreshing dashboards without clear indication; show "last updated" timestamp

仪表盘将多个可视化内容整合到一个可一目了然的界面中。

布局原则：

最重要的指标放在左上角（适用于从左到右阅读的用户）
通过邻近性和一致的尺寸在视觉上对相关图表进行分组
所有图表中相同类别使用一致的颜色编码
留出留白空间；过于密集的仪表盘不仅无法传递信息，还会造成认知负担

交互性：

全局筛选器（日期范围、类别）应同时更新所有图表
点击图表元素应更新详情面板或相关图表
避免在没有明确提示的情况下自动刷新仪表盘；显示“最后更新”时间戳

Anti-Patterns

反模式

Chart junk: Decorative 3D, gradients, shadows, and unnecessary gridlines obscure data
Dual y-axes: They invite misleading comparisons. Use side-by-side charts instead
Truncated y-axes: Starting above zero exaggerates differences and is visually deceptive
Too many data series: Charts with 10+ lines become unreadable. Group, filter, or split
Pie charts with many slices: Human perception of angle is poor
Missing data without explanation: Gaps should be visually distinct from zero values
Color without pattern backup: Colorblind users cannot distinguish purely color-coded series
Animated charts without static fallback: Auto-playing animations frustrate users who need stable reference points
Tooltips as the only data source: Touch and motor-impaired users may struggle to trigger them
Charts without context: A number without comparison, baseline, or unit is meaningless

图表垃圾：装饰性的3D效果、渐变、阴影和不必要的网格线会遮挡数据
双Y轴：容易导致误导性比较。改用并排图表
截断Y轴：起始值大于零会夸大差异，具有视觉欺骗性
数据系列过多：线条超过10条的图表会变得难以阅读。应进行分组、筛选或拆分
扇区过多的饼图：人类对角度的感知能力较差
缺失数据未加说明：数据缺口应在视觉上与零值区分开
无图案备份的颜色编码：色盲用户无法区分纯颜色编码的系列
无静态备用方案的动画图表：自动播放的动画会让需要稳定参考点的用户感到困扰
仅靠提示框展示数据：触屏用户和运动障碍用户可能难以触发提示框
无上下文的图表：没有对比、基线或单位的数值毫无意义