🎯

data-visualization

🎯Skill

from ntaksh42/agents

What it does

Generates interactive and customizable charts using Chart.js, transforming raw data into visually compelling visualizations across multiple chart types.

📦

Part of

ntaksh42/agents(78 items)

data-visualization

Installation

📋 No install commands found in docs. Showing default command. Check GitHub for actual instructions.

Quick InstallInstall with npx

npx skills add ntaksh42/agents --skill data-visualization

Need more details? View full documentation on GitHub →

2Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Create data visualizations using various charting libraries. Use when visualizing data or creating interactive charts.

Overview

# Data Visualization Skill

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

概要

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

主な機能

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

使用方法

基本的な使い方

```

データ可視化HTMLを作成してください。

データ: 売上データ（1月: 120万, 2月: 150万, 3月: 180万, 4月: 140万）

グラフタイプ: 折れ線グラフ

タイトル: "2024年売上推移"

```

複数グラフの生成

```

以下のデータでダッシュボードを作成:

月別売上（折れ線グラフ）
商品カテゴリ別売上（円グラフ）
地域別売上（棒グラフ）
顧客満足度（レーダーチャート）

```

カスタマイズ例

```

データ可視化を作成:

データ: [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の売上ダッシュボードを作成。

含めるグラフ:

月別売上推移（折れ線）
商品カテゴリ別内訳（円グラフ）
週別売上比較（棒グラフ）

テーマ: ビジネス（青系）

```

生成されるもの:

レスポンシブな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アプリケーション

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

ベストプラクティス

適切なグラフタイプ選択: データの性質に合ったグラフを選ぶ

- 時系列 → 折れ線グラフ

- 比較 → 棒グラフ

- 割合 → 円グラフ

- 相関 → 散布図

色使い:

- カラーブラインドに配慮

- 適切なコントラスト

- 意味のある色分け

データラベル:

- 軸ラベルを明確に

- 単位を表示

- 適切なフォーマット

パフォーマンス:

- 大量データは集約

- アニメーション最適化

- レスポンシブ対応

アクセシビリティ:

- 代替テキスト

- キーボード操作対応

- スクリーンリーダー対応

トラブルシューティング

グラフが表示されない

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

More from this repository10

🎯

document-summarizer🎯Skill

Generates concise summaries of documents by extracting key information and condensing text into a more digestible format.

🎯

algorithmic-art🎯Skill

Generates creative algorithmic art using p5.js, creating unique visual designs with patterns, fractals, and dynamic animations.

🎯

sql-query-helper🎯Skill

Generates, optimizes, and explains SQL queries with best practices, providing intelligent database query solutions across multiple database platforms.

🎯

plantuml-diagram🎯Skill

Generates PlantUML diagrams (class, sequence, component) to visually represent system architecture and UML models.

🎯

azure-pipelines-generator🎯Skill

Generates Azure Pipelines YAML configurations automatically for CI/CD workflows, supporting multi-stage builds and deployments across different environments.

🎯

kubernetes-helper🎯Skill

Assists Kubernetes users by generating, validating, and explaining Kubernetes manifests and configurations with AI-powered insights.

🎯

using-git-worktrees🎯Skill

Creates isolated Git worktrees with smart directory selection and safety verification for feature work and branch management.

🎯

dependency-analyzer🎯Skill

Analyzes project dependencies, identifies potential conflicts, and provides insights into library compatibility and version management.

🎯

brainstorming🎯Skill

Collaboratively refines rough ideas into fully-formed designs through systematic questioning, alternative exploration, and incremental validation.

🎯

azure-boards-helper🎯Skill

Manages Azure Boards work items by creating, querying, and automating work item workflows using WIQL and comprehensive templates.