Bokeh Interactive Plots: Part 3
How to guide to building a custom interactive Bokeh app
Overview
This is the third and final article in the Bokeh Interactive Plots series. Part 3 builds on the work covered in Part 1 and Part 2. Before continuing, I recommend reading Part 1 and Part 2.
Part 1 created the basis for the app and compared a managed fund to an index. Part 2 broadened the app’s scope by comparing a tradable asset to an index. As shown below, Part 3 adds a new tab and plot which lets the user compare any two securities. For clarity, the article refers to the asset in the top ‘Stock Ticker Symbol’ widget as the primary investment. The asset in ‘Stock 2 Ticker Symbol’ widget is the asset compared against the primary investment.
Part 3 also adds a textbox to each tab underneath the widgets. The textbox displays how much the primary investment appreciated or depreciated, the difference between current values of the two investments, and the primary investment’s cost basis. The textbox makes it easy to compare the outcomes of the two different investments.
Part 3 tries to reuse as much of the previous code as possible. Compared to Part 2, only find_min_date and update have changed. Part 3 introduces a new function, div_text, for the new textbox.
Code
The Git Repo for this project is linked here.
Widgets
Tab 3’s widgets are very similar to those on Tab 2 except Tab 3 has two TextInput widgets. The TextInput widgets allow the user to type in two ticker symbols and compare any two assets. In addition, Part 3 uses a new widget, Div, which aligns with the HTML <div> element.
Like in Part 2, dictionaries store the new tab’s widgets. A new dictionary, div, holds the text to populate the new textboxes.
Calling Functions
Below shows how the functions are called to initialize the data and plot for Tab 3. This follows the format of Part 2 with the exception of line 14, which create the textbox. div_text outputs the formatted text. By setting sizing_mode to 'stretch_width', the textbox stretches to fill all available width. Part 1 detailed how a column object stores all the widgets. This container will also store the div widgets. Therefore, it won’t take up the entire browser width, just the width of column.
Functions
The new function, div_text, calculates the primary investment’s growth, the difference between the two investments, and primary investment’s cost basis. It takes three inputs – df_source, cost_basis, and investment_type. df_source is a DataFrame containing the data for both investments referenced on a specific tab. cost_basis is ‘N/A’ if div_text is called for Tab 1 because indexes cannot be bought. For Tabs 2 and 3, cost_basis is a float representing how much a single share of the primary investment cost on the start date. investment_type is a string describing the primary investment. After running the calculations, div_text formats and returns the information as a string for the textbox to display.
find_min_date includes an extra elif for Tab 3. Now, when called for Tab 3, the function uses yfinance to check when each of the assets went public. Like before, it returns the more recent of the two dates because that date represents when the two assets’ histories overlapped. Both assets need the same length of time to appreciate for a fair comparison.
Callback Function
The callback function, update, only has minor changes. Line 20 calls div_text to update Tab 1’s textbox, and line 29 does the same for Tabs 2 and 3.
Conclusions
Thank you for reading the final article in the Bokeh Interactive Plot series. The goal of these articles was to break down how to build an interactive Bokeh plot step-by-step. Hopefully, this app has helped you better understand Bokeh or even inspired you to build a Bokeh app.
All feedback is welcome. I am always eager to learn new or better ways of doing things. Feel free to leave a comment or reach out to me at [email protected].
Share This Article
Towards Data Science is a community publication. Submit your insights to reach our global audience and earn through the TDS Author Payment Program.
Write for TDS
