data-visualization skill

---
name: data-visualization
description: Create data visualizations using various charting libraries. Use when visualizing data or creating interactive charts.
---

# Data Visualization Skill

データ可視化スキルは、Chart.jsを使用したインタラクティブなグラフやチャートをHTMLで生成します。

## 概要

このスキルを使用すると、データセットから美しく、レスポンシブで、インタラクティブなグラフを自動生成できます。ビジネスレポート、データ分析結果、ダッシュボードなどに最適です。

## 主な機能

- **豊富なグラフタイプ**: 折れ線、棒、円、ドーナツ、レーダー、散布図、バブル、極座標など
- **インタラクティブ**: ホバー時の詳細表示、クリックイベント、ズーム、パン
- **レスポンシブデザイン**: あらゆる画面サイズに自動対応
- **アニメーション**: スムーズなグラフ描画アニメーション
- **カスタマイズ可能**: 色、フォント、スタイル、軸ラベルなど細かく調整可能
- **複数グラフ対応**: 1つのページに複数のグラフを配置可能
- **エクスポート**: PNG/JPEG画像としてダウンロード可能

## 使用方法

### 基本的な使い方

```
データ可視化HTMLを作成してください。
データ: 売上データ（1月: 120万, 2月: 150万, 3月: 180万, 4月: 140万）
グラフタイプ: 折れ線グラフ
タイトル: "2024年売上推移"
```

### 複数グラフの生成

```
以下のデータでダッシュボードを作成:
1. 月別売上（折れ線グラフ）
2. 商品カテゴリ別売上（円グラフ）
3. 地域別売上（棒グラフ）
4. 顧客満足度（レーダーチャート）
```

### カスタマイズ例

```
データ可視化を作成:
- データ: [10, 20, 30, 40, 50]
- グラフタイプ: 棒グラフ
- 色: グラデーション（青から緑）
- アニメーション: バウンス
- 凡例: 下部に配置
```

## サポートするグラフタイプ

### 1. 折れ線グラフ (Line Chart)
時系列データや傾向の可視化に最適
- 単一/複数ライン
- エリアチャート（塗りつぶし）
- ステップラインチャート

### 2. 棒グラフ (Bar Chart)
カテゴリ別の比較に最適
- 縦棒グラフ
- 横棒グラフ
- 積み上げ棒グラフ
- グループ化棒グラフ

### 3. 円グラフ (Pie Chart)
全体に対する割合の表示
- 円グラフ
- ドーナツグラフ
- セミサークルグラフ

### 4. レーダーチャート (Radar Chart)
多次元データの比較
- スパイダーチャート
- ポーラーエリアチャート

### 5. 散布図 (Scatter Plot)
相関関係の可視化
- 基本的な散布図
- バブルチャート

### 6. 混合チャート (Mixed Charts)
複数のグラフタイプを組み合わせ
- 折れ線 + 棒グラフ
- カスタム組み合わせ

## データ形式

### CSVデータからの変換

```
CSVデータを可視化:
日付,売上,利益
2024-01,1000,200
2024-02,1200,250
2024-03,1100,220
```

### JSONデータ

```json
{
  "labels": ["1月", "2月", "3月", "4月"],
  "datasets": [{
    "label": "売上",
    "data": [100, 120, 110, 140]
  }]
}
```

### テーブルデータ

```
| 商品    | 売上 | シェア |
|---------|------|--------|
| 商品A   | 500  | 35%    |
| 商品B   | 400  | 28%    |
| 商品C   | 300  | 21%    |
| 商品D   | 200  | 14%    |
```

## カスタマイズオプション

### 色とテーマ

```
カラースキーム:
- default: Chart.jsデフォルト
- blue: 青系グラデーション
- green: 緑系グラデーション
- warm: 暖色系
- cool: 寒色系
- pastel: パステルカラー
- vibrant: ビビッドカラー
- monochrome: モノクローム
```

### アニメーション

```
アニメーションタイプ:
- linear: リニア
- easeInQuad: イーズインクアッド
- easeOutQuad: イーズアウトクアッド
- easeInOutQuad: イーズインアウトクアッド
- easeInCubic: イーズインキュービック
- bounce: バウンス
```

### レイアウト

```
レイアウトオプション:
- 凡例位置: top, bottom, left, right
- グラフサイズ: small, medium, large, custom
- グリッド線: 表示/非表示
- 軸ラベル: カスタマイズ可能
```

## 実装例

### 例1: 売上ダッシュボード

