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!