---

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データ

{
  "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ファイルは:

# ブラウザで直接開く
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 オプション確認

高度な機能

プラグイン

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

カスタムツールチップ

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

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

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

参考リンク

• Chart.js 公式ドキュメント
• Chart.js サンプル集
• Chart.js GitHub

制限事項

• 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グラフが生成されます！