chart-visualization について
データをビジュアルチャートに変換するスキルです。チャートの選定、パラメーターの抽出、画像生成まで対応し、生成スクリプトを通じて多様なチャートや図を扱います。
主な機能
- 01データに応じたチャート選定
- 02リファレンスに基づくパラメーター抽出
- 03JSON ペイロードによるチャート生成
- 04地図、図表、統計チャートに対応
活用シーン
- 01傾向やカテゴリ別の比較を可視化
- 02関係、フロー、階層の表現
- 03地域データや表形式の集計表示
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ bytedance/ deer-flow --skill chart-visualizationインストール後、Claude Code で/chart-visualizationを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/generate_area_chart.mdgenerate_bar_chart.mdgenerate_boxplot_chart.mdgenerate_column_chart.mdgenerate_district_map.mdgenerate_dual_axes_chart.mdgenerate_fishbone_diagram.mdgenerate_flow_diagram.mdgenerate_funnel_chart.mdgenerate_histogram_chart.mdgenerate_line_chart.mdgenerate_liquid_chart.mdgenerate_mind_map.mdgenerate_network_graph.mdgenerate_organization_chart.mdgenerate_path_map.mdgenerate_pie_chart.mdgenerate_pin_map.mdgenerate_radar_chart.mdgenerate_sankey_chart.mdgenerate_scatter_chart.mdgenerate_spreadsheet.mdgenerate_treemap_chart.mdgenerate_venn_chart.mdgenerate_violin_chart.mdgenerate_word_cloud_chart.mdscripts/generate.js詳細
チャート可視化スキル
このスキルでは、データをビジュアルチャートに変換するための包括的なワークフローを提供します。チャートの選択、パラメーターの抽出、画像の生成に対応しています。
ワークフロー
データを可視化するには、次の手順に従ってください。
1. チャートのインテリジェントな選択
ユーザーのデータの特徴を分析し、最適なチャートの種類を判断します。次のガイドラインを参考にしてください(詳細な仕様については references/ も確認してください)。
- 時系列:
generate_line_chart(傾向)またはgenerate_area_chart(累積傾向)を使用します。異なるスケールが2つある場合は、generate_dual_axes_chartを使用します。 - 比較:
generate_bar_chart(カテゴリ別)またはgenerate_column_chartを使用します。度数分布にはgenerate_histogram_chartを使用します。 - 全体に対する部分:
generate_pie_chartまたはgenerate_treemap_chart(階層構造)を使用します。 - 関係とフロー:
generate_scatter_chart(相関)、generate_sankey_chart(フロー)、またはgenerate_venn_chart(重なり)を使用します。 - マップ:
generate_district_map(地域)、generate_pin_map(地点)、またはgenerate_path_map(ルート)を使用します。 - 階層とツリー:
generate_organization_chartまたはgenerate_mind_mapを使用します。 - 特化型:
generate_radar_chart:多次元の比較。generate_funnel_chart:プロセスの段階。generate_liquid_chart:割合/進捗。generate_word_cloud_chart:テキストの頻度。generate_boxplot_chartまたはgenerate_violin_chart:統計的分布。generate_network_graph:複雑なノードとエッジの関係。generate_fishbone_diagram:原因と結果の分析。generate_flow_diagram:プロセスフロー。generate_spreadsheet:構造化データの表示やクロス集計に使用する表形式データまたはピボットテーブル。
2. パラメーターの抽出
チャートの種類を選択したら、references/ ディレクトリ内の対応するファイル(例:references/generate_line_chart.md)を読み、必須フィールドと任意フィールドを確認します。
ユーザーの入力からデータを抽出し、想定される args 形式に割り当てます。
3. チャートの生成
JSON ペイロードを指定して scripts/generate.js スクリプトを呼び出します。
ペイロード形式:
{
"tool": "generate_chart_type_name",
"args": {
"data": [...],
"title": "...",
"theme": "...",
"style": { ... }
}
}
実行コマンド:
node ./scripts/generate.js '<payload_json>'
4. 結果の返却
スクリプトは、生成した各チャートの結果を標準出力に出力します(チャートの種類では画像 URL、マップツールではテキストまたは JSON)。
tool が指定されていない場合、ツールが不明な場合、またはチャートサービスへのリクエストに失敗した場合は、標準エラー出力に書き込まれます。バッチ内のいずれかの項目が失敗すると、成功した項目の URL を出力した後、プロセスはステータス 1 で終了します。コマンドがステータス 0 で終了した場合に限り、URL を提示してください。
ユーザーには次の内容を返します。
- 画像 URL。
- 生成に使用した
args(仕様)の全体。
参考資料
各チャートの種類に関する詳細な仕様は、references/ ディレクトリにあります。スクリプトに渡す args が想定されるスキーマと一致するよう、これらのファイルを確認してください。
ライセンス
この SKILL.md は antvis/chart-visualization-skills が提供しています。
MIT License の下でライセンスされています。