Flapjax: Data Visualization on the Web with Plotly and Flask

Raw Text

Member-only story

Build a data visualisation web page with Plotly and Flask, and make it interactive with some UI components

Alan Jones · Follow

Published in Towards Data Science · 17 min read · 2 days ago

--

1

Share

Mae Mu

Unsplash

What is the best framework for building Data visualisation apps? Is it Streamlit or Dash, perhaps? Or maybe you could convert a Jupyter Notebook into a web app with Mercury , or Voila ?

All these are great ways of creating applications and are fairly easy to get started with. But what is easy to start with can often become a little more complex as you become a little more adventurous. So, I am going to try and persuade you that going back to basics and using Python server code alongside an HTML page for the user interface is not as daunting as it might seem.

We can build compelling interactive applications using a fair amount of boilerplate code and templates, and this means that you can still concentrate on your Python code and exposure to HTML and Javascript is minimal. I’m calling this approach Flapjax — I’ll explain why later.

One of the simplest ways of creating a web application in Python is to use Flask, so that is what we will do and we’ll create an app that looks like the one in the image below

The Flask framework

Flask is a minimalist framework for developing Web applications. In a Flask app, the web page typically is built from a template and data supplied by the Python code — this data can be text or graphics that form the content of the webpage. The result is sent to the user for display in the browser.

The diagram below shows the basic structure of an interactive app. When the app is running, the Python part executes on the server and passes data to the HTML which is running in the browser. The user input from the web page is passed back to the Python code which may then send more data to update the HTML with new content — a new chart that has been selected by the user, for example.

Single Line Text

Member-only story. Build a data visualisation web page with Plotly and Flask, and make it interactive with some UI components. Alan Jones · Follow. Published in Towards Data Science · 17 min read · 2 days ago. -- 1. Share. Mae Mu. Unsplash. What is the best framework for building Data visualisation apps? Is it Streamlit or Dash, perhaps? Or maybe you could convert a Jupyter Notebook into a web app with Mercury , or Voila ? All these are great ways of creating applications and are fairly easy to get started with. But what is easy to start with can often become a little more complex as you become a little more adventurous. So, I am going to try and persuade you that going back to basics and using Python server code alongside an HTML page for the user interface is not as daunting as it might seem. We can build compelling interactive applications using a fair amount of boilerplate code and templates, and this means that you can still concentrate on your Python code and exposure to HTML and Javascript is minimal. I’m calling this approach Flapjax — I’ll explain why later. One of the simplest ways of creating a web application in Python is to use Flask, so that is what we will do and we’ll create an app that looks like the one in the image below. The Flask framework. Flask is a minimalist framework for developing Web applications. In a Flask app, the web page typically is built from a template and data supplied by the Python code — this data can be text or graphics that form the content of the webpage. The result is sent to the user for display in the browser. The diagram below shows the basic structure of an interactive app. When the app is running, the Python part executes on the server and passes data to the HTML which is running in the browser. The user input from the web page is passed back to the Python code which may then send more data to update the HTML with new content — a new chart that has been selected by the user, for example.