View Agentの概要と実装
1. 概要
View Agentは、構造化データおよび非構造化データを多様な解析解釈観点から可視化することで、ユーザーの意思決定を支援する軽量なWebアプリケーションであり、本システムは「表示エージェント(View Agent)」として、別の分析AIと連携することにより、分析結果を最適な形で表示するインタラクティブなユーザー体験を実現している。
2. 特徴
2.1. 概要
View Agentは、以下のような特徴を持つプラットフォームとなる。
View Agentは、マイクロサービスとしての機能を持ち、Flaskをベースとした軽量Webフレームワークを利用して、HTTPを介したデータの入出力の機能を持っている。さらに内部の構造はルーティングを通じて、容易に機能追加や表示テンプレートの切り替えが行えるようになっている。
この構造により、AI解析AgentはView Agentに渡すメタデータで指定するだけで、「解析アプリを切り替える」感覚で、ビュースタイルの切替えを簡単に行うことが可能となっている。
この「多様な可視化形式」としては、ネットワーク図、棒グラフ、ワードクラウド、サンキー図などがありそれらの、計算レベルの異なる解析形式を選択することで、様々な視点からデータを現実的に解釈することができる。
また発展的な機能として、HTMLテンプレートとLLM(大規模言語モデル)と組み合わせることで、インタラクティブな表示の修正も可能であり、さらにAI解析AgentとLLMとが動的に連携し、自動で最適なビューを探索ことも可能となっている。
2.2. 構成
View Agent はシンプルかつ拡張性の高いWebアプリケーションで、以下のような構成で動作する。
2.2.1. アプリケーション本体 (app.py)
- Python(Flask)ベースのWebサーバー
- 各HTMLテンプレート(可視化ビュー)へのルーティングを担当
- 必要に応じてデータの受け渡し(今後の拡張でCSVやAPI入力にも対応可能)
2.2.2. フロントエンドテンプレート群(static/ ディレクトリ)
- HTML形式で提供される複数の可視化ビュー
- 各ファイルが独立したビジュアライゼーション(例:index-network.html、index-bar.html)
- 主にJavaScript(D3.jsやChart.jsなど)と組み合わせて動作
2.2.3. Agentとの連携
- HTTP経由で表示データと、表示種を指定するメタデータを送付することで、可視化のモードを切り替え可能。
- 将来的には、LLMと組み合わせた自動で最適なビューを推薦や、チャットでのやり取りによる表示の修正も可能とする。
2.3. 表示モード
現時点では以下の9つの表示がデフォルトとして用意されている。これらは、AI分析エージェントから、データ中に設定したメタデータを使って切り替え可能で、切さらにパイプライン処理が可能なものとなる。
2.3.1. テーブル

表形式(テーブル形式)の見える化は、詳細なデータを正確に確認・比較したい分析に非常に有効なもので、特に「値そのものを見たい/並べて比較したい/フィルタ・並び替えをしたい」といった場面で大きな力を発揮する。
表形式の可視化が有効な分析用途は、顧客ごとの購買履歴(名前・商品・金額・日付)、製品リスト(型番・在庫・単価など)などの「個別に知りたい」というニーズで、小さな違いや詳細項目の確認に強い個別データの確認・一覧表示、売上データの月別推移(数値で比較)、アンケートの回答数や割合(小数点レベルで見る)などのグラフでは見えづらい「微細な差異」も明確に把握できることが特徴となる。これらは、excel等のツールと連携すことで、集計・ソート・フィルタリング、どの変数が存在し、どんな値が含まれているのかを確認したり、欠損値やデータの型、外れ値や異常値の目視検出も行うことも可能なものとなる。
表形式が適しているケースとしては、値の正確な確認が必要で、項目数(列や行)が多く、ユーザー自身で分析したい、データの入力・編集も行いたいなどがある。
Tableデータ作成のためのサンプル入力データは以下のようになる。
analysis_data = { "nodes": [ { "id": "A", "label": "AI技術", "value": 10 }, { "id": "B", "label": "機械学習", "value": 7 }, { "id": "C", "label": "深層学習", "value": 5 } ], "links": [ { "source": "A", "target": "B", "weight": 2, "type": "related_to" }, { "source": "B", "target": "C", "weight": 1, "type": "derived_from" } ], "metadata": { "output_type": "table" } }
2.3.2. 棒グラフ

