visualization

sunburst
Circle Packing
Circular Treemap
GitHub Commit History Visualization

リポジトリ・コード構造の視覚化プロジェクトまとめ

コードベースの構造、複雑性、依存関係、および開発履歴を空間的にマッピングして視覚化するプロジェクトをまとめました。

パッケージを「区画」、クラスやファイルを「建物」に見立てて、その高さや面積でコードメトリクスを表現する手法です。

プロジェクト名	視覚化スタイル	特徴・メリット	導入・実行方法
CodeCharta	矩形 (Treemap)	コード行数や複雑度を建物の高さや面積にマッピング。最も多機能で実用的。	Web版 / CLI / 各種プラグイン
JSCity	矩形 / 円形	JavaScriptコードを3D都市として視覚化。フォルダを地区、ファイルを建物として配置。	Three.jsベースのWebアプリ
CodeCity	矩形 (Treemap)	この分野の先駆け。Javaなどの解析に対応し、3D都市視覚化の基礎を確立。	Smalltalkベース (Moose)
City Blocks	矩形 (Treemap)	Gitリポジトリを3D都市化。ファイルサイズやコミット頻度を建物の属性に反映。	Node.js / Git環境
VariCity	クラスタリング	ソフトウェアの「変動性」に特化。特定の機能がどこに集中しているかを把握。	研究プロジェクト

ファイル間の「つながり」を3D空間上のネットワークや力学モデルとして表現するアプローチです。

プロジェクト名	視覚化スタイル	特徴・メリット	導入・実行方法
dep-tree	3D 球体グラフ	コードの「エントロピー（乱雑さ）」を視覚化。円形（球体）のノードが有機的に配置される。	`npx @dep-tree/cli entropy <file>`
emerge	2D/3D グラフ	依存関係やメトリクスをインタラクティブに描画。多くの言語に対応。	Python / pip
3d-force-graph	3D ネットワーク	多くの3Dコード視覚化ツールの基盤となるライブラリ。自作の際に最適。	JavaScript ライブラリ

コードの「構造」だけでなく、「時間的な変化」を空間的に表現します。

プロジェクト名	視覚化スタイル	特徴・メリット	導入・実行方法
Git Truck	2D/3D マップ	誰がどのファイルを触ったか、構造の変遷をブラウザで即座に確認可能。	`npx -y git-truck`
Gource	成長する樹木	開発履歴をアニメーションで表現。チームの動きを視覚化するのに最適。	OSごとのバイナリ
Git Commits Threadline	3D 糸状グラフ	コミット履歴が糸のように繋がって成長していく様子をアニメーション化。	Webデモ / ローカルビルド