BioMap

A real-time treemap of biomarker data. Every block is a lab result, sized by clinical significance. Move your cursor: blocks under your attention expand, revealing more clinical detail. Distant blocks compress. The entire layout recomputes every frame.

Why Pretext

Each block calls layout() every frame to determine how much text fits at its current dimensions. 50+ blocks, each needing a layout calculation, every 16ms. With DOM measurement, each call triggers a forced synchronous reflow. 50 reflows per frame locks the browser. Pretext does 50 layouts in under 0.05ms because layout is pure arithmetic over cached character widths.

What You're Seeing

• 52 biomarker blocks across 7 body systems, each with its own Pretext handle.
• Cursor-driven expansion. Blocks near the cursor grow, revealing value, reference range, and clinical detail as space allows.
• Category filtering. Tap or hover over the legend bar to isolate individual body systems.
• Live performance counter. Layout calls and timing measured with performance.now().

The Technical Insight

The DOM's measurement model couples reading geometry to the browser's layout engine. Reading one element's size can force the browser to recalculate layout for the entire document. When 50+ elements need measurement every frame, you get 50+ forced reflows per 16ms. Pretext breaks this coupling: measurement happens once via Canvas, then layout is just math. This makes "many layout calls per frame" trivial instead of catastrophic.

Built with Pretext by Cheng Lou.