hoodini-viz
v0.2.20TypeScript
Interactive phylogenetic and genomic visualization library
0/weekUpdated 1 weeks agoMITUnpacked: 7.6 MB
Published by pentamorfico
npm install hoodini-viz
$3
🎮 Live Demo · 📦 npm · 📖 Docs
---
🧬 What is this?
Hoodini-viz is a React library for interactive visualization of comparative genomics data at scale.
It displays phylogenetic trees alongside aligned gene neighborhood tracks, connecting homologous proteins across genomes with curved Bézier links colored by cluster or identity. Syntenic regions are highlighted with nucleotide-level alignments rendered as translucent polygons between tracks.
Each gene is drawn as a directional arrow showing strand orientation, with protein domains overlaid as colored boxes. Click any gene to view its metadata, predict its 3D protein structure on-demand, or explore ncRNA secondary structures with an embedded interactive viewer.
A virtualized data table lets you browse and filter millions of genes, domains, and links. All visual parameters (colors, dimensions, opacities, scales) are adjustable in real-time through the sidebar controls.
| 🚀 Scales | ⚡ Interactive | 🎨 Customizable | 🔬 Structures | 📄 Export |
|:---:|:---:|:---:|:---:|:---:|
| 100k+ genes | Zoom, pan, click | 50+ palettes | ESMFold/Boltz2 | SVG ready |
> 💡 Tip
>
> Looking to visualize your own genomes? Use Hoodini — the comparative genomics toolkit that fetches assemblies from NCBI, extracts gene neighborhoods, runs protein/nucleotide comparisons, annotates defense systems, builds trees, and generates ready-to-use visualizations. This library is the visualization engine that powers Hoodini's output.
---
📦 Install
npm / yarn / pnpm `` | CDN ` |
---
🚀 Usage
$3
Full Dashboard — includes sidebar, data loading, controls
`tsx
import { HoodiniDashboard } from 'hoodini-viz';
import 'hoodini-viz/style.css';
// With Parquet (recommended - 3-10x faster)
newick: '/data/tree.nwk',
gffParquet: '/data/genes.parquet',
hoodsParquet: '/data/hoods.parquet',
proteinLinksParquet: '/data/links.parquet',
}}
/>
`
`tsx`
// With TSV
newick: '/data/tree.nwk',
gff: '/data/genes.tsv',
hoods: '/data/hoods.tsv',
proteinLinks: '/data/links.tsv',
}}
/>
Core Visualization — bring your own UI and data loading
`tsx
import { HoodiniViz } from 'hoodini-viz';
gffFeatures={genes}
proteinLinks={links}
domainsByGene={domains}
hoods={hoods}
showTreeLayer={true}
showGeneLayer={true}
showProteinLinkLayer={true}
/>
`
$3
Full Dashboard (recommended) — zero dependencies, just HTML
`html`
`html`
Core Visualization — for advanced users who want full control
`html`
Manual React usage — when you need the React primitives
`html`
---
📁 Data Formats
> ℹ️ Note
>
> Parquet files load 3-10x faster than TSV.
| File | Format | Description |
|:-----|:------:|:------------|
| genes | .parquet .tsv | GFF3-style gene annotations |hoods
| | .parquet .tsv | Genomic windows to display |tree
| | .nwk | Newick phylogenetic tree |links
| | .parquet .tsv | Protein homology relationships |domains
| | .parquet .tsv | Protein domain annotations (optional) |
📋 View detailed format specifications
genes — Standard GFF3 with ID, Name, product in attributes hood_id
hoods — Columns: , seqid, start, end, align_gene (optional) gene1
links — Columns: , gene2, identity gene_id
domains — Columns: , domain_name, start, end, source
---
✨ Features
$3- WebGL/GPU rendering - Phylogenetic tree display - Gene neighborhood tracks - Protein & nucleotide links - Domain annotations - ncRNA secondary structures | $3- Smooth zoom & pan - Click to select genes - Flip track orientation - Shift genomic windows - Align by gene cluster - Hover tooltips | $3- Virtualized data table - 50+ color palettes - Structure prediction - Real-time customization - SVG/PNG export |
🔍 Feature details
| Feature | Description |
|:--------|:------------|
| Protein links | Curved Bézier connections showing homology between proteins across tracks |
| Nucleotide links | Polygonal overlays displaying synteny blocks between genomic regions |
| ncRNA structures | Interactive 2D secondary structure viewer for non-coding RNAs (NAView layout) |
| Data table | Virtualized grid browser for genes, domains, links, and metadata — handles millions of rows |
| 3D structures | On-demand protein structure prediction via ESMFold (≤400aa) or Boltz2 |
---
🛠️ Development
`bash``
npm run dev # 🔥 Dev server at localhost:5173
npm run build # 📦 Build library
npm run build:html # 📄 Self-contained HTML
---
📜 License
MIT © 2026
---
Made with 🦉 by pentamorfico