Visualizing Option Priceson May 10, 2012 in HTML5 by Wolfram Hempel
The easiest way to make sense of a lot numbers is to turn them into a picture. This doesn’t come as much of a surprise: While it takes a lot of conscious effort to see trends, movements and tendencies within a large set of figures we find it rather easy to deduce the same from a visual relationship.
Consequently, financial professionals find themselves surrounded by all kinds of charts and diagrams every day. Line Charts to visualize performance, candlestick charts to show the relationship between intraday movement and open / close rates, heat maps to visualize volume and so on…
Fortunately, Web Browsers provide a wealth of functionality to render such charts. SVG and Internet Explorer‘s early equivalent VML have been providing vector based graphics for ages, HTML 5’s canvas element offers a very rich pixel drawing API and even CSS can be used to draw less complex visualisations like bar charts and maps.
That’s all good and well as long as we are dealing with a one to one relationship between two values. One stock, one price, at one time. But how can one handle more complex relationships, say, an option’s price.
An European option‘s price depends on at least two factors: The price of its underlying asset and the time that’s left for the option to mature. In addition there are other static factors to be considered like the historic volatility or the risk free rate. Elaborate mathematical models like the Black-Scholes formula have been developed to price these options.
Visualising these prices however was up to now restricted to highly specialised software products. But with the advent of HTML 5 and more powerful web browsers we now have the tools at hand to calculate and visualize such models directly on the client side. WebGL allows the browser to directly access the computer’s hardware and to utilize its unrestricted processing power.
But with these new possibilities also come new challenges for both developers and designers. Utilising the 3D space can easily become a very confusing experience for the end-user. And while frontend-engineers need to familiarize themselves with an as yet largely unknown field it is especially up to the UX departments to find beneficial and sensible solutions for this wealth of possibilities.