Agent skill

data-viz

Data visualization for charts and graphs. Use when user needs "画图/图表/可视化". Creates static PNG or interactive HTML charts from data.

Stars 65
Forks 25

Install this agent skill to your Project

npx add-skill https://github.com/JinFanZheng/kode-sdk-csharp/tree/main/examples/Kode.Agent.WebApiAssistant/skills/data-viz

SKILL.md

Mental Model

Visualization is choosing the right chart to answer a specific question. Chart type depends on data relationship, not aesthetics.

Chart Selection

Question Chart 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

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.

Output Formats

  • PNG: Static, high-quality for reports
  • HTML: Interactive (zoom, pan, hover)
  • SVG: Vector for editing

Filename: {chart_type}_{timestamp}.{ext} (ASCII only)

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

Python Environment

Auto-initialize virtual environment if needed, then execute:

bash
# Navigate to skill directory
cd skills/data-viz

# Auto-create venv if not exists
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.

References (load on demand)

For chart APIs and code templates, load: references/REFERENCE.md, references/templates.md

Expand your agent's capabilities with these related and highly-rated skills.

JinFanZheng/kode-sdk-csharp

email

Email operations via IMAP/SMTP. Trigger for inbox checking, reading, drafting, or sending emails. Requires `.config/email.json` setup.

65 25
Explore
JinFanZheng/kode-sdk-csharp

food

餐饮推荐/吃什么/哪里吃/咖啡酒吧甜品夜宵。用于用户问“附近有什么好吃的/餐厅推荐/人均多少/营业到几点/要不要预约/适合亲子或请客”等。 默认做“查询时间快照”(当地时间)并给来源链接;不编造店名/地址/营业时间/人均/评分;信息不足先问2-3个关键问题。

65 25
Explore
JinFanZheng/kode-sdk-csharp

itinerary

行程安排/行程规划(国内为主)。当用户要你“做行程/排几天怎么玩/把交通酒店景点串起来/做出差安排/把计划写进日历”时使用。 产出可执行的日程(含时间块),并在引用外部事实时附来源链接与来源当地时间;绝不编造。

65 25
Explore
JinFanZheng/kode-sdk-csharp

data-files

File router that routes uploaded files to appropriate analysis skills. CSV/Excel/JSON → data-analysis, Images → data-viz, PDF/HTML → data-base.

65 25
Explore
JinFanZheng/kode-sdk-csharp

featbit

FeatBit official documentation real-time Q&A assistant. Activate when user mentions "FeatBit", "feature flag", "feature toggle", or asks about FeatBit SDK integration, deployment, or configuration. Capabilities: Real-time fetching from docs.featbit.co and GitHub, supporting SDK integration, Docker/K8s deployment, feature flag configuration, A/B testing, and more.

65 25
Explore
JinFanZheng/kode-sdk-csharp

news

News briefing + verification workflow. Use when the user asks for news, headlines, daily briefing, “today's news”, “latest updates”, breaking news, or requests specific current numbers/events that require reliable sources and timestamps. Requires source links + local published time; NEVER fabricate.

65 25
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results