Genome Viewer
Live usableWhat a variant does to the genome, predicted: a story from DNA to effect and an interactive viewer, with no API calls from the web.
A seven-chapter story from DNA to variant effects, read at two levels (age 8 or PhD), over point clouds of real Protein Data Bank structures drawn in WebGL2; then an unofficial, interactive viewer for AlphaGenome predictions: a SHAP waterfall per variant, a tissue-by-assay heatmap, REF vs ALT signal tracks, saturation mutagenesis, a splicing sashimi and contact maps of 3D genome folding.
Technology
- Data viz
- ETL & databases
- Frontend
Sector
- Science & bioinformatics
Problem
A genome model's predictions usually arrive as loose tables and charts, hard to read for non-specialists, and querying the API on every visit costs quota and exposes the key. I wanted an understandable story and a viewer anyone can open with no server and no variable cost.
Approach
A Python pipeline queries AlphaGenome once with a personal key and freezes the results into versioned files with a provenance stamp and a byte budget. The site is static and bilingual (English and Spanish), only reads those files and never calls the API. Every number shows where it came from.
The site’s root is a seven-chapter story from DNA to variant effects. It reads at two registers, for an 8-year-old or for a PhD, with a switch that remembers the choice. Behind the text, a WebGL2 point cloud draws real Protein Data Bank structures read from their mmCIF files; each point vibrates with the thermal amplitude of its B-factor. Every chapter ends in the viewer view that demonstrates it.
Numbers are computed or cited, never rounded from memory: the protein-coding fraction (1.25%) comes from GENCODE 50 and the 32 references were checked on PubMed. Without WebGL2 or with reduced motion, a poster of the same render is shown.
Limits: these are model predictions, not measurements, and not for clinical use. AlphaGenome is only the source of the predictions; this viewer is not an official product.
Result
- real PDB structures on the stage
- 8
- README.en.md, The stage section
- chapters in the story
- 7
- README.en.md, The stage section
- references checked on PubMed
- 32
- README.en.md, The stage section
- automated pytest tests
- 144
- repository commit cf2acf5
- viewer main chunk
- 28.25KB gz
- docs/09-decisiones-autonomas.md, E-12
- protein-coding fraction of the genome, computed from GENCODE 50
- 1.25%
- docs/evidence/coding-fraction.json
Standards
| Software quality (ISO/IEC 25010) | No formal ISO/IEC 25010 checklist was run. |
|---|---|
| Web performance (Core Web Vitals) | Live site, Lighthouse mobile, median of 5: the stage scores performance 99–100, LCP 1,110–1,323 ms, CLS 0; the viewer at /app/ scores 100, LCP 1,450–1,493 ms, CLS 0, TBT 0. |
| Accessibility (WCAG 2.2) | Lighthouse accessibility 100 on the stage and 96 on the viewer, in both languages. |
| Security hygiene | The API key lives only in the pipeline's local environment; the published site never calls the API. |
| Reproducibility | Versioned artifacts with a provenance stamp and a byte budget; the story's figures are recomputed with tools/coding_fraction.py and tools/dna_rise.py. |
| Benchmark methodology | Frame cost of the WebGL2 stage, GPU-synchronous median: 0.3–0.5 ms on a GTX 1050 Ti, 0.7–0.8 ms on an Apple M2 Pro, 2.9–4.9 ms with CPU rendering (SwiftShader), against a 16.7 ms budget. Not yet measured on a phone. |
| Data / model documentation | The predictions are AlphaGenome outputs, not measurements; the project trains no model. |
| Versioning & change log | GitHub repository; no CHANGELOG. |
What I'd do next
- Re-measure Lighthouse SEO now that the noindex is gone (removed on 2026-10-15).
- Measure the stage's frame cost on a mid-range phone.