Notes on an Interactive Visualization for the Black-Scholes Model

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:

It has not yet been optimized much for mobile devices, so for now a desktop is recommended.


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).

Overarching Screen

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.

An Interactive Black-Scholes Visualization tool

Example of Interactively Seeing Impact of Inputs
Visual Cues for How Inputs Are Used

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:

(MathJax stuff)   ... \class{eq-k}{K} ...   (More MathJax stuff)
Associating the css class "eq-k" with the letter "K" in a MathJax 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:

Reminder hints about how inputs are used
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.
Get Me to the Greeks

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" NameWhat It Is
(C=Cost of option)
Description"Workhorse" Name
Delta∂C/∂S Change in Option Value as Stock Price ChangesNA
Bromma (Not included yet: see note below)∂C/∂KChange in Option Value as Strike Price ChangesNA
Theta∂C/∂tChange in Option Value as Time to Expiration ChangesNA
Vega∂C/∂σChange in Option Value as Volatility ChangesNA
Rho∂C/∂rChange in Option Value as Risk-free rate ChangesNA
Gamma∂Delta/∂SChange in Delta as Stock Price ChangesNA
Vanna∂Delta/∂σChange in Delta as Volatility ChangesDdeltaDvol
Charm∂Delta/∂tChange in Delta as Time to Expiration ChangesDdeltaDtime
Vomma∂Vega/∂σChange in Vega as Volatility ChangesDvegaDvol
Veta∂Vega/∂tChange in Vega as Time to Expiration ChangesDvegaDtime

Exploring the Greeks - Mixing Divs and Svg

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.

Mouseover behavior to show dependence of Greek on the inputs.
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.

A Missing Greek, and a Suggested Name

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.

The origin of the word "Bromma" as a suggested name
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
Coat Hanger Charts

Note: These charts are not shown by default for performance reasons. To have them included in the visualization, use this url:

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.

Experimental "Coat Hanger" Charts for
Highlighting Intermediate Details of the Black-Scholes Model

Creating a Link with Preset Initial Values

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):

Setting URL Parameters so that the visualization
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.

Still ToDo
There are several more things I want to poke at for this:
  • 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

Popular Posts