mcpField
C
chart-visualization

chart-visualization

github.com/bytedanceデータ・データベース84.6k2.6k 回インストール1 日前に更新
リポジトリ

chart-visualization について

データをビジュアルチャートに変換するスキルです。チャートの選定、パラメーターの抽出、画像生成まで対応し、生成スクリプトを通じて多様なチャートや図を扱います。

主な機能

  1. 01データに応じたチャート選定
  2. 02リファレンスに基づくパラメーター抽出
  3. 03JSON ペイロードによるチャート生成
  4. 04地図、図表、統計チャートに対応

活用シーン

  1. 01傾向やカテゴリ別の比較を可視化
  2. 02関係、フロー、階層の表現
  3. 03地域データや表形式の集計表示

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/bytedance/deer-flow --skill chart-visualization

インストール後、Claude Code で/chart-visualizationを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
generate_area_chart.md
generate_bar_chart.md
generate_boxplot_chart.md
generate_column_chart.md
generate_district_map.md
generate_dual_axes_chart.md
generate_fishbone_diagram.md
generate_flow_diagram.md
generate_funnel_chart.md
generate_histogram_chart.md
generate_line_chart.md
generate_liquid_chart.md
generate_mind_map.md
generate_network_graph.md
generate_organization_chart.md
generate_path_map.md
generate_pie_chart.md
generate_pin_map.md
generate_radar_chart.md
generate_sankey_chart.md
generate_scatter_chart.md
generate_spreadsheet.md
generate_treemap_chart.md
generate_venn_chart.md
generate_violin_chart.md
generate_word_cloud_chart.md
scripts/
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 の下でライセンスされています。

コメント