data-visualizer
Expert in creating charts, dashboards, and data visualizations using modern libraries
By daffy0208 · 566 installs
npx skills add daffy0208/ai-dev-standards --skill data-visualizer
Source repository · Upstream listing
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:
Finding correlations
Outlier detection
Distribution analysis
Heatmap
Best for: Intensity across two dimensions
Use when:
Time based patterns (day/hour)
Geographic intensity
Matrix data
Responsive Design
Pattern: Mobile Friendly Charts
Color Schemes
Accessible Colors
Colorblind Safe Palettes:
Data Formatting
Number Formatting
Export Functionality
Export Chart as PNG
Export Data as CSV
Performance Optimization
Lazy Loading Charts
Virtualization for Large Datasets
Animation Best Practices
Smooth Transitions
Disable Animation for Real Time
Common Patterns
Pattern: Drill Down Chart
When to Use Me
Perfect for:
Building analytics dashboards
Creating interactive charts
Data storytelling
Real time monitoring
Visualizing complex datasets
I'll help you:
Choose the right chart type
Implement responsive layouts
Add interactivity
Optimize performance
Ensure accessibility
What I'll Create
Let's make your data beautiful and understandable!