data-viz

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Mental Model

思维模型

Visualization is choosing the right chart to answer a specific question. Chart type depends on data relationship, not aesthetics.
可视化的核心是选择合适的图表来解答特定问题。图表类型取决于数据间的关系,而非美观性。

Chart Selection

图表选择

QuestionChart Type
Trends over time?Line chart
Compare categories?Bar chart
Show distribution?Histogram, box plot
Relationship between variables?Scatter plot
Parts of whole?Pie, stacked bar
2D patterns?Heatmap
Financial data?Candlestick, OHLC
问题图表类型
展示随时间变化的趋势?折线图
对比不同分类数据?柱状图
呈现数据分布情况?直方图、箱线图
展示变量间的关系?散点图
展示整体与部分的占比?饼图、堆叠柱状图
呈现二维数据模式?热力图
处理金融数据?K线图、OHLC图

Anti-Patterns (NEVER)

反模式(绝对禁止)

  • Don't use Chinese characters anywhere in charts - use English for labels, titles, legends, data labels
  • Don't use Chinese characters in filenames (ASCII only)
  • Don't pick wrong chart type for the question
  • Don't overload with data → aggregate or sample
  • Don't forget labels, title, legend
  • Don't use poor colors (colorblind-safe palettes)
Chart language: Always use English (titles, axes, legends, labels) to avoid font rendering issues.
  • 图表中禁止使用任何中文字符——标签、标题、图例、数据标签均需使用英文
  • 文件名中禁止使用中文字符(仅允许ASCII字符)
  • 不得为问题选择错误的图表类型
  • 避免数据过载→需进行聚合或抽样处理
  • 不要遗漏标签、标题和图例
  • 避免使用不合适的配色(需使用色盲友好型调色板)
图表语言规范:始终使用英文(标题、坐标轴、图例、标签),以避免字体渲染问题。

Output Formats

输出格式

  • PNG: Static, high-quality for reports
  • HTML: Interactive (zoom, pan, hover)
  • SVG: Vector for editing
Filename:
{chart_type}_{timestamp}.{ext}
(ASCII only)
  • PNG:静态高清格式,适用于报告
  • HTML:可交互式(支持缩放、平移、悬停查看详情)
  • SVG:矢量格式,适用于编辑
文件名规则:
{chart_type}_{timestamp}.{ext}
(仅允许ASCII字符)

Workflow

工作流程

  1. Ask: What's the question? What story to tell?
  2. Load data from CSV/JSON (or data-analysis output)
  3. Choose chart type based on question
  4. Create Python script and execute using virtual environment:
    .venv/bin/python script.py
  5. Return file path to user
  1. 询问需求:用户的核心问题是什么?需要传递什么数据故事?
  2. 加载数据:从CSV/JSON文件(或数据分析结果)中加载数据
  3. 选择图表类型:根据用户的核心问题选择合适的图表类型
  4. 创建并执行Python脚本(使用虚拟环境):
    .venv/bin/python script.py
  5. 返回结果:将生成的文件路径提供给用户

Python Environment

Python环境

Auto-initialize virtual environment if needed, then execute:
bash
undefined
若需要则自动初始化虚拟环境,然后执行脚本:
bash
undefined

Navigate to skill directory

导航至技能目录

cd skills/data-viz
cd skills/data-viz

Auto-create venv if not exists

若虚拟环境不存在则自动创建

if [ ! -f ".venv/bin/python" ]; then echo "Creating Python environment..." ./setup.sh fi
if [ ! -f ".venv/bin/python" ]; then echo "Creating Python environment..." ./setup.sh fi

Execute script

执行脚本

.venv/bin/python your_script.py

The setup script auto-installs: matplotlib, seaborn, plotly, pandas with Chinese font support.
.venv/bin/python your_script.py

初始化脚本会自动安装:matplotlib、seaborn、plotly、pandas,并配置中文字体支持。

References (load on demand)

参考资料(按需加载)

For chart APIs and code templates, load:
references/REFERENCE.md
,
references/templates.md
如需查看图表API和代码模板,请加载:
references/REFERENCE.md
references/templates.md