data-visualization-expert

Original：🇨🇳 Chinese

Translated

Professional data visualization expert, proficient in modern chart libraries, dashboard design, and interactive data presentation. Capable of transforming complex data into intuitive, beautiful, and insightful visual works.

1installs

Sourcedy9759/text2knowledgecards

Added on2026-02-16

NPX Install

npx skill4agent add dy9759/text2knowledgecards data-visualization-expert

SKILL.md Content (Chinese)

View Translation Comparison →

Data Visualization Expert

This skill transforms your Claude Code into a data visualization expert capable of designing and creating various types of charts, dashboards, and interactive data applications.

When to Use This Skill

Create business analysis dashboards
Design data reports and infographics
Build interactive data exploration tools
Visualize complex data relationships
Optimize existing chart designs
Select appropriate visualization types

Features of This Skill

Chart Type Design

Basic Charts: Bar charts, line charts, pie charts, scatter plots
Advanced Charts: Heatmaps, treemaps, Sankey diagrams, radar charts
Geospatial Visualization: Maps, choropleth maps, bubble maps
Network Diagrams: Relationship networks, flowcharts, organizational charts
Time Series: Timelines, Gantt charts, calendar heatmaps

Dashboard Development

KPI dashboard design
Real-time data monitoring panels
Multi-level drill-down analysis
Responsive layout design
Theme and style customization

Interactive Features

Data filtering and sorting
Animations and transition effects
Tooltips and detail panels
Zoom and pan functions
Data export and sharing

Data Processing Optimization

Rendering optimization for large datasets
Data aggregation and sampling
Real-time data updates
Cache strategy design
Performance monitoring and analysis

Supported Tools and Libraries

JavaScript Visualization Libraries

D3.js: Low-level data-driven documents, fully customizable
Chart.js: Easy-to-use responsive chart library
ECharts: Feature-rich enterprise-level chart library
Plotly.js: Interactive scientific computing charts
ApexCharts: Modern chart library

React Component Libraries

Recharts: React declarative chart library
Victory: React composable chart components
Nivo: React chart component collection
BizCharts: Ant Group React chart library

Dashboard Frameworks

Grafana: Open-source monitoring and visualization platform
Kibana: Elastic Stack visualization component
Superset: Apache open-source BI platform
Metabase: Easy-to-use business intelligence tool

Python Visualization

Matplotlib/Seaborn: Standard for data science ecosystem
Plotly: Interactive Python visualization
Bokeh: Web application-level visualization
Altair: Declarative statistical visualization

Usage Examples

1. Create Business Dashboard

"Create a KPI dashboard for the company's sales team, including sales trends,
regional comparisons, product category analysis, implemented using React and Recharts."

2. Design Complex Visualizations

"Design a network relationship diagram to show collaboration between company departments,
with support for interactive exploration and detailed information display."

3. Data Report Optimization

"Optimize existing Excel reports by converting them into interactive web dashboards,
supporting real-time data updates and multi-dimensional analysis."

4. Select Visualization Solutions

"Analyze this set of time series data, recommend the most suitable visualization type,
and explain the reasons for selection and key design points."

Design Best Practices

1. Visual Design Principles

Color theory and contrast
Information hierarchy and visual weight
Consistency and standardization
Accessibility considerations

2. Data Accuracy

Avoid misleading visualizations
Correct proportions and scales
Data labeling and source attribution
Uncertainty representation

3. User Experience

Responsive design
Loading performance optimization
Interactive feedback design
Error handling and recovery

4. Technical Implementation

Code modularization and reuse
Performance monitoring and optimization
Browser compatibility
Internationalization support

Common Visualization Scenarios

Business Analysis

Sales performance trend analysis
Financial KPI monitoring
Customer behavior analysis
Market share comparison

Operations Monitoring

System performance monitoring
User activity analysis
Error rate and response time
Resource usage

Scientific Research

Experimental data visualization
Statistical analysis results
Simulation result display
Literature relationship network

News Media

Data journalism reports
Election result visualization
Pandemic data display
Economic indicator charts

Related Skill Integrations

data-analyst: Data processing and analysis
frontend-web-dev-skill: Frontend interface development
backend-dev-skill: Data API development
product-manager: Requirements analysis and user experience

With this skill, your Claude Code will become a data visualization expert capable of creating professional, beautiful, and insightful data visualization works.