Creating a Web Application using Plotly-Dash¶

There are a lot of ways to create web applications, the traditional ones being good old HTML and CSS. But, creating a web application that displays visualizations and also allows real-time interaction without using any javascript seemed nearly impossible. On researching a bit, I found Dash. Dash was developed by plotly for creating easier dashboards with interactive graphs. The best part is that it mainly uses Python. Some designing needs to be done using bootstrap and CSS, but majority of the work is done in python.

Problem Statement¶

Develop a User Interface for Content based filtering recommendation model for the good reads books dataset. The Interface must be a web application and should allow interactive graphs.

Implementation¶

First step,Installation.

Steps: ->>pip install dash ->>pip install dash_bootstrap_components

After the installation, dash provides sample layout programs on the website. Running those helps in understanding the environment and syntax.

Design¶

Designing is something I have always struggled with. After looking at some applications for inspiration, I figured a sidebar would look great in the recommendation system. Also, there is a practice of displaying the most popular items in a lot of recommendation systems. After a rough sketch, I was sure what I wanted in my User Interface.

Sidebars look elegant in many UIs.

On searching, I found the base bootstrap code for a sidebar. As I had never worked with bootstrap, the code was a bit intimidating. After a few runs,I figured out the code and started implementation of my project.

Dash sidebar code

Deciding color scheme¶

I was familiar with the 6:3:1 color scheme.But, the colors needed to be decided. Dark theme looks very cool, but I needed three colors. A dark bluish black, white and blue was decided.

Adding graphs and recommendations¶

Adding static graphs was simple, just create plotly figures and assign them to variables with ids and declare the ids in the layout. But, adding interactive recommendations was tough.

Plotly Dash documentation explains callbacks for interactive graphs. Recommendation system was imported as a module and a function was called when a title was selected by the user for getting recommendations.

Moods¶

A lot of recommendation engines also had mood based recommendations, so I added 4 categories- Romantic, Mystery, Thriller and Fiction for displaying randomly shuffled recommendations on the basis of the chosen mood.

I know I should have taken screenshots while implementation but it slipped completely.

Final implementation¶

Here is how the web app looks:

The code can be found in the github repo: DASH APP

I tried deploying the application on heroku but memory limit exceeds and the application crashes. I am now looking at other servers for deployment. Although dash claims that apps can only be deployed on heroku as of now. There is a lot of scope for improvement but this is just the basic model.