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] }] }

テーブルデータ

カスタマイズオプション

色とテーマ

カラースキーム:

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

参考リンク

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