chart-visualization

Chart Visualization

Overview

Transform data into visual charts. Intelligently select the most suitable chart type, extract parameters, and generate a chart image.

Poirot note: The original deer-flow skill uses a bundled scripts/generate.js (Node.js + charting library). Poirot doesn't bundle that script. Use bash with Python (matplotlib/plotly) as the rendering engine instead. Install: pip install matplotlib plotly.

Chart Selection Guide

Data Pattern	Recommended Chart	When
Time Series	Line / Area	Trends over time
Comparisons	Bar / Column	Categorical comparison
Distribution	Histogram / Boxplot	Frequency distribution
Part-to-Whole	Pie / Treemap	Proportions
Relationships	Scatter	Correlation
Flow	Sankey	Flow between stages
Multi-dimensional	Radar	Compare across dimensions
Process	Funnel	Stage conversion
Hierarchy	Org chart / Mind map	Tree structure
Geographic	Map	Spatial data

Workflow

1. Select Chart Type

Analyze the user's data features:

• Time dimension? → Line/Area
• Categories? → Bar/Column
• Proportions? → Pie/Treemap
• Correlation? → Scatter
• Flow? → Sankey
• Multiple dimensions? → Radar

2. Prepare Data

Extract data from user input, format as Python data structure:

data = {
    "labels": ["Jan", "Feb", "Mar", "Apr", "May"],
    "values": [120, 150, 180, 200, 220],
    "title": "Monthly Revenue",
    "xlabel": "Month",
    "ylabel": "Revenue ($K)"
}

3. Generate Chart

python3 -c "
import matplotlib
matplotlib.use('Agg')  # non-interactive backend
import matplotlib.pyplot as plt

labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May']
values = [120, 150, 180, 200, 220]

fig, ax = plt.subplots(figsize=(10, 6))
ax.plot(labels, values, marker='o', linewidth=2, markersize=8)
ax.set_title('Monthly Revenue', fontsize=16, fontweight='bold')
ax.set_xlabel('Month', fontsize=12)
ax.set_ylabel('Revenue ($K)', fontsize=12)
ax.grid(True, alpha=0.3)
plt.tight_layout()
plt.savefig('.poirot/outputs/chart.png', dpi=150, bbox_inches='tight')
print('Saved to .poirot/outputs/chart.png')
"