Converting Python Notebook Into an Interactive Web Application: Tools, Tips and Tricks

Hello. This article has been prepared to make a technical analysis of financial data with python language and to convert the code we wrote into an interactive web application.

Technical analysis is the simplest way to understand financial stock data, currencies, or different types of financial time series data. Most programmers or data scientists use python language to do basic analysis of financial data because it's very simple to use.

In addition to the financial analysis code, I want to show you how to easily convert a python notebook into a web application. It may be helpful for someone who doesn't know how to program in your team. Everyone will make good use of your python application if your python notebook code can convert to an interactive web application. As such, this post explains how to visualize python code and make it easy to use.

Mercury is a powerful tool for our conversion goals.

In this article, I'll be creating a financial data analysis application using financial indicators on a python notebook and converting it into a web application using mercury. I’ll then deploy to a Heroku dyno service for use on the Web. I think the tool will be very useful for python developers or anyone who knows python language and does work with data-science-related topics- it will speed up your analysis process. When we’re done, you'll have a dashboard to show anyone - even those without any programming know-how.

You will also learn how to:

• calculate some technical indicators and visualize them for financial data in python language,
• create a dashboard in the Jupyter Notebook or visual studio code Jupyter extension,
• convert the notebook to a dynamic web app with Mercury,
• deploy a notebook-based dashboard app to Heroku dyno.

Technical Analysis and Indicators

Moving Averages (MAs)

In finance, moving averages (MAs) is a technical indicator commonly used for technical analysis. Calculating the moving average of a stock helps to smooth out the price data by creating constantly updated average prices. It gives consistent updates on price increase and decrease trends. In python language, a simple moving average can be calculated like in the code below.

It's also a part of my python notebook.

## calculate 7days, 14days, 21days moving averages
techAnalysis=finData[["Close"]] 
if ma_7d: 
  techAnalysis["ma_7d"]=techAnalysis["Close"].rolling(5).mean() 
if ma_14d: 
  techAnalysis["ma_14d"]=techAnalysis["Close"].rolling(14).mean() 
if ma_21d: 
  techAnalysis["ma_21d"]=techAnalysis["Close"].rolling(21).mean() 

In this code, 7 days, 14 days, and 21 days moving averages are calculated over the "Close" data.

MACD

The MACD indicator is a trending momentum indicator that is observed in terms of two different variants of prices. It is obtained by subtracting the 26-day exponential moving average from the 12-day exponential moving average. The signal in the MACD indicator is used as a trigger for buying and selling.  In python language, the MACD indicator can be calculated as shown in the code below. I used this method in my mercury application.

# calculate MACD 
if "MACD" in indicators:
   k = techAnalysis['Close'].ewm(span=12, adjust=False,              min_periods=12).mean()
   d = techAnalysis['Close'].ewm(span=26, adjust=False, min_periods=26).mean()
   macd=k-d
   macd_s = macd.ewm(span=9, adjust=False, min_periods=9).mean()
   macd_h = macd - macd_s
   techAnalysis['macd_h'] = techAnalysis.index.map(macd_h)
   techAnalysis['macd_s'] = techAnalysis.index.map(macd_s)

In this code, we calculated the MACD indicator, MACD signal, and MACD histograms and saved them to the techAnalysis data frame.

RSI (Relative Strength Index)

The Relative (Relative) Strength Index (RSI) is an indicator that provides predictions about the direction of the short and medium-term trends calculated by comparing the closing values of the relevant period with the previous closing values of the period. It can be very helpful for understanding when the investors will sell or buy.

In this code, I used thepandas_ta module to calculate RSI.

## RSI calculate
if "RSI" in indicators:
import pandas_ta as pta
techAnalysis["RSI"]=pta.rsi(techAnalysis["Close"],lenght="14")

Now, we have the “RSI” column in the techAnalysis data frame.

Volume

The volume data can be used as an indicator. It shows how many stocks, in the markets, have changed hands over a certain period. The volume data is generally used by investors to interpret and confirm price movements.

In this application, volume data is added to the last chart to inform investors more about the prices.

Create Python Environment & Install Mercury

If you want to work in a clear environment, I suggest you create a python virtual environment and work with it. I am using the python virtualenv package to create a python virtual environment.

python3 -m pip install virtualenv

Next, let’s create a virtual environment for this project.

python -m venv my_env

We have an environment and we must activate it to use the code below.

cd my_env
source bin/activate

my_env is activated.

To use the used python functions and modules, you should install the required packages below. It will be the content of requirements.txt.

matplotlib       
pandas                             
pandas-ta                             
numpy                             
pandas_datareader                             
requests                             
mplfinance                             
beautifulsoup4                             
mljar-mercury==1.0.0

You can copy all and paste it into the requirements.txt file. Then you can run the command below and install all required packages easily.

pip install -r requirements.text

Controlling Mercury server

Now, let’s control the mercury server quickly. A simple command is enough to do this.

mercury runserver - — runworker

Let’s check the https:127.0.0.1/8000 address on your web browser. If you can see the page below, you did it successfully.

To code, you can use Jupyter notebook or vs code Jupyter extension. The thing to be noted is that you should choose the Jupyter kernel my_env when using Jupyter notebook or vscode.

