LLM Embeddingモデルでデータを可視化するWebアプリを開発
OpenAIのEmbeddingモデルを活用して、あらゆるテキストデータを簡単にネットワークグラフで可視化できるWebアプリケーションを開発しました。アニメ、ドラマ、ゲーム、企業、都市、食品など、どんなデータでもCSV/XLSXファイルをアップロードするだけで、データ間の関係性が美しいインタラクティブなグラフとして表現されます。
このアプリの魅力
「とにかく簡単」が最大の特徴です。プログラミング不要で、テキストデータさえあれば、誰でも数クリックでプロフェッショナルな可視化が可能です。
- 好きなアニメ作品のリストを入れれば、ジャンルや雰囲気が近い作品が自動的にグループ化
- ドラマや映画のタイトルを並べれば、テーマや時代背景で分類
- ゲームのリストなら、ジャンルや世界観で関連性が可視化
- 企業名を入力すれば、業種や市場での類似性が明確に
- 都市名なら、文化や地理的特性で関係性が見える
- 食品データでは、野菜類、肉類、穀物類などが自然にクラスタリング
専門知識は一切不要。CSVまたはXLSXファイルをアップロードして「生成して可視化」ボタンを押すだけで、LLMが自動的にデータの意味を理解し、類似したものを近くに配置した美しいグラフを生成します。
実際の可視化例を見る
食品114種類のデータを可視化したサンプルを公開しています：
サンプル可視化結果を見る
このサンプルでは、野菜、肉類、穀物、果物などが自動的に色分けされたクラスタとして表示され、データ間の関係性が一目で理解できます。
プロジェクト概要
このアプリケーションは、テキストデータをOpenAIのtext-embedding-3-largeモデルでベクトル化し、コサイン類似度に基づいてデータ間の関係性を視覚的に表現します。特別なフレームワークを使わず、Vanilla JavaScriptとD3.jsで実装されています。
主な機能
- ファイル処理: CSV/XLSXファイルの自動解析とプレビュー表示
- ベクトル化: OpenAI APIによる3072次元のembedding生成
- 類似度計算: コサイン類似度に基づく関連性評価
- 自動クラスタリング: K-means法によるデータ分類（3～15クラスタ対応）
- インタラクティブ可視化: D3.jsを用いたネットワークグラフ描画
技術スタック
シンプルさを重視した構成になっています：
- フロントエンド: Vanilla JavaScript（フレームワーク不要）
- 可視化ライブラリ: D3.js v4
- 機械学習: K-meansクラスタリング（自作実装）
- API: OpenAI text-embedding-3-large
使い方
使用方法は非常にシンプルです：
- ライブデモを開く
- OpenAI APIキーを入力・保存（LocalStorageに保存されます）
- CSVまたはXLSXファイルをアップロード（または付属のサンプルデータを使用）
- 「生成して可視化」ボタンをクリック
活用シーン
このツールは様々な場面で活用できます：
- 教育・研究: データの関係性を視覚的に理解する教材として
- マーケティング: 商品や顧客セグメントの類似性分析
- コンテンツ分析: メディアや作品の傾向把握
- 趣味: 好きなアニメ、ゲーム、映画などの関係性を楽しむ
- データ探索: 大量のテキストデータの構造を素早く把握
リポジトリとデモ
ソースコードはMITライセンスでGitHubに公開しています：
github.com/kofujimura/data-visualization-using-LLM
すぐに試したい方はこちら：
ライブデモを開く
あなたの手元のデータを可視化して、新しい発見を楽しんでください。テキストデータさえあれば、LLMが自動的に意味を理解して美しいグラフに変換します。