Guides full-stack data visualization: selects optimal charts for data and goals, engineers pipelines from databases to rendered charts, recommends libraries by scale, optimizes performance and accessibility.
From bopen-toolsnpx claudepluginhub b-open-io/claude-plugins --plugin bopen-toolsThis skill uses the workspace's default tool permissions.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides idea refinement into designs: explores context, asks questions one-by-one, proposes approaches, presents sections for approval, writes/review specs before coding.
Enable any agent to (1) instantly identify the exact chart needed from raw data, (2) generate the precise path of queries/transforms to materialize that chart, and (3) evaluate and choose the optimal charting library/stack based on performance, scale, and interactivity requirements.
This is not "just call a library" — it is full-stack visualization strategy.
Before any code runs, answer these questions in order:
| Goal | Chart Type |
|---|---|
| Compare values | Bar/Column (grouped or stacked) |
| Show trend over time | Line or Area |
| Show distribution / spread | Histogram, Box Plot, Violin |
| Show relationship / correlation | Scatter, Bubble, Heatmap |
| Show composition / parts-of-whole | Stacked Bar or Area (never pie if >5 slices) |
| Show hierarchy / flow | Treemap, Sunburst, Sankey |
| Show geographic pattern | Choropleth or Symbol Map |
| Variables | Chart |
|---|---|
| 1 numeric, unordered | Histogram / Density |
| 1 numeric + time | Line |
| 1 categorical + 1 numeric | Bar |
| 2 numeric | Scatter |
| 1 categorical + time series | Grouped or Stacked Line/Area |
| Many-to-many relationships | Heatmap or Parallel Coordinates |
| Audience | Approach |
|---|---|
| Executive dashboard | Big numbers + simple bars/lines, zero clutter |
| Analyst/explorer | Interactive tooltips, zoom, hover details, multiple linked views |
| Mobile | Horizontal bars, large text, minimal colors |
| Accessibility | High contrast, patterns instead of color-only, alt-text descriptions |
| Data Situation | Best Chart (first choice) | Avoid |
|---|---|---|
| >5 categories | Bar (horizontal) | Pie |
| Time series >20 points | Line | Column |
| Correlation between 2 measures | Scatter | Line (unless ordered) |
| Parts of whole >5 slices | Stacked Bar or Treemap | Pie/Donut |
| Outliers or distribution shape | Box + Violin | Bar |
| Flow between stages | Sankey | Anything else |
Most databases do NOT have the exact aggregation ready. Auto-generate the full pipeline:
Auto-generate SQL or pandas code for:
| Scale | Strategy |
|---|---|
| One-off (<10k rows) | Run query on-the-fly |
| Medium | Create materialized view or cached table |
| Large/Real-time | Pre-aggregate in Spark/DuckDB, incremental refresh |
| Extreme | Stream + windowed aggregates (Flink/Kafka) |
User says "show monthly revenue by product category":
"I need: LEFT JOIN orders -> products -> categories; GROUP BY month, category; SUM(revenue). No view exists -> I will create temp table or run inline. Chart type: Stacked Area. Library recommendation below."
Always output the performance trade-off and recommended stack.
| Scale / Requirement | Recommended Library | Why | Fallback |
|---|---|---|---|
| <10k points, simple web dashboard | Chart.js or Recharts | <10 ms render, ~60 KB bundle | N/A |
| 10k-500k points, interactive | Apache ECharts or Plotly.js | Canvas + WebGL, 60 fps on 100k points | D3 (slower) |
| 500k-10M+ points, real-time | LightningChart or Highcharts Stock + WebGL | GPU accelerated, <50 ms at 5M points | Anything SVG-based fails |
| Python backend + web | Plotly Dash or Bokeh | Server-side render + client streaming | Matplotlib (static only) |
| Python notebook exploration | Seaborn + Plotly | Instant, beautiful defaults | -- |
| Extremely large / streaming | DuckDB + Observable Plot or Perspective | In-memory columnar, sub-second on billions | -- |
| No JavaScript (PDF reports) | Matplotlib + WeasyPrint or ReportLab | Pure Python, vector output | -- |