The purpose of this note is to describe an interactive visualization I am currently playing with for the Black-Scholes model for pricing options.
The visualization is available here: http://learnforeverlearn.com/blackscholes/
It has not yet been optimized much for mobile devices, so for now a desktop is recommended.
- Background
- Overarching Screen
- Visual Cues for Inputs
- Get Me to the Greeks
- Exploring the Greeks - Mixing Divs and Svg
- A Missing Greek, and a Suggested Name
- Coat Hanger Charts
- Creating a Link with Preset Initial Values
- Still ToDo
Per wikipedia, the Black-Scholes model was developed in the 1973 by Fischer Black and Myron Scholes, then later expanded on and named by Robert C. Merton. Scholes and Merton won the Nobel Prize for Economics in 1997 for this work (Black was deceased, and hence ineligible per peculiar Nobel prize rules). While the model has its critics, the Black-Scholes model continues to be widely used today.
The Black-Scholes model has only a handful of parameters, and once they are set/determined it is possible to infer other underlying structural quantities related to how the calculated option price may change (if one assumes that the application of the model is appropriate).
Part of the (current) screen for the visualization is annotated below. One of the main goals is to make it easy to see how the various output quantities depend on the inputs. I also wanted to include the relevant equations upon which the output is calculated - this is done using the (beautiful) MathJax.
(http://learnforeverlearn.com/blackscholes/)
While there are only a few inputs, I wanted to make it easy to see how one was being used if you were currently messing with it. This is done by highlighting an input's use when the focus is on the input box or the slider associated with the input.
For the axes labels, this is done via basic css classes. For MathJax, this is done by by using MathJax's "\class" mechanism to assign a class to part of an equation:
The screenshot below shows an example of this in action, where we add an additional class that changes the color of the text for all elements that have css class "eq-k" when either the input box or slider for the strike price K has focus:
when you are playing with them.
Ideally, I think that there should be a border around the variables, but I have yet to get that part to work for the MathJax equations.
Associated with the Black-Scholes model are a bucket of terms associated with various (partial) derivatives of the various quantities. These are referred to as "the Greeks", and are used by hedge fund managers and individual traders to assist them in their strategy of buying/selling options.
A few of these terms are Greek letters: delta, theta, rho, gamma. Some of the others are authentic sounding "Greek letters" whose invention was solely inspired by this model - vega, vera (rhova), veta, vanna (really!), vomma, ultima, zomma. Others are borrowed from quantum physics or who knows what: color, speed, charm. Personally, I favor more workhorse definitions that remind you what the terms represent, but it is hard to deny a strange charm all of these terms have.
The table below summarizes the Greeks included in the current version of the visualization. If there is a "workhorse" name that is used, this is included.
| "Greek" Name | What It Is (C=Cost of option) | Description | "Workhorse" Name |
|---|---|---|---|
| Delta | ∂C/∂S | Change in Option Value as Stock Price Changes | NA |
| Bromma (Not included yet: see note below) | ∂C/∂K | Change in Option Value as Strike Price Changes | NA |
| Theta | ∂C/∂t | Change in Option Value as Time to Expiration Changes | NA |
| Vega | ∂C/∂σ | Change in Option Value as Volatility Changes | NA |
| Rho | ∂C/∂r | Change in Option Value as Risk-free rate Changes | NA |
| Gamma | ∂Delta/∂S | Change in Delta as Stock Price Changes | NA |
| Vanna | ∂Delta/∂σ | Change in Delta as Volatility Changes | DdeltaDvol |
| Charm | ∂Delta/∂t | Change in Delta as Time to Expiration Changes | DdeltaDtime |
| Vomma | ∂Vega/∂σ | Change in Vega as Volatility Changes | DvegaDvol |
| Veta | ∂Vega/∂t | Change in Vega as Time to Expiration Changes | DvegaDtime |
The visualization shows the first order Greeks, and several of the second order Greeks. As these values are the slopes of the tangent line of an underlying curve, this is indicated by showing the tangent line itself. Further, when you mouseover one of the little charts, you can see how this value changes as you vary the underlying input.
Initially, I just had a single popup that listed the three values, but I realized that this then required an extra step to map each value to what it corresponded to on the chart. So, I split that up into three different popups (four actually, as I have the y-axis one on both sides). I also angle the popup that contains the Greek value to have the same angle as the tangent line itself (this is done with a css rotate transform). This adds a strange visceralness to it that kind of lets your stomach feel the Greek's sensitivity as you move your mouse.
Css rotation is set to "transform-origin: 50% bottom 0; rotate(Zdeg);", where
Z is set to desired angle based on slope at current x position
The tooltips shown here are regular divs that are overlaid on top of the svg element. The same four divs are used for all of the little svg plots. Using divs with the svg is a pain because you have to do some tedious calculations from the svg space to the screen space, and account for any scrolling that might have occurred. I thought it was worth it because it seemed to be more of a pain to manually draw divs in svg and do my own borders, sizing, and padding. I don't know. It's kind of a pain either way, I guess, but it was a huge relief to get the calculations to work. There is still some stuff to play with with styling.
You might notice from the visualization that there is not a Greek for the change in option value with respect to the strike price K. I guess this has not been an important thing to make use of, but in coming back form a wedding last weekend in Mobile, I noticed a huge machine at the shipyard - it's called a "spreader". It was made by a company named "Bromma", and I think that would be a good name for this missing Greek. Like some of the other Greeks, this company is not Greek either.
for the missing Greek - representing the change in
option value with respect to strike price K.
I think it's a sign from the stars that this picture
even mentions the "K" line
(image from www.porttechnology.org).
Note: These charts are not shown by default for performance reasons. To have them included in the visualization, use this url: http://learnforeverlearn.com/blackscholes/?showCoatHanger=true
When I was first musing on what kind of visualization to do for this, I was playing with a chart that would show the two terms whose difference is the calculated option price. I don't know if the graphs provide any insight in the end, but it was fun to put together. Some screenshots of this are below - I refer to them as "coat hanger" graphs that is what they look like to me. They dynamically update as you tweak the inputs, have some "mathy" adornment, and use d3-generated braces based on the work of Alex Hornbake. They look kind of nice, but again, I'm not sure if they are useful for anything.
If you set certain url parameters, you can have the visualization start off with specific values for the input terms - here is an example (values from a recent Facebook option):
initially has Stock Price "s" = 116.73, Strike Price "k"=100,
Time-to-Expiration "t"=0.07923, Volatility "v"=0.4019,
and Risk-Free Rate "r"=0.01.
This functionality is implemented via the convenient URI.js library.
- Create streamlined/minimal version that is performant on mobile devices
- Fix some quirks with the fixed header when the window size is smaller (even on desktop)
- Derive the formula for the tentatively named "Bromma" Greek ∂C/∂K and include it in the little plots
No comments:
Post a Comment