If you can’t see my_env, you must add the virtual kernel to Jupyter kernels. For this, You will install the Jupyter package via pip and add kernel via ipykernel package. In my_env dir, you should run the commands below or read the docs in the shared link.

python3 -m pip install jupyter ipykernel
python -m ipykernel install --user --name myenv"

You can check the installed Jupyter kernels with the command below.

Jupyter kernelspec list

If you can see the kernel through the other kernels, you can make sure that it is installed to code.

Great! Now, let’s review my code and convert it into a web application easily!!

Creating a python notebook for financial analysis

Yahoo Finance

Yahoo Finance is a useful website for collecting accurate financial data. You can get historical data for free here.

I am using the code below to collect financial data from yahoo finance with python.

import pandas_datareader as dr
## date yyyy-dd-mm
start_date= "2015-01-01"
end_date=date.today()
finData=dr.data.get_data_yahoo(ticket,start=start_date,end=end_date)

pandas_datareader module contains the get_data_yahoo function and we can collect historical data easily.

Analyzing financial data

In this application, some moving averages, MACD, RSI indicators, and Volume data are used to do simple technical analysis of any financial data. I plotted the candlestick chart for the last N-days for open-close-high-low data and these indicators to one chart. All codes were pushed to my GitHub repository and you can review the code here.

Converting python notebook into a web application

Step 1. Add YAML cell — Mercury framework allows you to define the widgets for the notebook by adding a YAML header at the beginning of the notebook.

Firstly, you must add a blank cell to the top of the python notebook and switch the cell type to, please.

It’s below the YAML file I have used for the finAnalyzer-mercury application. It will create widgets on the web application. It can be used in many widget types with mercury such as select, text, slider, range, checkbox, etc.

---
title: FinAnalyzer
author: noah
description: Technical analysis application for financial data
show-code: False
params:
   ticket:
      input: text
      label: yahoo finance ticket
      value: "^GSPC"
      row: 1
   year:
      input: range
      label: Select data range of year
      value: [2020,2022]
      min: 2017
      max: 2022
   lastndays:
      input: slider
      label: Select last n days for candlestick chart
      value: 30
      min: 7
      max: 200
   ma_7d:
      label: 7 days Moving averages
      input: checkbox
      value: true
   ma_14d:
      label: 14 days Moving averages
      input: checkbox
      value: true
   ma_21d:
      label: 21 days Moving averages
      input: checkbox
      value: true
   indicators:
      label: Select financial indicators
      input: select
      value: [MACD,RSI]
      choices: [MACD,RSI,Volume]
      multi: True
---

The raw cell will create the widgets below.

Step 2. Assign variable — We must create the same-named variables with our YAML cell and assign the first values. In my code, I assigned the first values under the YAML cell.

ticket = "^GSPC"
year= [2020,2022]
ma_7d=True
ma_14d=True
ma_21d=True
indicators=["MACD","RSI"]
lastndays=30

Step 3. Test — For the test, We can use a local mercury server. Run the code below and open <https://127.0.0.1:8000 ](https://127.0.0.1:8000)address your web browser. You can show the application is running on the local mercury server.

Every time you update the notebook it will be automatically updated in the Mercury.

Step 4. Deploy to Heroku Dyno — The dashboard is ready, so let’s deploy it to Heroku.

I assume that you have a Heroku account and Heroku Command Line (CLI) tool installed. But if you didn’t install it, you can check the docs.

Let’s log in to the Heroku-CLI tool:

 heroku login

The Heroku login screen will be open on your default browser and you must log in this way.

After that, let’s create a Heroku app by running:

heroku create finAnalzer-mercury

In the project directory, you should use a different project name in the create command because I got the name.

We will need to add a Procfile to our project:

web: mercury runserver 0.0.0.0:$PORT --runworker

Let’s set the necessary environment(.env) variables in the dyno:

heroku config:set ALLOWED_HOSTS=fin-analyzer-mercury.herokuapp.com
heroku config:set SERVE_STATIC=True
heroku config:set NOTEBOOKS=*.ipynb

Let’s create a setup.sh file and set environment variables via the command below:

heroku config:set $(cat .env | sed ‘/^$/d; /#[[:print:]]*$/d’)

My GitHub repository is an example for you. After that, you are ready to deploy the app by running:

git push heroku main

And I have a web application now.

Important: Unfortunately Heroku free dyno services are no longer available. Because of that dyno services can be used by paid. Alternatively you can use render webservice rather than heroku dyno. Both steps are very similar and I will add the configs end of this post soon as well.

By the way, if you push the codes to your GitHub repository but you must not push the .env file. The file is only Heroku dyno. You can add your .gitignore file easily.

Conclusion

We used python to get knowledge about financial data with some technical analysis indicators. Then, we used the mercury framework to convert it into a web application in this post.

People use many technical indicators to get knowledge about trends and we used some indicators to get knowledge to interpret data such as moving averages, MACD, RSI, and volume here. I think the use of an interactive web application may be a very easy way to review financial data and in this post, we learned how to create a web application by coding on a python notebook.

If there are friends who don’t know Python programming in your team, you can use this method for them. They will be able to use your data science application easily.

My codes and Heroku files are available here.

Also published here.