framejs.io Visualization Showcase

App at proto science

Atomic Orbitals

Atomic Orbitals in 3DRotatable Three.js point-cloud of hydrogen orbital probability clouds (s, p, d, f), colored by wavefunction phase.framejs.io

OMSF Workshop 2026

Participants contributions

Scaffold split vs. Butina/Tanimoto clusteringWatch one molecule library regroup two ways: Bemis–Murcko scaffold split (discrete, by ring core) vs Butina/Tanimoto clustering (continuous similarity). Toggle modes, drag the threshold, see where they disagree.framejs.io

(I think the one below was from Jeff)

Where do the torsions come from? (+Gly)Interactive 2D map of which bonds in a 14-residue peptide macrocycle (with an added N-terminal glycine) get proper-torsion parameters from the Rosemary (openff_no_water-3.0.0-alpha0) force field, colored by protein-specific vs generic torsions.framejs.io

Where do the torsions come from? — 3D (semaglutide)Interactive 3D ball-and-stick view of the modified peptide semaglutide (7KI0 chain A), highlighting which bonds get protein-specific phi/psi vs generic proper-torsion parameters from the Rosemary (openff_no_water-3.0.0-alpha0) force field. Drag to rotate; hover a highlighted bond for its parameter IDs.framejs.io

From Lily Wang and Open Force Field

Rosemary-alpha: MM vs QM valence explorerInteractive explorer of MM-minus-QM bond/angle/torsion deviations across 5 force fields: per-parameter violin/box/swarm, periodicity-aware QM-vs-MM scatter, RMSD-aligned 3D overlay, hover 2D structures.framejs.io

Same as above, but upgraded for mobile:

Rosemary-alpha: MM vs QM valence explorerInteractive explorer of MM-minus-QM bond/angle/torsion deviations across 5 force fields: per-parameter violin/box/swarm, periodicity-aware QM-vs-MM scatter, RMSD-aligned 3D overlay, hover 2D structures.framejs.io

Chemical Space of QM Datasets (connected only)Interactive WebGL map of all 3.67M connected molecules across QCArchive, SPICE, GEOM, ANI2X & THEMol — disconnected SMILES filtered out. Color by dataset/type/overlap, filter by dataset/type/element, accelerated SMARTS search, hover for RDKit structures.framejs.io

For Jen Clark and Open Force Field

Now better for mobile:

Torsion Drive Force-Field ExplorerCompare multiple force fields per torsion: overlay energy/RMSD/3D, sort by RMSE/mean-err/geom-RMSD/JS-distance for a chosen FF, SMARTS search, full 4-atom torsion highlight, distance measuring, profile playback, and subset export.framejs.io

Torsion Drive Force-Field ExplorerCompare multiple force fields per torsion: overlay energy/RMSD/3D, sort by RMSE/mean-err/geom-RMSD/JS-distance for a chosen FF, SMARTS search, full 4-atom torsion highlight, distance measuring, profile playback, and subset export.framejs.io

Example themed visualization

Linked-views protein explorerReal ubiquitin (1UBQ) parsed live in-browser: 3D structure, Ramachandran map, Cα contact matrix and B-factor track all share one residue selection — hover or click anywhere and it lights up everywhere. Colour-by and contact-cutoff controls drive every panel together.framejs.io