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アプリケーション

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

ベストプラクティス

適切なグラフタイプ選択: データの性質に合ったグラフを選ぶ
- 時系列 → 折れ線グラフ
- 比較 → 棒グラフ
- 割合 → 円グラフ
- 相関 → 散布図
色使い:
- カラーブラインドに配慮
- 適切なコントラスト
- 意味のある色分け
データラベル:
- 軸ラベルを明確に
- 単位を表示
- 適切なフォーマット
パフォーマンス:
- 大量データは集約
- アニメーション最適化
- レスポンシブ対応
アクセシビリティ:
- 代替テキスト
- キーボード操作対応
- スクリーンリーダー対応

トラブルシューティング

グラフが表示されない

原因: 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('アニメーション完了');
  }
}

参考リンク

制限事項

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

Install Skill

SKILL.md

Data Visualization Skill

概要

主な機能

使用方法

基本的な使い方

複数グラフの生成

カスタマイズ例

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

1. 折れ線グラフ (Line Chart)

2. 棒グラフ (Bar Chart)

3. 円グラフ (Pie Chart)

4. レーダーチャート (Radar Chart)

5. 散布図 (Scatter Plot)

6. 混合チャート (Mixed Charts)

データ形式

CSVデータからの変換

JSONデータ

テーブルデータ

カスタマイズオプション

色とテーマ

アニメーション

レイアウト

実装例

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

例2: KPIダッシュボード

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

グラフの表示

インタラクション機能

応用例

ビジネス分析

科学データ

Webアプリケーション

ベストプラクティス

トラブルシューティング

グラフが表示されない

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

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

高度な機能

プラグイン

カスタムツールチップ

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

参考リンク

制限事項

バージョン情報