visualization

可視化

このスキルを使用するタイミング

数値データのインタラクティブなアプリ内グラフには、create_visualization を使用します。 明示的に PNG または PDF 形式の成果物が必要な場合は、代わりに visual-design スキルを使用してください。このツールが返すのはグラフの仕様であり、ダウンロード可能な画像ファイルではありません。固定の軸範囲など、このスキーマにないコントロールが必要なグラフを求められた場合は、要件を省略するのではなく、それらに対応したツールを選択してください。

次の用途にはこのスキルを使用...	次の用途には excalidraw スキルを使用...
四半期ごとの売上高	システムアーキテクチャ図
アンケート回答の割合	フローチャートまたは意思決定ツリー
時間経過による株価	シーケンス図／相互作用図
市場シェアの内訳	マインドマップまたは概念マップ
あらゆる x/y またはセグメント／値データ	図形、ボックス、矢印、ラベル

使用可能なツール

• create_visualization：フロントエンドで描画するグラフ仕様を作成します。

パラメーター（完全に一致させる必要があります）

パラメーター	型	必須	説明
chart_type	str	はい	"bar"、"line"、または "pie"
data	list[dict]	はい	データオブジェクトの配列 — 以下の形式を参照
title	str	いいえ	グラフのタイトル
x_label	str	いいえ	X 軸のラベル（bar／line のみ）
y_label	str	いいえ	Y 軸のラベル（bar／line のみ）

データ形式（重要 — 正確なフィールド名を使用）

棒グラフ／折れ線グラフ — 各オブジェクトには "x" と "y" のキーが必須です：

[{"x": "Jan", "y": 100}, {"x": "Feb", "y": 150}, {"x": "Mar", "y": 120}]

円グラフ — 各オブジェクトには "segment" と "value" のキーが必須です：

[{"segment": "Category A", "value": 30}, {"segment": "Category B", "value": 70}]

任意：カスタムカラーを指定するには、任意のデータポイントに "color": "hsl(210, 100%, 50%)" を追加します。

ツール入力の例

棒グラフ：

{
  "chart_type": "bar",
  "data": [{"x": "Q1", "y": 250}, {"x": "Q2", "y": 310}, {"x": "Q3", "y": 280}],
  "title": "Quarterly Revenue",
  "x_label": "Quarter",
  "y_label": "Revenue ($K)"
}

円グラフ：

{
  "chart_type": "pie",
  "data": [{"segment": "Mobile", "value": 60}, {"segment": "Desktop", "value": 35}, {"segment": "Tablet", "value": 5}],
  "title": "Traffic by Device"
}

避けるべきよくある間違い

• {"labels": [...], "values": [...]} 形式は使用しないでください — data は辞書のリストである必要があります。
• 棒グラフ／折れ線グラフのデータでは "x" と "y" のキーを使用してください。"label" や "name" は使用しないでください。

UI ガイダンス（tools-config より）

データ形式：

• 棒グラフ／折れ線グラフ：[{"x": label, "y": value}]
• 円グラフ：[{"segment": name, "value": number}]
• 色の指定は任意です："color": "hsl(210, 100%, 50%)"