AgentSkillsCN

data-visualization-techniques

当您需要创建图表、图形、仪表板或数据可视化时，可使用此技能——涵盖图表类型选择、D3.js 模式、Recharts 的使用、仪表板设计原则，以及面向分析报告员和财务追踪员的叙事性数据呈现技巧。

SKILL.md
--- frontmatter
name: data-visualization-techniques
description: This skill should be used when creating charts, graphs, dashboards, or data visualizations - covers chart type selection, D3.js patterns, Recharts usage, dashboard design principles, and data storytelling techniques for analytics-reporter and finance-tracker agents.

Data Visualization Techniques

Overview

Transform data into clear, actionable visualizations. Choose the right chart types, design effective dashboards, and tell compelling data stories. Core principle: Visualizations exist to answer questions, not just display data.

When to Use

Use when:

  • •Building dashboards or analytics
  • •Presenting data to users
  • •Creating reports
  • •Visualizing trends or patterns
  • •Comparing metrics
  • •Showing relationships in data

Chart Type Selection

Data QuestionChart TypeUse For
How does X change over time?Line chartTrends, time series
How do categories compare?Bar chartComparing quantities
What's the composition?Pie/DonutParts of whole (<6 categories)
What's the relationship?Scatter plotCorrelation between variables
What's the distribution?HistogramData spread and frequency
How does X compare to goal?Progress barGoals and achievements
What's the trend + detail?Area chartCumulative trends

Quick Selection Guide

code
Time series data → Line chart
Comparing categories → Bar chart
Parts of whole → Donut chart (not pie)
2 variables correlation → Scatter plot
Distribution → Histogram
Progress to goal → Progress bar
Multiple series over time → Multi-line or stacked area

React Charting Libraries

Recharts (Recommended for Most Cases)

Why: Simple API, responsive, good defaults, TypeScript support

typescript
import {LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer} from 'recharts'
const data = [
  {date: 'Jan', users: 400},
  {date: 'Feb', users: 600},
  {date: 'Mar', users: 800},
]
function GrowthChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <XAxis dataKey="date" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="users" stroke="#3B82F6" />
      </LineChart>
    </ResponsiveContainer>
  )
}

Chart.js (Alternative)

Why: More chart types, extensive documentation

D3.js (For Custom Visualizations)

Why: Maximum flexibility, complex visualizations When: Custom charts, advanced interactions Trade-off: Steeper learning curve

Dashboard Design Principles

Layout Hierarchy

code
┌─────────────────────────────────┐
│  KPI Cards (Big Numbers)        │ ← Most important
├─────────────────────────────────┤
│  Primary Chart (Trend)          │ ← Main insight
├─────────────────────────────────┤
│  Supporting Charts (Grid)       │ ← Details
│  ┌──────┐ ┌──────┐ ┌──────┐   │
│  │Chart1│ │Chart2│ │Chart3│   │
│  └──────┘ └──────┘ └──────┘   │
└─────────────────────────────────┘

KPI Cards

typescript
function KPICard({title, value, change, trend}: KPIProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-sm text-muted-foreground">
          {title}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="text-3xl font-bold">{value}</div>
        <div className={trend === 'up' ? 'text-green-600' : 'text-red-600'}>
          {change} from last period
        </div>
      </CardContent>
    </Card>
  )
}
<KPICard
  title="Total Users"
  value="12,547"
  change="+2,341 (23%)"
  trend="up"
/>

Color Palette for Data

Qualitative (categories):

code
#3B82F6 (blue)
#10B981 (green)
#F59E0B (amber)
#EF4444 (red)
#8B5CF6 (purple)
#EC4899 (pink)

Sequential (low to high):

code
#EFF6FF → #3B82F6 → #1E40AF (light blue to dark blue)

Diverging (negative to positive):

code
#EF4444 (red) → #F3F4F6 (gray) → #10B981 (green)

Accessibility

  • •Don't rely on color alone (use patterns, labels)
  • •Ensure sufficient contrast
  • •Provide text alternatives
  • •Support keyboard navigation
  • •Screen reader friendly alt text

Common Patterns

Time Series

typescript
const data = [
  {month: 'Jan', revenue: 5000, expenses: 3000},
  {month: 'Feb', revenue: 7000, expenses: 3500},
  // ...
]
<ResponsiveContainer width="100%" height={300}>
  <LineChart data={data}>
    <XAxis dataKey="month" />
    <YAxis />
    <Tooltip />
    <Line dataKey="revenue" stroke="#10B981" name="Revenue" />
    <Line dataKey="expenses" stroke="#EF4444" name="Expenses" />
  </LineChart>
</ResponsiveContainer>

Comparison Bar Chart

typescript
<BarChart data={data}>
  <XAxis dataKey="category" />
  <YAxis />
  <Tooltip />
  <Bar dataKey="value" fill="#3B82F6" />
</BarChart>

Progress Indicators

typescript
function ProgressBar({value, max, label}: ProgressProps) {
  const percentage = (value / max) * 100
  return (
    <div>
      <div className="flex justify-between mb-2">
        <span>{label}</span>
        <span>{value} / {max}</span>
      </div>
      <div className="w-full bg-gray-200 rounded-full h-2">
        <div
          className="bg-blue-600 h-2 rounded-full transition-all"
          style={{width: `${percentage}%`}}
        />
      </div>
    </div>
  )
}

Data Storytelling

Good visualizations:

  • •Answer a specific question
  • •Show comparison (vs last period, vs goal)
  • •Highlight insights (annotations, color)
  • •Provide context (What's normal? What's good?) Example:
code
❌ Just showing numbers:
"Revenue: $50,000"
✅ With context and insight:
"Revenue: $50,000 (+23% vs last month)
🎯 Hit Q4 goal 2 weeks early"

Resources

  • •Recharts: recharts.org
  • •shadcn/ui Chart components: ui.shadcn.com
  • •D3.js: d3js.org
  • •Color palette: tailwindcss.com/docs/customizing-colors Visualizations should clarify, not confuse. Choose the right chart, design for clarity, tell the story in the data.