**入力:**
```
2024年Q1の売上ダッシュボードを作成。
含めるグラフ:
1. 月別売上推移（折れ線）
2. 商品カテゴリ別内訳（円グラフ）
3. 週別売上比較（棒グラフ）
テーマ: ビジネス（青系）
```

**生成されるもの:**
- レスポンシブな3つのグラフを含むHTMLページ
- インタラクティブな凡例とツールチップ
- 印刷用CSS

### 例2: KPIダッシュボード

**入力:**
```
KPIダッシュボード作成:
- 目標達成率（ゲージチャート）
- 月次トレンド（折れ線グラフ）
- 部門別パフォーマンス（レーダーチャート）
- 前年比較（棒グラフ）
```

**生成されるもの:**
- 4つのグラフを含む完全なダッシュボード
- リアルタイム更新対応
- エクスポート機能付き

### 例3: データ分析レポート

**入力:**
```
データ分析結果の可視化:
相関分析: 散布図
分布: ヒストグラム
時系列: 折れ線グラフ
統計サマリー: 箱ひげ図
```

**生成されるもの:**
- 統計的なグラフセット
- データテーブル併記
- 統計値の表示

## グラフの表示

生成されたHTMLファイルは:

```bash
# ブラウザで直接開く
open visualization.html

# またはローカルサーバーで
python -m http.server 8000
# http://localhost:8000/visualization.html
```

## インタラクション機能

- **ホバー**: データポイントの詳細表示
- **クリック**: データセットの表示/非表示切り替え
- **ズーム**: マウスホイールでズームイン/アウト
- **パン**: ドラッグでグラフ移動
- **凡例**: クリックでデータセット切り替え
- **エクスポート**: PNG/JPEG画像としてダウンロード

## 応用例

### ビジネス分析
- 売上レポート
- KPIダッシュボード
- 財務分析
- 市場分析

### 科学データ
- 実験結果の可視化
- 統計分析
- 時系列データ
- 相関分析

### Webアプリケーション
- リアルタイムモニタリング
- ユーザーダッシュボード
- アナリティクス
- パフォーマンスメトリクス

## ベストプラクティス

1. **適切なグラフタイプ選択**: データの性質に合ったグラフを選ぶ
   - 時系列 → 折れ線グラフ
   - 比較 → 棒グラフ
   - 割合 → 円グラフ
   - 相関 → 散布図

2. **色使い**:
   - カラーブラインドに配慮
   - 適切なコントラスト
   - 意味のある色分け

3. **データラベル**:
   - 軸ラベルを明確に
   - 単位を表示
   - 適切なフォーマット

4. **パフォーマンス**:
   - 大量データは集約
   - アニメーション最適化
   - レスポンシブ対応

5. **アクセシビリティ**:
   - 代替テキスト
   - キーボード操作対応
   - スクリーンリーダー対応

## トラブルシューティング

### グラフが表示されない

**原因**: Chart.jsが読み込まれていない
**解決**: インターネット接続確認、CDNのURL確認

### データが正しく表示されない

**原因**: データ形式が不正
**解決**: コンソールエラー確認、データ構造確認

### レスポンシブが機能しない

**原因**: コンテナサイズの問題
**解決**: `maintainAspectRatio` オプション確認

## 高度な機能

### プラグイン

```javascript
// データラベルプラグイン
plugins: {
  datalabels: {
    display: true,
    color: 'white'
  }
}
```

### カスタムツールチップ

```javascript
tooltip: {
  callbacks: {
    label: function(context) {
      return context.label + ': ' + context.formattedValue + '万円';
    }
  }
}
```

### アニメーションコールバック

```javascript
animation: {
  onComplete: function() {
    console.log('アニメーション完了');
  }
}
```

## 参考リンク

- [Chart.js 公式ドキュメント](https://www.chartjs.org/)
- [Chart.js サンプル集](https://www.chartjs.org/samples/)
- [Chart.js GitHub](https://github.com/chartjs/Chart.js)

## 制限事項

- 3D グラフは非対応（2Dのみ）
- 非常に大量のデータポイント（10000+）はパフォーマンス低下の可能性
- 古いブラウザ（IE11以前）は非対応

## バージョン情報

- Chart.js: 4.4.0
- スキルバージョン: 1.0.0

---

**使用例:**

```
月別売上データを折れ線グラフで可視化してください。
データ:
1月: 250万円
2月: 280万円
3月: 320万円
4月: 290万円
5月: 350万円
6月: 380万円

タイトル: "2024年上半期売上推移"
色: 青系グラデーション
アニメーション: スムーズ
```

このプロンプトで、完全なインタラクティブHTMLグラフが生成されます！