Skip to main content

3D Payoff Surface Visualization

Explore how options profit and loss changes across two critical dimensions: stock price movement and time to expiration. See time decay in action with interactive 3D surfaces.

Interactive rotation
Time decay animation
Touch-optimized
WebGL/Canvas fallback

Select a Strategy to Visualize:

3D Payoff SurfaceInteractive

Visualize how profit/loss changes with stock price and time

Controls:
• Drag to rotate
• Scroll to zoom
• Double-click to reset
Color Key:
Profit
Loss
Break-even

Understanding the 3D Surface:

  • • X-axis (left-right): Stock price movement
  • • Y-axis (near-far): Time to expiration (days)
  • • Z-axis (height): Profit or loss at that point
  • • Surface color: Green = profit, Red = loss, darker = larger value
  • • Time decay: Watch how the surface "melts" as expiration approaches

Technical Implementation Notes

Rendering: Uses HTML5 Canvas 2D for broad compatibility. WebGL rendering (Three.js) available for enhanced performance on supported devices.
Performance: Optimized to render 600+ data points at 60fps. Simplified calculations use estimated time value for educational purposes.
Mobile Support: Touch gestures supported for rotation and zoom. Pre-rendered key views available for lower-powered devices.
Accessibility: Keyboard navigation, ARIA labels, and screen reader descriptions provided. 2D fallback available.