Agent skill · data analytics · daffy0208
data-visualizer
Expert in creating charts, dashboards, and data visualizations using modern libraries
Why this skill is useful
Provides specific patterns and examples for creating complex data visualizations using niche libraries like D3.js and Recharts that the AI wouldn't reliably generate on its own.
What it needs
Requires chart.js, d3, recharts installed locally. About 8k tokens when loaded. Last updated 2025-12-25. 33 stars on the source repository.
What this skill does
Data Visualizer Skill I help you build beautiful, interactive data visualizations and dashboards. What I Do Chart Creation: Line charts, bar charts, pie charts Area charts, scatter plots, heatmaps Complex visualizations (Sankey, treemaps, network graphs) Dashboard Building: KPI cards and metrics Real-time data dashboards Interactive filters and drill-downs Responsive layouts Data Presentation: Data storytelling Color schemes and accessibility Animation and interactions Export capabilities Library Selection Guide Recharts (Recommended for React) Best for: Quick, simple charts React/Next.js projects Standard chart types Responsive design Example: --- Chart.js (Recommended for Vue/Angular) Best for: Framework-agnostic Simple API Good documentation Standard chart types Example: --- D3.js (Advanced) Best for: Custom visualizations Complex interactions Full control over rendering Data-driven documents When to use: Need custom chart type Complex data transformations Advanced interactions Publication-quality graphics Example: --- Dashboard Patterns Pattern 1: KPI Dashboard Use case: Executive dashboard with key metrics --- Pattern 2: Real-Time Dashboard Use case: Live data monitoring API Route for SSE: --- Pattern 3: Interactive Dashboard with Filters --- Chart Types Guide Line Chart Best for: Trends over time, continuous data Use when: Stock prices, temperature, website traffic Showing change over time Multiple data series comparison --- Bar Chart Best for: Comparing categories Use when: Sales by product, users by country Discrete categories Ranking/comparison --- Pie/Donut Chart Best for: Part-to-whole relationships Use when: Market share, budget allocation Proportions (max 5-7 slices) Simple percentages ⚠️ Avoid when: Too many categories (> 7) Precise comparison needed (use bar chart) --- Area Chart Best for: Volume over time Use when: Cumulative totals Filled regions show magnitude Stacked categories --- Scatter Plot Best for: Correlation between variables Use when: Fin …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills daffy0208/data-visualizer