visualization
Knowledge about pyecharts chart creation, HTML report generation, and visualization best practices
Best use case
visualization is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Knowledge about pyecharts chart creation, HTML report generation, and visualization best practices
Teams using visualization should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/visualization/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How visualization Compares
| Feature / Agent | visualization | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Knowledge about pyecharts chart creation, HTML report generation, and visualization best practices
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Visualization Skill
## Technology Stack
- **pyecharts**: Python wrapper for Apache ECharts
- **Apache ECharts**: JavaScript charting library
- **Output**: Self-contained HTML with embedded JS
## Chart Types Reference
### Bar Charts
```python
from pyecharts.charts import Bar
from pyecharts import options as opts
chart = Bar()
chart.add_xaxis(labels)
chart.add_yaxis("Series Name", values)
chart.set_global_opts(
title_opts=opts.TitleOpts(title="Chart Title"),
tooltip_opts=opts.TooltipOpts(trigger="axis"),
xaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(rotate=45)),
)
```
### Line Charts
```python
from pyecharts.charts import Line
chart = Line()
chart.add_xaxis(dates)
chart.add_yaxis("Actual", values, is_smooth=True)
chart.add_yaxis("7-Day MA", moving_avg_7, is_smooth=True, linestyle_opts=opts.LineStyleOpts(type_="dashed"))
```
### Pie Charts
```python
from pyecharts.charts import Pie
chart = Pie()
chart.add("", list(zip(labels, values)))
chart.set_global_opts(legend_opts=opts.LegendOpts(orient="vertical", pos_left="left"))
```
### Heatmaps
```python
from pyecharts.charts import HeatMap
chart = HeatMap()
chart.add_xaxis(x_labels)
chart.add_yaxis("", y_labels, value=[[x, y, val], ...])
chart.set_global_opts(
visualmap_opts=opts.VisualMapOpts(min_=0, max_=max_val),
)
```
### Scatter Plots (for anomalies)
```python
from pyecharts.charts import Scatter
chart = Scatter()
chart.add_xaxis(dates)
chart.add_yaxis("Cost", costs, symbol_size=10)
# Add anomaly markers with different color/size
```
## Critical: Browser Compatibility
**Always convert to lists for JavaScript:**
```python
# CORRECT
chart.add_xaxis(df['column'].tolist())
chart.add_yaxis("Label", df['values'].tolist())
# WRONG - causes rendering issues
chart.add_xaxis(df['column'].values) # numpy array
chart.add_xaxis(df['column']) # pandas Series
```
## Theme Options
Available themes in pyecharts:
- `macarons` (default) - Colorful, professional
- `shine` - Bright colors
- `roma` - Muted, elegant
- `vintage` - Retro feel
- `dark` - Dark background
- `light` - Light, minimal
Usage:
```python
from pyecharts.globals import ThemeType
chart = Bar(init_opts=opts.InitOpts(theme=ThemeType.MACARONS))
```
## HTML Report Structure
```python
def generate_html_report(self, output_path: str, top_n: int = 10) -> str:
# Create all charts
charts = [
self.create_cost_by_service_chart(top_n),
self.create_cost_by_account_chart(),
# ... more charts
]
# Combine into page
page = Page(layout=Page.SimplePageLayout)
for chart in charts:
page.add(chart)
# Render to file
page.render(output_path)
return output_path
```
## Formatting Numbers
```python
# Currency formatting in tooltips
tooltip_opts=opts.TooltipOpts(
trigger="axis",
formatter="{b}: ${c:,.2f}"
)
# Axis label formatting
yaxis_opts=opts.AxisOpts(
axislabel_opts=opts.LabelOpts(formatter="${value:,.0f}")
)
```
## Common Issues & Solutions
### Empty Charts
1. Check browser console for JS errors
2. Verify `.tolist()` on all data
3. Hard refresh (Ctrl+Shift+R)
4. Check data exists in HTML source
### Chart Too Small
```python
init_opts=opts.InitOpts(width="100%", height="400px")
```
### Labels Overlapping
```python
xaxis_opts=opts.AxisOpts(
axislabel_opts=opts.LabelOpts(rotate=45, interval=0)
)
```
### Legend Too Long
```python
legend_opts=opts.LegendOpts(
type_="scroll",
orient="horizontal",
pos_bottom="0%"
)
```
## Testing Visualizations
```bash
# Test chart creation
uv run pytest tests/test_visualizer.py -v
# Regenerate example report
uv run pytest tests/test_examples.py -v -s
# View in browser
open examples/example_report.html
```Related Skills
bio-epitranscriptomics-modification-visualization
Create metagene plots and browser tracks for RNA modification data. Use when visualizing m6A distribution patterns around genomic features like stop codons.
plotly-visualization
Generate interactive Plotly and Matplotlib visualizations from DataFrames with configurable templates and multi-format support.
json-visualization-dev
Develop and maintain the JSON Visualization web application - a Next.js tool for visualizing JSON/YAML/CSV/XML data as interactive graphs. Use when working with this codebase, adding features, fixing bugs, or understanding the graph visualization, data conversion, or type generation systems.
2000s-visualization-expert
Expert in 2000s-era music visualization (Milkdrop, AVS, Geiss) and modern WebGL implementations. Specializes in Butterchurn integration, Web Audio API AnalyserNode FFT data, GLSL shaders for audio-reactive visuals, and psychedelic generative art. Activate on "Milkdrop", "music visualization", "WebGL visualizer", "Butterchurn", "audio reactive", "FFT visualization", "spectrum analyzer". NOT for simple bar charts/waveforms (use basic canvas), video editing, or non-audio visuals.
bgo
Automates the complete Blender build-go workflow, from building and packaging your extension/add-on to removing old versions, installing, enabling, and launching Blender for quick testing and iteration.
go-microservices
Production-ready Go microservices patterns including Gin, Echo, gRPC, clean architecture, dependency injection, error handling, middleware, testing, Docker containerization, Kubernetes deployment, distributed tracing, observability with Prometheus, high-performance APIs, concurrent processing, database integration with GORM, Redis caching, message queues, and cloud-native best practices.
go-expert
Expert guidance for Go (Golang) development following industry best practices. Use when writing Go code, reviewing PRs, bootstrapping new services, configuring linters, implementing observability, or troubleshooting Go applications. Covers SOLID principles, Gang of Four design patterns, domain-driven structure, error handling, context patterns, concurrency, testing, structured logging, health endpoints, and CI gates.
gke-deployment
Deploy, configure, and manage Kubernetes workloads on GKE with Deployments, Services, Ingress, HPA, health probes, ConfigMaps, and Secrets. Use when deploying containers to GKE, configuring load balancers, setting up autoscaling, writing health checks, managing environment configs, or troubleshooting pod issues.
gitops-workflow
Implement GitOps workflows with ArgoCD and Flux for automated, declarative Kubernetes deployments with continuous reconciliation. Use when implementing GitOps practices, automating Kubernetes deployments, or setting up declarative infrastructure management.
gitops-principles-skill
Comprehensive GitOps methodology and principles skill for cloud-native operations. Use when (1) Designing GitOps architecture for Kubernetes deployments, (2) Implementing declarative infrastructure with Git as single source of truth, (3) Setting up continuous deployment pipelines with ArgoCD/Flux/Kargo, (4) Establishing branching strategies and repository structures, (5) Troubleshooting drift, sync failures, or reconciliation issues, (6) Evaluating GitOps tooling decisions, (7) Teaching or explaining GitOps concepts and best practices, (8) Deploying ArgoCD on Azure Arc-enabled Kubernetes or AKS with workload identity. Covers the 4 pillars of GitOps (OpenGitOps), patterns, anti-patterns, tooling ecosystem, Azure Arc integration, and operational guidance.
gitops-practitioner
GitOps workflows, Flux, ArgoCD, and declarative infrastructure. Activates when implementing GitOps patterns, configuring Flux or ArgoCD, managing Helm releases declaratively, or discussing drift detection and reconciliation loops.
gitlab-ci
Initialize or update GitLab CI/CD pipelines for Go projects with comprehensive testing, coverage reporting, snapshot builds, and automated releases