This app brings together finance and data visualisation in a way that allows users to interactively build and compare portfolios of their choosing.

• Web framework/Templating : Flask + jinja2
• Styling : Bootstrap4
• Data visualization : Bokeh
• Data manipulation : pandas
• Website interactions/ajax : jquery
• Javascript libraries : Select2, DataTable
• Portfolio optimization : pyportfoliopot
• Data : alphavantage

The app is served using python and flask/jinja2 and for data visualization the Bokeh library was used to create interactive charts. Interactions were driven using ajax instead of using Bokeh's own widgets, this made it easier to maintain the look and feel of the app. Heavy usage of the pandas library was used for calculating returns, portfolio metrics etc. A simple parquet file was used for persisting returns, allowing fast retrieval of historical returns for a selection of stocks.

The makeup of already created portfolios can be inspected here using a datatable that permits sorting and searching.

Historical cumulative performance can be compared over a common time frame for up to 4 portfolios. A concise summary of the portfolio metrics is provided.

Most of the functionality of the site falls within this page. After assigning a portfolio name a user can choose between two weighting schemes, simple equal weighting and and a mean/variance optimized portfolio. Prior to finalizing and saving their selection of stocks users can analyze a correlation heatmap, a plot displaying the betas of each stock, as well as a sector breakdown.

To run the app obtain a alphavantage api key and store it within ./portfolio_help/config.json as shown below

{ "dev": { "alpha_vantage_api_key" : <your api key> } }

A video demo of the app can be found here