phylogenetic-tree는 Newick / Nexus 계통수 텍스트 또는 거리 행렬을 입력받아 가로(사각형 dendrogram) / 방사형(Radial Equal-Angle, Meacham 1984) / 분지도(Cladogram, branch length 무시) 3가지 레이아웃으로 시각화하는 무료 도구입니다. 자체 Newick 1.0 파서 (Felsenstein 1986/1990 + Olsen 1990 + NHX 확장 사전 추출 — S/T/D/AC/Sw/GN 필드 분리), 자체 Neighbor-Joining (Saitou & Nei 1987 Mol Biol Evol 4(4):406-425 정확 재현, T1 Table 1 Figure 1 일치 검증), 자체 SVG 레이아웃 3종 + 자체 좌표 lerp / cubic-bezier 애니메이션 + React useTransition 모두 BioPlayground 내부에서 구현 — 외부 npm 의존 0 (D3.js 873KB / d3-hierarchy / d3-transition / phylotree.js / tnt.tree / Chart.js 모두 자체 stack으로 대체). 04 Cross-Check verified 6 의사결정 모두 반영: Equal-Daylight Phase 3 보류 / 4단 SVG↔Canvas 자체 휴리스틱 / 자체 lerp+cubic-bezier / 비대칭 행렬 4-옵션 모달 + 평균 대칭화 default (PHYLIP/MEGA 표준) / MSA 알파벳 자동 감지 + default 추천 + saturation 사전 경고 (Srivathsan & Meier 2012).

(1) iTOL / FigTree 영문 + 학습 곡선이 높음 — 한국어/일본어 통합 진입점 (2) MSA-Viewer (BL-109) 연계 자동 NJ — 정렬 결과를 자동으로 거리 행렬 → 트리로 변환 (3) 30초 이내 인터랙티브 시각화 도달 (Newick 입력 → 렌더 → 외부 링크) (4) 외부 npm lib 0 baseline — D3.js 873KB / d3-hierarchy / phylotree.js / Chart.js 모두 자체 stack 대체 (5) ko/en/ja 학술 표준 용어 매핑 (Phylogenetic tree / Clade / Branch / Bootstrap / NJ 등 30+ 용어) (6) NHX 사전 추출 필드 (species / taxId / isDuplication) → 1-클릭 NCBI Taxonomy / UniProt / NCBI Nuc / mygene-search deep link

① Newick 텍스트 붙여넣기 또는 .nwk / .tree / .newick / .tre / .nh 파일 드롭 ② "가로 / 방사형 / 분지도" 레이아웃 토글 (자체 lerp 좌표 보간 + cubic-bezier 380 ms 애니메이션) ③ 잎 이름 검색 (200 ms debounce) — 자동 viewBox center + 노란 highlight ④ 줌 (마우스 휠) / 팬 (드래그) / Reset / Fit-to-screen — viewBox affine ⑤ 내부 노드 클릭 → 자식 subtree 색상 선택 (BioPlayground 8 색 팔레트) ⑥ Export — SVG (Inkscape/FigTree 호환) / PNG (자체 Canvas 변환 2x) / Newick (round-trip 가능) ⑦ 거리 행렬 모드: TSV 입력 → 거리 모델 선택 (p / JC69 / K2P / Poisson) → NJ → 트리. 비대칭 시 평균 대칭화 모달 자동 노출 (PHYLIP/MEGA 표준). ⑧ MSA-Viewer에서 sessionStorage `bioplayground.msa.aligned` 감지 시 자동 NJ 배너 노출 — 1-클릭 confirm ⑨ NHX 태그 (S/T/D/AC/Sw/GN) 자동 추출 → 노드 detail 패널 → NCBI Taxonomy / UniProt / mygene-search 외부 링크

예 1) 호미니드 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 length ✓ / 가로 모드 표준 / 스케일 바 0.05 자동 예 2) Globin family (Hb α/β/γ/δ + Myoglobin + Lamprey) → 가로 dendrogram, "Hb_alpha" 검색 → 자동 viewBox center + 노란 highlight → 8 색 팔레트로 Hb 클러스터 강조 예 3) 16S rRNA 30 박테리아 (Gram+ vs Gram−) → Radial Equal-Angle (Meacham 1984) 자체 구현 — 30 leaf 정렬 → Phase 3 Equal-Daylight 도입 동기 (밀집 편향 baseline) 예 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))) — branch length 0 → Cladogram 모드 — 등간격 depth + leaf 우측 정렬