Volatility Surface
Options-trading decision UX. One market context carried across surface, slice, grid, spread, and strategy views, with a stress-calibrated value-at-risk gauge.
Concept prototype. The workspace is the demonstration artifact. The decision-geometry problem it addresses is rooted in shipped CME/NYMEX volatility-surface analytics work delivered via EPAM Systems, part of 15 years designing decision interfaces in capital markets. Exchange and client naming are obfuscated for portfolio use.
- Capital markets
- Options trading
- Decision geometry
- Three.js / WebGL
- D3.js
- Concept prototype
Complex market systems do not become usable when you hide the complexity. They become usable when you structure it. The constraint here is that the read has to survive the trip from terrain to ticket without being rebuilt.
The misread that costs capital
01 · ProblemOn a trading desk the implied-volatility surface is the terrain every option decision is read against. But the tools that render it scatter the surface, term curve, bid-ask grid, and ticket across 4 screens the trader must reassemble by hand. A misread slips in during that reassembly, and the trader commits or withholds capital on one strike with the wrong geometry in their head.
Most market tools are accurate in pieces and disorienting in combination. A trader gets a heatmap in one place, a term curve in another, a grid in a third, and a strategy panel somewhere else. The numbers are technically correct, but the relationships between them are fragile because the user has to assemble the mental model alone.
The misread is rarely a wrong number. It is a dropped thread: the trader sees a shape, switches screens to check it, and returns with a slightly different argument than the one they left.
The mental model the tools break
A trader does not read a volatility surface the way a report reads it. They hold a running picture of the market in their head: where the skew is tense, which strike is rich or cheap against its neighbors, how today’s shape differs from yesterday’s. The decision is a test of a move against that picture, not a lookup in a table.
That mental model is fragile under tool-switching. Every time a trader leaves one screen to find a number on another, working memory has to hold the argument open, and that is exactly where the misread slips in. I designed this workspace to carry the trader’s model forward rather than make them rebuild it: each view answers one cognitive move, then hands the same market context to the next.
- Terrain intuition
- 3D surface. Bearings across strikes and expiries before any commitment.
- Skew memory
- Locked slice. The term structure and skew read out at one active strike.
- Running argument
- One carried context, so the argument is never rebuilt between views.
- Impression vs math
- Bid-ask and mark. The exact values that a strong visual impression can outrun.
- Commitment
- Staged spread. The move packaged with the evidence that produced it.
How a trader reasons about a surface, mapped to the affordance that carries that reasoning forward instead of interrupting it.
The same design problem appears in climate models and staffing probabilities: a high-dimensional signal has to become a decision a human can own. The work is to expose the mechanism, keep uncertainty visible, and make the resulting action defensible.
One market context across 5 views
02 · The workspaceVolatility Surface is a linked decision workspace that carries one active strike across surface, slice, grid, spread, and strategy views. It treats the first view as a shared reference rather than as a decorative chart. The desk begins with a 3D terrain of implied volatility so the trader can find bearings, identify tension in the skew, and point to a specific strike before drilling into the precision views.
The surface holds implied volatility across strikes and expiries; the smile is skewed and flattens at longer expiries, a realistic term-structure pattern. Locking one strike traces the highlighted cut along the surface’s own curvature and reads it out as a term-structure and skew curve. Illustrative geometry.
From orientation to action
- Read the field The surface gives the trader bearings across strikes and expiries, so tension in the skew appears first as shape rather than as a disconnected table of values. surface · strikes · expiries
- Lock the slice The desk cuts one strike through the terrain and turns that point of interest into a 2D term-structure view that exposes the skew precisely. active strike · term structure · skew
- Verify the numbers The grid anchors the visual signal in exact values, bid-ask relationships, mark, and spread conditions so the move is not driven by impression alone. bid · ask · mark · spread basis
- Stage the move Spread and strategy views carry the same strike forward into an editable package the desk can review, adjust, and prepare for execution. spread ladder · validation status
Continuity is the design defense against the dropped thread: keep the surface, strike, skew, spread, and strategy in the same working context.
Disconnected screens
Heatmap, term curve, grid, and strategy panel each live in a separate view. The trader reassembles the market argument between screens. A strong visual impression can outrun the exact bid-ask and mark. The read does not survive the trip from chart to ticket.
Linked decision geometry
One market context travels across surface, slice, grid, spread, and strategy. The same active strike is carried forward, never rebuilt from scratch. Surface, slice, and grid must agree before the move is staged. The staged spread carries its own evidence into execution.
The workspace in frames
Each static frame is a real view from the prototype. Together they show how the same strike context moves from spatial orientation to staged action.
Who has to agree on the read
A solo prototype has no team to manage, but it still answers to the roles around a trading-floor decision.
- Options trader
- Needs bearings before precision and a clean path from read to staged ticket.
- Desk head
- Needs the desk on one shared market read, not 4 private interpretations.
- Risk manager
- Needs spread and stress visible before capital moves.
- Quant analyst
- Needs the visual signal tied to exact values and arbitrage-free constraints.
- Market-data engineer
- Needs a prototype that maps cleanly to data feeds, state, and instrument identifiers.
- Compliance and surveillance
- Needs the decision path explainable after the fact.
The stress-calibrated value-at-risk gauge
03 · RiskThe 5 views are not complete until the risk of the staged move is visible in the same context. The workspace carries a stress-calibrated value-at-risk gauge alongside them, because a risk manager needs spread and stress visible before capital moves, and a quant analyst needs the visual signal tied to exact values and arbitrage-free constraints.
Calibration is a judgment, not a setting. A model that fits today’s prices perfectly but jumps overnight wrecks tomorrow’s hedges. A constrained, stable model gives up almost nothing today and stays standing tomorrow. Predictability beats perfection, and the same discipline runs through every screen here.
The Heston model has 5 parameters, and they are not abstract: they are the dials that reshape the implied-volatility surface a trader reads. Turn a dial and both the 3D surface and its slice reshape in real time.
- Mean reversion
- Volatility behaves like a rubber band. A shock stretches it, then mean reversion pulls it back toward a resting level. Reading that is how a trader tells a passing shock from a new regime.
- Skew
- When a crash starts to feel likely, traders buy downside puts the way people buy house insurance after a hurricane warning. That demand lifts the implied volatility of low-strike options and tilts the smile into a one-sided skew.
- Arbitrage-free shape
- A volatility surface is not just a picture. If the prices it implies are not internally consistent, a competitor can buy a dollar for less than a dollar. Enforcing an arbitrage-free shape is the safety net that protects the desk’s capital.
- Calibration stability
- Stable calibration versus overfitting, shown as the trade between a perfect fit today and a model that survives tomorrow.
The same linked geometry reads across market-risk and value-at-risk monitoring, derivatives pricing and Greeks visualization, real-time market-data dashboards, stress and scenario analysis, and trade surveillance and execution review. One context, many views, a staged and defensible action.
Screen density traded for coherence
04 · Trade-offs3D surface first, precision views second
Traded immediate numeric density for spatial orientation, because a trader needs bearings before committing capital.
Guided tour as the declarative layer
Traded a denser default screen for an interface that stays focused on market state and linked context.
One active strike context, not parallel editing
Traded multi-strike comparison for continuity, because the real risk is losing the market argument between views.
A side-by-side multi-strike comparison table. A power-user feature, but it would have split the single shared market context that is the whole point of the workspace.
Screen switches per staged trade against the desk’s current multi-tool flow; how often a staged spread is edited after grid verification, the signal that impression outran the numbers; and time from first surface read to staged ticket. The guided tour already walks the exact path these metrics would instrument. An early assumption treated the 3D surface as presentation and the grid as the real work. Expert walkthroughs broke it: traders orient spatially first, and precision without bearings is where the misread starts.
What the prototype actually contains
05 · Stack- Case page: static, crawlable HTML and CSS in the siarheimardovich.com design system.
- Interactive figures: inline SVG and D3.js.
- Main workspace: a single-file Three.js and WebGL prototype with no backend, auth, or API dependency, embedded by iframe with a descriptive title and lazy loading. Linked slice plane, hover inspection, and the stress-calibrated value-at-risk gauge.
- Surface model: Heston-inspired implied volatility across strikes and expiries. The slice exposes term structure and skew at the chosen strike.
- Precision views: the expiry grid anchors exact values, bid-ask, and mark. Spread and strategy views carry the same active strike into an editable package.
- Explainers: 5 D3.js interactives that map model parameters to the surface shape. Mean reversion, skew, arbitrage, Heston dials, and calibration stability.
- Accessibility: ARIA labels on figures and iframe, keyboard-operable controls, prefers-reduced-motion honored, color not the only information channel.
- Publishing: obfuscated exchange and client naming for portfolio use.
Volatility Surface is a showcase about decision geometry: making a multi-dimensional market legible enough that a trader can move from seeing the terrain to acting on it without losing the mental model behind the decision. Spatial orientation, linked analytical views, and an action-stage interface work together as one decision instrument.