phylogenetic-tree — Phylogeny Visualization
Newick / 距離行列 → 横 / 放射状 / 分岐図 3 モード + 内蔵 NJ (外部ライブラリ 0、MSA-Viewer 連携、ko/en/ja)。
📖 定義
Newick / 距離行列を入力し、横 / 放射状 / 分岐図の 3 モードで可視化する無料系統樹ツール。自前 Newick 1.0 パーサー (Felsenstein 1986/1990 + Olsen 1990 + NHX)、自前 Neighbor-Joining (Saitou & Nei 1987 正確再現)、自前 SVG レイアウト 3 種 + 自前座標 lerp / cubic-bezier アニメーション。外部 npm 依存 0。
🎯 目的
(1) iTOL / FigTree の英語学習負担を解消 + 韓日統合エントリ (2) MSA-Viewer 連携 — 距離行列を自動生成 → 系統樹 (3) 30 秒以内のインタラクティブ可視化 (4) 外部 lib 0 — D3.js / d3-hierarchy / phylotree.js / Chart.js を自前 stack で代替
🔧 使い方
① Newick を貼り付け、または .nwk ドロップ ② 横 / 放射状 / 分岐図を選択 ③ 葉検索 (200 ms debounce) + ズーム/パン ④ 内部ノードクリック → クレード色 (8 色パレット) ⑤ SVG / PNG / Newick エクスポート (round-trip 保持) ⑥ 距離行列モード: TSV → NJ → 系統樹 (Saitou-Nei 1987)
💡 例
例 1) ホミニド 5 種 — Newick ベースライン + 横フィログラム 例 2) グロビン — 「Hb_alpha」検索ハイライト + 自動スケールバー 例 3) 16S rRNA 30 種細菌 — 放射状 Equal-Angle (Phase 3 Daylight 動機) 例 4) SARS-CoV-2 変異株 — 放射状分布 例 5) 分岐図のみ — 枝長 0、トポロジーのみ
ツールガイド
定義
phylogenetic-tree は Newick / Nexus / 距離行列を入力し、横 (矩形デンドログラム) / 放射状 (Meacham 1984 Equal-Angle) / 分岐図 (分岐位相のみ) の 3 モードで可視化する無料系統樹ツール。自前 Newick 1.0 パーサ (Felsenstein 1986/1990 + Olsen 1990 + NHX 拡張、S/T/D/AC/Sw/GN フィールド事前抽出)、Saitou & Nei 1987 Neighbor-Joining (Table 1 Figure 1 一致検証)、SVG レイアウト 3 種 + 自前座標 lerp / cubic-bezier アニメーション + React useTransition をすべて自前実装 — 外部 npm 依存 0 (D3.js 873 KB / d3-hierarchy / d3-transition / phylotree.js / tnt.tree / Chart.js すべて自前 stack で代替)。Cross-Check verified の 6 件 (Equal-Daylight Phase 3 保留 / 4 段 SVG↔Canvas ヒューリスティック / 自前 lerp+cubic-bezier / 非対称行列 4 オプションモーダル + 平均対称化 default / MSA アルファベット自動検出 + 推奨モデル + 飽和警告) を反映。
目的
(1) iTOL / FigTree は英語かつ学習負担が高い — ko/en/ja 統合エントリ (2) MSA-Viewer (BL-109) 連携 — 整列結果から距離行列 → 系統樹を自動構築 (3) 30 秒以内のインタラクティブ可視化 (4) 外部 npm lib 0 — D3.js 873 KB / d3-hierarchy / phylotree.js / Chart.js すべて自前 stack で代替 (5) ko/en/ja 学術標準用語 (Phylogenetic tree / Clade / Branch / Bootstrap / NJ 等 30+ 用語) (6) NHX 事前抽出フィールド (species / taxId / isDuplication) → ワンクリックで NCBI Taxonomy / UniProt / NCBI Nuc / mygene-search
使い方
① Newick 貼り付け、または .nwk / .tree / .newick / .tre / .nh ドロップ ② 「横 / 放射状 / 分岐図」レイアウトトグル (自前座標 lerp + cubic-bezier 380 ms アニメ) ③ 葉名検索 (200 ms debounce) — viewBox 自動センター + 黄色ハイライト ④ ズーム (ホイール) / パン (ドラッグ) / リセット / 全体表示 — viewBox affine ⑤ 内部ノードクリック → クレード色 (BioPlayground 8 色パレット) ⑥ Export — SVG (Inkscape/FigTree 互換) / PNG (自前 Canvas 変換 2x) / Newick (round-trip) ⑦ 距離行列モード: TSV → 距離モデル選択 (p / JC69 / K2P / Poisson) → NJ → 系統樹。非対称入力時は自動モーダル (PHYLIP/MEGA 標準の平均対称化 default) ⑧ sessionStorage `bioplayground.msa.aligned` 検出時に自動 NJ バナー — ワンクリック確定 ⑨ NHX タグ (S/T/D/AC/Sw/GN) 自動抽出 → ノード詳細パネル → NCBI Taxonomy / UniProt / mygene-search リンク
例
例 1) ホミニド 5 種 (Newick ベースライン) → ((Human:0.1,Chimp:0.1):0.05,(Gorilla:0.15,Orang:0.18):0.04,Gibbon:0.3); → leaf=5、internal=3、枝長 ✓ / 横デンドログラム / スケールバー 0.05 自動 例 2) グロビンファミリー (Hb α/β/γ/δ + Myoglobin + Lamprey) → 横デンドログラム、「Hb_alpha」検索 → viewBox 自動センター + 黄色ハイライト → 8 色パレットで Hb クラスタ強調 例 3) 16S rRNA 30 種細菌 (Gram+ vs Gram−) → Radial Equal-Angle (Meacham 1984) 自前実装 — 30 葉 → Phase 3 Equal-Daylight 動機 (密集偏り基準) 例 4) SARS-CoV-2 変異株 (Wuhan / Alpha / Beta / Gamma / Delta / Omicron BA.1/BA.2/BA.4/BA.5/XBB/JN.1) → 放射状分布 — 時間進化 + 変異分岐が一目で 例 5) 分岐図のみ (((A,(B,C)),((D,E),F))) — 枝長 0 → 分岐図モード — 等間隔 depth + 葉右整列