Floating the Profit/Loss Curve in Black Swan Pond

I have been playing with a Black-Scholes/Options-Strategy explorer visualization. It is available at:

"Black Swan Ponds" that represent
where ≥3σ Events Occur

One of the things I had wanted to do with this was to somehow incorporate Nassim Taleb's "Black Swan" notion. Specifically, convey the regions in which Black Swans "could occur." In the narrow context used here, Black Swans have to do with events that - relative to Gaussian/"standard" assumptions at least - are at some number of standard deviations away from the mean. I don't know if there is an agreed upon number of standard deviations away that represents a Black Swan, but I came across a few notes that indicated that three standard deviations seemed to be about where this starts. So, for the purpose of this effort, I used three standard deviations from the stock price's mean to be the boundary of the Black Swan regions. Each of these regions is referred to here as a "Black Swan Pond." The distribution of stock price is assumed to be based on geometric Brownian motion, with parameters from the initial stock price, the volatility, and time-to-expiration.

Note that I have yet to return to the double-check the implementation, so the specific boundaries may get adjusted a bit after I've done that.

Visually Connecting Labels with Dynamic Regions
Trying to Compactly Label Black Swan Ponds (grey)
and retain visual connection to dynamic region.
Label font is "cursive", and only place it is used in viz.

The "Black Swan Pond" region for now is currently rendered in a light grey, with extra little trapezoids underneath the labels, the purpose being to (try to) quickly make the visual connection between the labels and the region they refer to. I was initially thinking to use horizontal braces, but space is at a premium already.

I wanted to have the labels themselves stand out a little bit, which did not happen when using the same font as the rest of the viz. So, I am using a cursive font to try to have the labels discretely pop out a little bit.

If you mouseover the labels, a tooltip shows some summary information about the Black Swan concept. I am underlining the label to provide a hint that this is possible, but the hint may be too subtle.

Mousing over the Black Swan Pond labels
brings up a few details

An SVG Swan
Black Swan
SVG version was used in viz,
original image by Gordon Johnson

For rendering the swans, I found a public domain svg that seemed to be usable, made by Gordon Johnson on pixabay. I took out the path definition from the image and use that in a custom path element that can be additionally styled.

The styling used involves a color indicating whether the swan is currently at a profit or loss location. It was through this that I learned of the "paint-order" css property that allows the browser to first render the (thickened) stroke, and then render the filled path on top of it - this is done by setting this property's value to "stroke" (duh). If this is not done, then the stroke extends into the swan image too much, which significantly impacts the quality when trying to render it as a small as I am.

Floating the Profit/Loss Curve in Black Swan Pond
Black Swans Floating Along
the Profit/Loss Curve on Black Swan Pond

The swans' location is animated so that they "float" along the profit/loss curve, restricted to staying within their Black Swan Pond (which is based on the current input parameters). This may be a goofy addition that may ultimately be disabled, but it is kind of fun trying to come up with a slow and undulating movement. Currently, a velocity based on the sine curve is used, used in conjunction with requestAnimationFrame for the animation.

Is this Useful?

I am not yet sure if this kind of thing is particularly helpful, and I am risking it becoming too busy. But it does add another layer of distilled depth that will be fun to play with and iterate on for a while.