棒グラフ(Bar Chart)は、カテゴリごとの数量を比較するのに適した可視化手法で、特に、「どの項目が多いか?少ないか?」を明確に示したいときに有効なアプローチとなる。
棒グラフが有効な分析用途としては、商品カテゴリ別売上、都道府県別人口、年齢層別の購入件数などのカテゴリごとの比較、月別売上、週ごとのアクセス数、年別事故件数などの時間ごとの変化(離散的な時間)などとなる。また、性別×商品カテゴリの購入傾向、地域×店舗タイプ別の売上などの積み上げ棒グラフやグループ化棒グラフで複数要素の比較も可能で、ランキングや順位の可視化、目標と実績の比較などができる。
棒グラフに適したデータの特徴としては、カテゴリごとの数値、各項目が独立している(例:A社、B社、C社 など)、比較・ランキング・ギャップの確認を目的とするなどが挙げられる。
棒グラフ生成のための入力サンプルデータは以下のようになる。
analysis_data = { { "label": "AI技術", "value": 10 }, { "label": "機械学習", "value": 7 }, { "label": "深層学習", "value": 5 }, { "label": "自然言語処理", "value": 6 } ], "metadata": { "output_type": "table" }}
2.3.3. 散布図

散布図(Scatter Plot)は、2つの変数の関係性(相関)を視覚的に分析するのに適したグラフで、特に「Xが増えるとYはどうなる?」といった変数間の傾向やパターンを探したいときに役立つものとなる。
散布図が有効な分析用途としては、広告費と売上の関係、気温とアイスの売上、勉強時間とテスト点数などの相関関係の分析(「正の相関」「負の相関」「相関なし」が一目でわかる、相関係数(r)とセットで使うと定量的にも分析可能)、顧客の年齢と購買金額 → 顧客層の分類、製品の価格と性能 → 市場のポジショニングなどの分布の把握・クラスタの発見(特定のエリアに集中しているグループやクラスタが見える、K-meansなどのクラスタリングとも相性◎)、外れ値(異常値)の検出、回帰分析・モデル構築の前段階、主成分分析や次元削減後の可視化などが挙げられる。
散布図が適したデータの特徴としては、両軸とも「連続数値データ」、XとYに明確な意味がある、傾向・相関・分布を見ることが目的などがある。
散布図作成の為の入力サンプルデータは以下のようになる。
analysis_data = { "nodes": [ { "id": "A", "label": "AI技術", "x": 1, "y": 10, "value": 10 }, { "id": "B", "label": "機械学習", "x": 3, "y": 7, "value": 7 }, { "id": "C", "label": "深層学習", "x": 5, "y": 5, "value": 5 }, { "id": "D", "label": "自然言語処理", "x": 7, "y": 8, "value": 6 } ], "metadata": { "output_type": "scatter" }
2.3.3. 折れ線グラフ

折れ線グラフ(Line Chart)は、時間の経過に伴う変化やトレンドの分析に適したグラフで、特に「時系列データを追って、何がいつ、どのように変化したか」を可視化したい場面で力を発揮する。
折れ線グラフが有効な分析用途としては、時系列データの変化・トレンドの把握、変化率や増減の比較、複数系列の比較、異常検知・外れ値の発見、実験・シミュレーション結果の可視化などが挙げられる。
折れ線グラフが適しているデータの特徴としては、横軸が 時間や連続的な数値(年月日、時刻、距離、温度など)、縦軸が 数量(売上、アクセス数、スコアなど)、変化の傾向・方向性が重要なデータなどがある。
折れ線グラフ作成のためのサンプル入力データは以下のようになる。
analysis_data = { "nodes": [ { "id": "A", "label": "AI技術", "x": 0, "y": 2 }, { "id": "B", "label": "機械学習", "x": 1, "y": 4 }, { "id": "C", "label": "深層学習", "x": 2, "y": 6 }, { "id": "D", "label": "自然言語処理", "x": 3, "y": 5 }, { "id": "E", "label": "生成AI", "x": 4, "y": 8 } ], "metadata": { "output_type": "line" } }
2.3.4. バブルチャート

バブルチャート(Bubble Chart)は、3つ以上の数値データの関係性を一度に可視化できるチャートで、特に、「2軸で関係性を見ながら、さらに別の量的情報も同時に見たい」という場面で有効なアプローチとなる。
バブルチャートが有効な分析用途としては、売上(x軸)×利益率(y軸)×販売数(バブルサイズ)、GDP(x)×寿命(y)×人口(バブル)などの国別比較(有名なGapminderスタイル)などの多変量データの関係性の可視化、2軸+バブルの大きさ(さらに色も使えば4次元可視化も可能)、各事業の「成長率×市場シェア×売上規模」の視覚化(BCGマトリクス+バブル)、プロダクトごとの収益性・競争力の比較などの事業・製品ポートフォリオ分析、顧客層の「年齢×支出×人数」、または「エンゲージメント×離脱率×顧客数」などのマーケティングや顧客セグメント分析、製品やブランドの「価格×性能×知名度」などの比較、他社とのポジションマップに自社をプロットなどの競合比較・ポジショニング、「温度×圧力×反応速度」など、3変数間のトレンド確認などの相関関係や非線形な傾向の探索に向いている。
バブルチャートが適したデータの特徴としては、X軸・Y軸に数値データがある、各点に「大きさで表現できる数値(第三の変数)」がある、比較対象が複数ある(10~50点程度が視認性◎)などがある。
バブルチャート作成のためのサンプル
analysis_data = { "nodes": [ { "id": "A", "label": "AI技術", "value": 10 }, { "id": "B", "label": "機械学習", "value": 7 }, { "id": "C", "label": "深層学習", "value": 5 } ], "metadata": { "output_type": "Bubble" } }
2.3.5. ツリー構造図

ツリー構造図(Tree Diagram)は、階層的な関係や分類構造を明確に可視化するための図で、特に「全体がどう分岐しているか?」「上位カテゴリから下位がどう展開されているか?」を分析・説明するのに非常に有効なアプローチとなる。
ツリー構造図が有効な分析用途としては、商品カテゴリ(例:家電→AV機器→テレビ)、組織図(会社→部門→チーム→メンバー)、フォルダやファイル構成の可視化などの分類・構造の把握、決定木分析(Decision Tree)による分類・予測モデル、問題の原因分析(なぜなぜ分析、特に5 Whys)、要素分解ツリー(MECEに基づいた分析)などの思決定や問題解決のプロセス分析、売上やコストの階層的内訳の把握(例:国→地域→店舗)、KPI分解ツリー(売上 = 単価 × 数量 など)などの数値を含む階層構造の分析、系統樹・進化の可視化や、アルゴリズムやプログラムの構造可視化などが挙げられる。
ツリー構造図が適したデータの特徴としては、明確な「親子関係」「上位→下位」の関係をもつ、分岐構造があり、全体→部分へと掘り下げるイメージがある、特定のルートをたどる分析(経路・選択)に意味があることなどがある。
ツリー構造図を作成する為のサンプル入力データは以下のようになる。
analysis_data = { "treeData": { "name": "AI技術", "children": [ { "name": "機械学習", "children": [ { "name": "教師あり学習" }, { "name": "教師なし学習" } ] }, { "name": "深層学習", "children": [ { "name": "CNN" }, { "name": "RNN" } ] }, { "name": "自然言語処理" } ] }, "metadata": { "output_type": "tree" } }
2.3.6. ヒートマップ

ヒートマップ(Heatmap)は、数値データの分布や傾向、強弱を直感的に色で表現できる強力な可視化手法で、特に「どこが多い/少ない/高い/低い?」というパターンを一目で把握したいときに有効なアプローチとなる。
ヒートマップが有効な分析用途としては、行列データのパターン把握(クロス集計や相関)、地理情報の密度や分布の可視化(地理ヒートマップ)、Webページやアプリのユーザー行動分析、時間と活動の関係可視化(カレンダー・時系列)、バイオ・遺伝子解析などの科学データなどが挙げられる。
ヒートマップに適したデータの特徴としては、行×列のマトリクス(数値が並んでいる表形式)、「強い・弱い」「高い・低い」といったグラデーションで意味がある、時間軸や空間軸と組み合わせるとさらに効果的などがある。
ヒートマップデータの作成の為のサンプル入力データは以下のようになる。
analysis_data = { "matrix": [ { "row": "AI技術", "col": "2020", "value": 3 }, { "row": "AI技術", "col": "2021", "value": 7 }, { "row": "AI技術", "col": "2022", "value": 9 }, { "row": "機械学習", "col": "2020", "value": 2 }, { "row": "機械学習", "col": "2021", "value": 5 }, { "row": "機械学習", "col": "2022", "value": 8 }, { "row": "深層学習", "col": "2020", "value": 4 }, { "row": "深層学習", "col": "2021", "value": 6 }, { "row": "深層学習", "col": "2022", "value": 7 } ], "metadata": { "output_type": "heatmap" } }
2.3.7. ネットワーク図

ネットワーク図(Network Diagram)は、モノ同士の関係性(リンク)を可視化する分析に有効で、特に以下のような「誰が誰とつながっているのか?」「どことどこが影響しあっているのか?」といった構造や関係性の分析で力を発揮するアプローチとなる。
ネットワーク図が有効な分析用途としては、ソーシャルネットワーク分析で中心にいる人物、橋渡し役、孤立しているノードなどを視覚的に把握したり、知識グラフ・概念マップの可視化で関連度の高い概念群を可視化し、思考の整理や探索に使ったり、リンク構造やWebの分析、バイオ・化学・物理の構造理解、サプライチェーン・取引ネットワーク、アルゴリズム・因果・情報伝達の流れにも利用することができる。
ネットワーク図が適しているデータの特徴としては、関係性やリンクがデータに含まれている(例:A→B のような情報)、階層やツリー構造では表現しきれない「複雑なつながり」がある、ノードの属性(ラベル、重み、カテゴリーなど)があるとさらに効果的などがある。
ネットワーク図を作成する為のサンプル入力データは以下のようになる。
analysis_data = { "nodes": [ { "id": "A", "label": "AI技術", "value": 10 }, { "id": "B", "label": "機械学習", "value": 7 }, { "id": "C", "label": "深層学習", "value": 5 }, { "id": "D", "label": "自然言語処理", "value": 6 } ], "links": [ { "source": "A", "target": "B", "weight": 2 }, { "source": "B", "target": "C", "weight": 1 }, { "source": "A", "target": "D", "weight": 3 } ], "metadata": { "output_type": "network" } }
2.3.7. サンキー図

サンキー図(Sankey diagram)は、フロー(流れ)や量の移動を視覚的に捉えるための図で、特に「何がどこからどこへ、どれだけ流れているか」を分析したいときにとても有効なアプローチとなる。
サンキー図が有効な分析用途としては、エネルギー・資源の流れ分析やコスト・予算・収支の流れ、プロセスやフローの分岐分析、ユーザービヘイビア(行動)の遷移分析(どこからどこへどれだけのユーザーが移動したか)などがある。
サンキー図が特に力を発揮するデータの特徴としては、量的なフローが存在する、分岐・合流がある、出発点と到達点が異なるなどがある。
サンキー図を作成する為のサンプル入力データは以下のようになる。
analysis_data = { "nodes": [ { "id": "A", "label": "AI技術", "name": "AI技術" }, { "id": "B", "label": "機械学習", "name": "機械学習" }, { "id": "C", "label": "深層学習", "name": "深層学習" }, { "id": "D", "label": "応用分野", "name": "応用分野" } ], "links": [ { "source": "A", "target": "B", "value": 5 }, { "source": "B", "target": "C", "value": 3 }, { "source": "C", "target": "D", "value": 4 } ], "metadata": { "output_type": "sankey" } }
2.3.8. サンバースト図

サンバースト図(Sunburst chart)は、階層構造を持つデータの可視化に有効なチャートとなる。
サンバースト図が有効な分析用途としては、フォルダ構成、分類体系、Webサイトの情報構造、製品構成などで階層ごとの数値比較をしたり、ユーザーがWebサイトでたどるページ遷移の可視化や、プロセスフローやユーザー体験の段階的分析などでパスや分岐の多さ・深さを視覚的に把握したり、トピック→サブトピック→概念 といった知識体系の整理をするなどが挙げられる。
サンバースト図に適しているデータの特徴としては、ツリー構造(JSONやネストされたデータ)、各ノードに数値がひもづいているとさらに効果的(例:売上、件数、コストなど)などがある。
サンバースト図を作成する為のサンプル入力データは以下のようになる。
analysis_data = { "treeData": { "name": "AI技術", "children": [ { "name": "機械学習", "children": [ { "name": "教師あり学習", "value": 5 }, { "name": "教師なし学習", "value": 3 } ] }, { "name": "深層学習", "children": [ { "name": "CNN", "value": 4 }, { "name": "RNN", "value": 2 } ] }, { "name": "自然言語処理", "value": 6 } ] }, "metadata": { "output_type": "sunburst" } }
2.3.9. ワードクラウド

Word Cloud(ワードクラウド)は、テキストデータを視覚的に要約・分析する手法のひとつとなる。
Word Cloud図が有効な分析用途としては、、大量のテキスト(SNS投稿、アンケート回答、レビュー、記事など)から、 頻出語や特徴語を一目で把握し、頻出単語ほど文字サイズが大きくなるため、重要キーワードが視覚的に目立、時系列・属性別に並べて表示することで、傾向の違いを視覚化、カテゴリ分けと組み合わせることで、特定の感情やテーマごとに分けたワードクラウドを作るこ
WordCloudに適しているデータの特徴としては、トピックやキーワードの抽出が目的、自然言語、量が多いが整理されていない、頻度ベースの可視化に意味があるなどがある。
Word Cloud図を作成する為のサンプル入力データは以下のようになる。
analysis_data = { {"nodes": [ { "id": "A", "label": "AI技術", "value": 10 }, { "id": "B", "label": "機械学習", "value": 7 }, { "id": "C", "label": "深層学習", "value": 5 }, { "id": "D", "label": "自然言語処理", "value": 6 } ], "links": [...], "metadata": { "output_type": "wordcloud" } }}
3. 実装
Viewエージェントの実装例を以下に示す。本実装では、データの入出力はXTDB等を介したものとなるが、ここではダミー入力の形式での実装となっている。
まずフォルダー構成は以下のようになる。
├── app.py └── static ├── images │ ├── ai.png │ ├── dl.png │ ├── ml.png │ └── nlp.png ├── index-bar.html ├── index-bubble.html ├── index-heatmap.html ├── index-line.html ├── index-network.html ├── index-sankey.html ├── index-scatter.html ├── index-sunburst.html ├── index-table.html ├── index-tree.html ├── index-wordcloud.html └── index2.html
App.pyのコードは以下のようになる。
from flask import Flask, send_from_directory, jsonify
app = Flask(__name__, static_folder='static')
# メタデータ付きハードコードデータ
analysis_data = {
"nodes": [
{ "id": "A", "label": "AI技術", "value": 10, "x": 0, "y": 2, "image": "/images/ai.png", "link": "" },
{ "id": "B", "label": "機械学習", "value": 7, "x": 1, "y": 4, "image": "/images/ml.png", "link": "" },
{ "id": "C", "label": "深層学習", "value": 5, "x": 2, "y": 6, "image": "/images/dl.png", "link": "" },
{ "id": "D", "label": "自然言語処理", "value": 6, "x": 3, "y": 5, "image": "/images/nlp.png", "link": "" }
],
"links": [
{ "source": "A", "target": "B", "weight": 2, "label": "関連", "type": "related_to", "value": 5 },
{ "source": "B", "target": "C", "weight": 1, "label": "派生", "type": "derived_from", "value": 3 },
{ "source": "A", "target": "D", "weight": 3, "label": "応用", "type": "applied_to", "value": 4 }
],
"heatmap": [
[1, 2, 3, 4],
[2, 4, 6, 8],
[3, 6, 9, 12],
[4, 8, 12, 16]
],
"treeData": {
"name": "AI技術",
"children": [
{
"name": "機械学習",
"children": [
{ "name": "教師あり学習", "value": 5 },
{ "name": "教師なし学習", "value": 3 }
]
},
{
"name": "深層学習",
"children": [
{ "name": "CNN", "value": 4 },
{ "name": "RNN", "value": 2 }
]
},
{
"name": "自然言語処理",
"value": 6
}
]
},
"metadata": {
"output_type": "wordcloud" # ← bar, bubble, network に変更してテストできる
}
}
@app.route('/')
def index():
output_type = analysis_data.get("metadata", {}).get("output_type", "default")
filename = f'index-{output_type}.html'
try:
return send_from_directory(app.static_folder, filename)
except:
return send_from_directory(app.static_folder, 'index2.html') # フォールバック
@app.route('/api/analysis')
def get_analysis():
return jsonify(analysis_data)
if __name__ == '__main__':
app.debug = True
app.run(host='0.0.0.0', port=8000)
htmlのサンプルコードは以下のようになる。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Scatter Plot</title> <script src="https://d3js.org/d3.v7.min.js"></script> <style> svg { border: 1px solid #ccc; } </style> </head> <body> <h2>Scatter Plot</h2> <svg width="800" height="600"></svg> <script> fetch('/api/analysis') .then(res => res.json()) .then(data => { const nodes = data.nodes; const svg = d3.select("svg"); const width = +svg.attr("width"); const height = +svg.attr("height"); const margin = { top: 40, right: 40, bottom: 50, left: 50 }; const plotWidth = width - margin.left - margin.right; const plotHeight = height - margin.top - margin.bottom; const xScale = d3.scaleLinear() .domain([0, d3.max(nodes, d => d.x) || 10]) .range([0, plotWidth]); const yScale = d3.scaleLinear() .domain([0, d3.max(nodes, d => d.y) || 10]) .range([plotHeight, 0]); const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // 軸 g.append("g") .attr("transform", `translate(0, ${plotHeight})`) .call(d3.axisBottom(xScale)); g.append("g") .call(d3.axisLeft(yScale)); // 散布図の点 g.selectAll("circle") .data(nodes) .enter() .append("circle") .attr("cx", d => xScale(d.x)) .attr("cy", d => yScale(d.y)) .attr("r", d => d.value || 5) .attr("fill", "steelblue"); // ラベル g.selectAll("text.label") .data(nodes) .enter() .append("text") .attr("class", "label") .attr("x", d => xScale(d.x)) .attr("y", d => yScale(d.y) - 10) .attr("text-anchor", "middle") .text(d => d.label); }); </script> </body> </html>
4. 発展形
View Agentは、必要に応じて可視化コードのテンプレートを追加することでフレキシブルに拡張することができる。また、それぞれのテンプレートでの微修正はHITL(Human In The Loop)構造として、<一旦テンプレートで表示>→<一部修正したい>→<利用したテンプレートと、修正の方向性を示し、新たなテンプレートの作成をプロンプトで指示>→<新たなテンプレートで表示>のような形でループを形成し、修正していくことができる。
これは例えば以下のような棒グラフにおいて

バーの色を赤く、幅も少なくしたい時、プロンプトとして”バーの色を赤にして、バーの幅を半分にして”と指示すると、以下のようなものを表示されるような形で利用することができる。

その他の発展形としては以下のものを想定している。
4.1. LLMエージェント連携
ChatGPT/ローカル分析AIからの返答を、自動的に最適な形で可視化
4.2. 動的データバインディング
– CSV/グラフやファイルアップロードによるデータ連携
4.3. リアルタイム協同編集
– 複数ユーザーによる同時表示・レイアウト上の分析
5. 終わりに
View Agentは、「表示」という残されがちな分析プロセスの最後段階を主張し、データを「なぜそう見えるか」まで含めて視覚化するためのプラットフォームを提供するものとなる。これらを他の先進的なAI分析エージェント分析ツールと連携することで、よりヒューマンオリエンティッドな分析環境を提供することができる。
6. 参考図書
- The Visual Display of Quantitative Information
- Infographics
- Flask Web Development: Developing Web Applications with Python
- Learn D3.js: Create interactive data-driven visualizations for the web with the D3.js library
- An Introduction to Multi-Agent Systems
- Artificial Intelligence: Foundations of Computational Agents
- 100 Things Every Designer Needs to Know About People

Chinoba
Intelligence as Relationship
Research Platform
founded by
Masao Watanabe
AI Systems Architecture
Decision Trace
Human–AI Coordination
Algorithmic Governance
Related Research
この記事は Chinoba Knowledge Base の一部です。

コメント