Projects · Interactive science
VisualChem
Bilingual, scroll-driven chemistry stories in which the macro, micro, and symbolic views are driven by one computed state, so nothing on screen is a pre-drawn picture pretending to be a model.
VisualChem is an open-source narrative visualization project for university chemistry. Its premise is that diagrams, molecular animations, and apparatus are usually shown as separate illustrations; here they are driven by the same computable state, so the flask, the particles, and the equation always agree.
Each story starts with a counter-intuitive question that asks the reader to place a bet, uses scrolling as an author-controlled camera, and ends by handing the model to the reader to operate freely. Curves, phase boundaries, probability distributions, energy paths, and spectral lines are computed in the browser.
Current contents
Four seasons and twelve bilingual (Chinese and English) interactive long-form pieces:
- Phase equilibrium: four stories, from azeotropes to cooling curves.
- Thermodynamics: entropy, the downhill of reactions, and the potential landscape inside a battery.
- Kinetics: integrated rate laws, activation energy, and catalysis.
- Light and structure: the hydrogen spectrum and infrared activity, with an NMR story planned.
The first story is the most fully evidenced: it brings in sixteen atmospheric-pressure vapor–liquid equilibrium measurements with sources and uncertainties, lets the reader rebuild the phase boundary, then validates it against twenty-one points from a second laboratory. The teaching model is calibrated only at the azeotrope and is not presented as a fit to the whole curve.
Engineering
The site is a SvelteKit application with a TypeScript chemistry kernel. Independent SciPy scripts generate reference points, and unit tests hold the browser kernel to within one part in a million of them. Each story also carries scene-alignment tests between the Chinese and English versions so that text, stage, and computed state cannot drift apart.
GitHub Pages deployment, bilingual metadata, offline and no-JavaScript degradation, and an automated accessibility gate are in place. The project still calls itself alpha: a public beta waits for think-aloud tests with real students, review by physical-chemistry teachers, and manual screen-reader and multi-browser acceptance.
Code is MIT-licensed; the teaching text and original figures are CC BY 4.0.