Back to Details

data-visualization-expert

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

数据可视化专家

Data Visualization Expert

这个技能将您的Claude Code转变为数据可视化专家，能够设计和创建各种类型的图表、仪表板和交互式数据应用。
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

  • 基础图表: 柱状图、折线图、饼图、散点图
  • 高级图表: 热力图、树图、桑基图、雷达图
  • 地理可视化: 地图、 choropleth、气泡地图
  • 网络图: 关系网络、流程图、组织架构图
  • 时间序列: 时间线、甘特图、日历热图
  • 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仪表板设计
  • 实时数据监控面板
  • 多层级钻取分析
  • 响应式布局设计
  • 主题和样式定制
  • 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可视化库

JavaScript Visualization Libraries

  • D3.js: 低级数据驱动文档，完全自定义
  • Chart.js: 简单易用的响应式图表库
  • ECharts: 功能丰富的企业级图表库
  • Plotly.js: 交互式科学计算图表
  • ApexCharts: 现代化的图表库
  • 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组件库

React Component Libraries

  • Recharts: React声明式图表库
  • Victory: React组合式图表组件
  • Nivo: React图表组件集合
  • BizCharts: 蚂蚁金服React图表库
  • Recharts: React declarative chart library
  • Victory: React composable chart components
  • Nivo: React chart component collection
  • BizCharts: Ant Group React chart library

仪表板框架

Dashboard Frameworks

  • Grafana: 开源监控和可视化平台
  • Kibana: Elastic Stack可视化组件
  • Superset: Apache开源BI平台
  • Metabase: 简单易用的商业智能工具
  • 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可视化

Python Visualization

  • Matplotlib/Seaborn: 数据科学生态标准
  • Plotly: 交互式Python可视化
  • Bokeh: Web应用级别的可视化
  • Altair: 声明式统计可视化
  • Matplotlib/Seaborn: Standard for data science ecosystem
  • Plotly: Interactive Python visualization
  • Bokeh: Web application-level visualization
  • Altair: Declarative statistical visualization

使用示例

Usage Examples

1. 创建业务仪表板

1. Create Business Dashboard

"为公司销售团队创建一个KPI仪表板，包括销售额趋势、
区域对比、产品类别分析，使用React和Recharts实现。"
"Create a KPI dashboard for the company's sales team, including sales trends,
regional comparisons, product category analysis, implemented using React and Recharts."

2. 设计复杂可视化

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. 数据报告优化

3. Data Report Optimization

"优化现有的Excel报表，将其转换为交互式Web仪表板，
支持实时数据更新和多维度分析。"
"Optimize existing Excel reports by converting them into interactive web dashboards,
supporting real-time data updates and multi-dimensional analysis."

4. 选择可视化方案

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. 视觉设计原则

1. Visual Design Principles

  • 色彩理论和对比度
  • 信息层次和视觉权重
  • 一致性和标准化
  • 可访问性考虑
  • Color theory and contrast
  • Information hierarchy and visual weight
  • Consistency and standardization
  • Accessibility considerations

2. 数据准确性

2. Data Accuracy

  • 避免误导性可视化
  • 正确的比例和尺度
  • 数据标注和来源说明
  • 不确定性表示
  • Avoid misleading visualizations
  • Correct proportions and scales
  • Data labeling and source attribution
  • Uncertainty representation

3. 用户体验

3. User Experience

  • 响应式设计
  • 加载性能优化
  • 交互反馈设计
  • 错误处理和恢复
  • Responsive design
  • Loading performance optimization
  • Interactive feedback design
  • Error handling and recovery

4. 技术实现

4. Technical Implementation

  • 代码模块化和复用
  • 性能监控和优化
  • 浏览器兼容性
  • 国际化支持
  • Code modularization and reuse
  • Performance monitoring and optimization
  • Browser compatibility
  • Internationalization support

常见可视化场景

Common Visualization Scenarios

商业分析

Business Analysis

  • 销售业绩趋势分析
  • 财务KPI监控
  • 客户行为分析
  • 市场份额对比
  • 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: 数据处理和分析
  • frontend-web-dev-skill: 前端界面开发
  • backend-dev-skill: 数据API开发
  • product-manager: 需求分析和用户体验
通过此技能，您的Claude Code将成为数据可视化专家，能够创建专业、美观且富有洞察力的数据可视化作品。
  • 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.