系統樹(ツリー構造)をグラフィカルに表示したい

WEBデザインJavaScript

動機

生物の進化や分類に興味があって日々調べているんですが、
ネットを漁っているとこんな画像をよく見かけます。 まさにツリーです。 諸説ありますが生物はまず3つのドメインに分類され、さらに界・門・綱・目・科・属・種と分類されます。
例えば我々ヒトであれば、真核生物ドメインの動物界の脊索動物門の哺乳綱のサル目のヒト科のヒト属のホモ・サピエンスであると言えます。

これもまた諸説ありますが種の総数は175万種とも言われます。
この膨大なデータを1枚の画像に収めるのは至難の業です。
そこでjavascriptで動的にノードを表示できるライブラリを探してみました。
検索にはtreeの他にDendrogram、visualizationなどのワードが役に立ちそうです。

使えそうなライブラリ

jsTree


https://www.jstree.com/
エクスプローラーのようなディレクトリ構造
クリックで開閉できる。

Treeviz

https://github.com/PierreCapo/treeviz
ぬるぬる動くのがいいです。

D3.js

データビジュアライゼーション用の巨大なライブラリ
ギャラリーを見ると系統樹以外にも大量のデモがあります。 https://bl.ocks.org/mbostock/c034d66572fd6bd6815a
似たようなことを既にやってる方がいらっしゃいました。 https://bl.ocks.org/mbostock/e9ba78a2c1070980d1b530800ce7fa2b
ツリービューも https://observablehq.com/@d3/zoomable-sunburst
サンバーストという表現法もありそうです。

まとめ

手軽に表現できるライブラリもいいですが、D3.jsの自由度は魅力に感じてしまいます。 次回は実際に使ってみます。