phylogenetic-tree — Phylogeny Visualization

Newick / distance-matrix → horizontal / radial / cladogram in 3 modes + built-in NJ (zero external libs, MSA-Viewer bridge, ko/en/ja).

📖 Definition

A free phylogeny visualizer for Newick / distance-matrix input rendered in three layouts — horizontal, radial, cladogram. Built-in Newick 1.0 parser (Felsenstein 1986/1990 + Olsen 1990 + NHX), Neighbor-Joining (Saitou & Nei 1987 exact), SVG layouts (Horizontal 2-pass + Radial Equal-Angle + Cladogram), and self-implemented coordinate-lerp + cubic-bezier animations — zero external npm dependencies.

🎯 Purpose

(1) Lower the iTOL / FigTree English learning curve with a ko/en/ja entry (2) MSA-Viewer integration — auto distance matrix → tree (3) Interactive view in under 30 seconds (paste → render → external links) (4) Zero external libs — D3.js 873KB / d3-hierarchy / phylotree.js / Chart.js all replaced

🔧 How to use

① Paste Newick or drop a .nwk file ② Pick horizontal / radial / cladogram ③ Search leaves (200 ms debounce) + zoom/pan (wheel + drag) ④ Click an internal node → pick a clade color (8-swatch palette) ⑤ Export SVG / PNG / Newick (round-trip preserved) ⑥ Distance matrix mode: paste TSV → NJ → tree (Saitou-Nei 1987 exact)

💡 Examples

Ex 1) Hominid 5 — Newick baseline + horizontal phylogram Ex 2) Globin family — "Hb_alpha" search highlight + auto scale bar Ex 3) 16S rRNA 30 bacteria — Radial Equal-Angle (Phase 3 Daylight motivation) Ex 4) SARS-CoV-2 variants — radial distribution Ex 5) Cladogram only — zero branch lengths, topology only

Tool Guide

Definition

phylogenetic-tree is a free Newick / Nexus / distance-matrix viewer rendered in three layouts — horizontal (rectangular dendrogram), radial (Meacham 1984 Equal-Angle), and cladogram (topology-only). Self-implemented Newick 1.0 parser (Felsenstein 1986/1990 + Olsen 1990 + NHX with S/T/D/AC/Sw/GN field pre-extraction), Saitou & Nei 1987 Neighbor-Joining (verified against the original paper Table 1 Figure 1), three SVG layouts + self-written coordinate-lerp / cubic-bezier animation + React useTransition — zero external npm dependencies (D3.js 873 KB / d3-hierarchy / d3-transition / phylotree.js / tnt.tree / Chart.js all replaced in-house). Cross-Check verified six decisions baked in: Equal-Daylight deferred to Phase 3 / 4-tier SVG↔Canvas heuristic / self-written lerp + cubic-bezier / 4-option asymmetric-matrix modal with average-symmetrize default (PHYLIP / MEGA standard) / MSA alphabet auto-detection + recommended model + saturation warning (Srivathsan & Meier 2012).

Purpose

(1) iTOL / FigTree are English-only with a steep learning curve — provide a ko/en/ja unified entry point (2) MSA-Viewer (BL-109) bridge — automatic NJ from aligned sequences (distance matrix → tree) (3) Interactive view in under 30 seconds (paste → render → external links) (4) Zero external npm libs — D3.js 873 KB / d3-hierarchy / phylotree.js / Chart.js all replaced in-house (5) Academic ko/en/ja terminology (phylogenetic tree, clade, branch, bootstrap, NJ, etc. — 30+ terms) (6) NHX pre-extracted fields (species / taxId / isDuplication) → one-click deep links to NCBI Taxonomy / UniProt / NCBI Nuc / mygene-search

How to Use

① Paste Newick or drop a .nwk / .tree / .newick / .tre / .nh file ② Toggle horizontal / radial / cladogram (self-written coord-lerp + cubic-bezier 380 ms animation) ③ Search leaf names (200 ms debounce) — auto viewBox center + yellow highlight ④ Zoom (wheel) / pan (drag) / Reset / Fit-to-screen — viewBox affine ⑤ Click an internal node → pick a clade color (8-swatch BioPlayground palette) ⑥ Export — SVG (Inkscape/FigTree compatible) / PNG (in-house canvas 2x) / Newick (round-trip) ⑦ Distance-matrix mode: paste TSV → pick distance model (p / JC69 / K2P / Poisson) → NJ → tree. Asymmetric input triggers an auto modal (mean-symmetrize default per PHYLIP / MEGA). ⑧ When sessionStorage `bioplayground.msa.aligned` is detected the auto-NJ banner appears — one-click confirm ⑨ NHX tags (S / T / D / AC / Sw / GN) auto-extracted → node detail panel → NCBI Taxonomy / UniProt / mygene-search external links

Examples

Example 1) Hominid 5 (Newick baseline) → ((Human:0.1,Chimp:0.1):0.05,(Gorilla:0.15,Orang:0.18):0.04,Gibbon:0.3); → leaf=5, internal=3, branch lengths ✓ / horizontal dendrogram / auto scale bar 0.05 Example 2) Globin family (Hb α/β/γ/δ + Myoglobin + Lamprey) → Horizontal dendrogram; search "Hb_alpha" → auto viewBox center + yellow highlight → Highlight the Hb cluster with the 8-swatch palette Example 3) 16S rRNA 30 bacteria (Gram+ vs Gram−) → Radial Equal-Angle (Meacham 1984) self-implemented — 30 leaves → Motivates Phase 3 Equal-Daylight (density bias baseline) Example 4) SARS-CoV-2 variants (Wuhan / Alpha / Beta / Gamma / Delta / Omicron BA.1/BA.2/BA.4/BA.5/XBB/JN.1) → Radial distribution — variant branching at a glance Example 5) Cladogram only (((A,(B,C)),((D,E),F))) — zero branch lengths → Cladogram mode — uniform depth + right-aligned leaves