data-visualization
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseData Visualization
数据可视化
Create clear, purposeful visualizations that communicate data effectively.
创建清晰、有明确目标的可视化内容，有效传达数据信息。
Decision Framework
决策框架
1. Choose Output Format
1. 选择输出格式
| Format | Best For | Implementation |
|---|---|---|
| React Artifact | Interactive dashboards, real-time exploration, web delivery | Recharts + Tailwind |
| HTML Artifact | Standalone interactive charts, shareable files | Chart.js or D3 |
| Python → PNG/PDF | Print-ready graphics, reports, presentations | Matplotlib/Seaborn |
| Python → Interactive | Notebooks, exploratory analysis | Plotly |
| 格式 | 适用场景 | 实现方式 |
|---|---|---|
| React Artifact | 交互式仪表盘、实时探索、网页交付 | Recharts + Tailwind |
| HTML Artifact | 独立交互式图表、可共享文件 | Chart.js 或 D3 |
| Python → PNG/PDF | 可打印图形、报告、演示文稿 | Matplotlib/Seaborn |
| Python → Interactive | 笔记本、探索性分析 | Plotly |
2. Choose Chart Type
2. 选择图表类型
Comparison (values across categories):
- Bar chart: Few categories, discrete comparison
- Grouped bar: Multiple series comparison
- Lollipop: Cleaner alternative to bars
Trend (change over time):
- Line chart: Continuous data, multiple series
- Area chart: Emphasize magnitude/cumulative
- Sparkline: Compact trend indicator
Distribution (data spread):
- Histogram: Frequency distribution
- Box plot: Quartiles and outliers
- Violin: Distribution shape
Composition (parts of whole):
- Pie/Donut: 2-5 categories max, percentages
- Stacked bar: Composition over categories
- Treemap: Hierarchical composition
Relationship (correlation):
- Scatter plot: Two variables correlation
- Bubble chart: Three variables
- Heatmap: Matrix relationships
Geospatial:
- Choropleth: Regional data
- Point map: Location-based values
对比类（跨类别数值）：
- 条形图：类别较少时的离散对比
- 分组条形图：多系列对比
- 棒棒糖图：条形图的更简洁替代方案
趋势类（随时间变化）：
- 折线图：连续数据、多系列
- 面积图：强调数值规模/累计值
- 迷你折线图：紧凑的趋势指示器
分布类（数据分布）：
- 直方图：频率分布
- 箱线图：四分位数与异常值
- 小提琴图：分布形态
构成类（整体的组成部分）：
- 饼图/环形图：最多2-5个类别，展示百分比
- 堆叠条形图：跨类别的构成情况
- 树形图：层级化构成
关系类（相关性）：
- 散点图：两个变量的相关性
- 气泡图：三个变量
- 热力图：矩阵关系
地理空间类:
- 分级统计图：区域数据
- 点地图：基于位置的数值
Implementation Patterns
实现模式
React Artifact (Recharts)
React Artifact (Recharts)
jsx
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
const data = [
{ month: 'Jan', value: 400 },
{ month: 'Feb', value: 300 },
];
export default function Chart() {
return (
<ResponsiveContainer width="100%" height={400}>
<LineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 20 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
<XAxis dataKey="month" tick={{ fill: '#666' }} />
<YAxis tick={{ fill: '#666' }} />
<Tooltip />
<Line type="monotone" dataKey="value" stroke="#2563eb" strokeWidth={2} dot={false} />
</LineChart>
</ResponsiveContainer>
);
}jsx
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
const data = [
{ month: 'Jan', value: 400 },
{ month: 'Feb', value: 300 },
];
export default function Chart() {
return (
<ResponsiveContainer width="100%" height={400}>
<LineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 20 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
<XAxis dataKey="month" tick={{ fill: '#666' }} />
<YAxis tick={{ fill: '#666' }} />
<Tooltip />
<Line type="monotone" dataKey="value" stroke="#2563eb" strokeWidth={2} dot={false} />
</LineChart>
</ResponsiveContainer>
);
}Python Static Export
Python Static Export
python
import matplotlib.pyplot as plt
plt.style.use('seaborn-v0_8-whitegrid')
fig, ax = plt.subplots(figsize=(10, 6), dpi=150)
ax.plot(x, y, color='#2563eb', linewidth=2)
ax.set_title('Title', fontsize=14, fontweight='600', pad=20)
ax.set_xlabel('X Label', fontsize=11)
ax.set_ylabel('Y Label', fontsize=11)
ax.spines['top'].set_visible(False)
ax.spines['right'].set_visible(False)
plt.tight_layout()
plt.savefig('chart.png', bbox_inches='tight', facecolor='white')python
import matplotlib.pyplot as plt
plt.style.use('seaborn-v0_8-whitegrid')
fig, ax = plt.subplots(figsize=(10, 6), dpi=150)
ax.plot(x, y, color='#2563eb', linewidth=2)
ax.set_title('Title', fontsize=14, fontweight='600', pad=20)
ax.set_xlabel('X Label', fontsize=11)
ax.set_ylabel('Y Label', fontsize=11)
ax.spines['top'].set_visible(False)
ax.spines['right'].set_visible(False)
plt.tight_layout()
plt.savefig('chart.png', bbox_inches='tight', facecolor='white')HTML Artifact (Chart.js)
HTML Artifact (Chart.js)
html
<canvas id="chart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
new Chart(document.getElementById('chart'), {
type: 'bar',
data: {
labels: ['A', 'B', 'C'],
datasets: [{ data: [10, 20, 30], backgroundColor: '#2563eb' }]
},
options: { responsive: true, plugins: { legend: { display: false } } }
});
</script>html
<canvas id="chart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
new Chart(document.getElementById('chart'), {
type: 'bar',
data: {
labels: ['A', 'B', 'C'],
datasets: [{ data: [10, 20, 30], backgroundColor: '#2563eb' }]
},
options: { responsive: true, plugins: { legend: { display: false } } }
});
</script>Design Principles
设计原则
Color
色彩
- Sequential: Single hue gradient for ordered data (light→dark)
- Diverging: Two hues for data with meaningful center (blue←white→red)
- Categorical: Distinct hues for unordered categories (max 7-8)
- Colorblind-safe: avoid red/green pairs
- 连续型：单一色调渐变，用于有序数据（浅→深）
- 发散型：两种色调，用于有意义中心值的数据（蓝←白→红）
- 分类型：不同的鲜明色调，用于无序类别（最多7-8种）
- 色盲友好：避免红/绿组合
Typography
排版
- Title: 14-16px, semibold
- Axis labels: 11-12px, regular
- Annotations: 10-11px
- Sans-serif for clarity (Inter, system-ui)
- 标题：14-16px，半粗体
- 坐标轴标签：11-12px，常规字重
- 注释：10-11px
- 使用无衬线字体保证清晰度（Inter、system-ui）
Layout
布局
- Data-ink ratio: maximize information, minimize decoration
- White space: generous margins
- Alignment: left-align text, right-align numbers
- Grid: subtle, low contrast
- 数据墨水比：最大化信息占比，最小化装饰元素
- 留白：充足的边距
- 对齐：文字左对齐，数字右对齐
- 网格线：柔和、低对比度
Accessibility
可访问性
- Minimum contrast ratio 4.5:1
- Don't rely on color alone—use patterns, labels
- Alt text for static images
- Keyboard navigation for interactive
- 最小对比度4.5:1
- 不要仅依赖色彩——使用图案、标签辅助
- 静态图片添加替代文本
- 交互式内容支持键盘导航
Anti-Patterns
反模式
- 3D charts (distort perception)
- Pie charts with >5 slices
- Dual Y-axes (misleading)
- Truncated axes (exaggerate)
- Rainbow color scales
- Excessive gridlines
- 3D图表（扭曲视觉感知）
- 超过5个扇区的饼图
- 双Y轴（易产生误导）
- 截断坐标轴（夸大差异）
- 彩虹色阶
- 过多网格线
Dashboard Composition
仪表盘组合
- Hierarchy: Lead with the key metric
- Flow: Left-to-right, top-to-bottom
- Grouping: Related charts in proximity
- Consistency: Same color encoding throughout
- Filtering: Global filters affect all charts
- 层级结构：核心指标放在最显眼位置
- 视觉流：从左到右、从上到下
- 分组：相关图表放在邻近位置
- 一致性：全程使用相同的色彩编码
- 筛选：全局筛选器作用于所有图表
Data Preparation Checklist
数据准备检查清单
- Handle missing values
- Check for outliers
- Normalize if comparing scales
- Sort meaningfully
- Aggregate appropriately
- Round display values (2-3 digits)
- 处理缺失值
- 检查异常值
- 若对比不同尺度则进行标准化
- 进行有意义的排序
- 合理聚合数据
- 对显示数值进行取整（2-3位有效数字）
Resources
资源
See for detailed guidance:
references/- color-palettes.md: Curated color schemes for different data types
- chart-selection.md: Extended decision tree for complex cases
详见目录获取详细指南：
references/- color-palettes.md：为不同数据类型整理的配色方案
- chart-selection.md：针对复杂场景的扩展决策树