Web app with Flask & D3.js on Orange Pi

Create a Flask web page

In this tutorial I will show you how to build a simple web app using Flask for the server side scripting and D3.js for the data visualization.

Flask is a simple yet powerful Python micro web framework, that can be set up in minutes. D3.js is a JavaScript library that is using HTML, SVG, and CSS to create stunning data driven visualizations, animations and dynamic interactions.

The web app we are going to build will read data from a MySQL database and then render the rows in an HTML table. In the second part of the tutorial we will visualize the data on a map of the world. We can color the countries by different indicators such as outbound tourist flights or GDP per capita.

This tutorial will work both on the Raspberry Pi as well as the Orange Pi, as long as you install all the required packages. To begin with you will need to install MySQL and create a database. Then, get some data to store on your database (you can learn how to do that from my previous post). I will use the same outbound tourists data provided by the World Bank.

On the Python side, you will need the SQLAlchemy and mysqldb packages. Again, I already covered connecting Python to MySQL here.

So now we need to create a new folder for our app in our home directory, let’s call it “WorldTurists”. In this folder we will store the code for our app, and any additional resources. Inside this folder, create two more folders, called “static” and “templates”. The folders have to be named exactly like that, it’s just part of how Flask works. The “static” folder will contain things such as images, CSS and JavaScript resources. The “templates” folder will contain HTML templates, that we can use to render dynamically in our app.

The Python code for the app should be in the “WorldTurists” folder. Let’s create a new file and call it “WorldTouristsApp.py” for example. Open it and write inside:

Here the most interesting lines for us are the ones containing “@app.route” and “render_template”. The rest is code required by the Flask framework to run a web application. With the “route” decorator we simply map URLs to functions in our app. The “render_template” function allows us to use Python to dynamically create page content, by using variables and flow control code. I will get back to this later on.

Let’s create a simple web page, with Bootstrap support, in the “templates” folder:

So after we imported the data from MySQL, we store it in a Python DataFrame. Next we do some filtering on the DataFrame. Lastly we assign the filtered DataFrame to a variable “table” that will be used in the HTML template. The Jinja2 template engine will evaluate any Python code written in the template and will generate HTML code for our web app. The Python code we need to add to our template is:

{{table.to_html(index=False,classes="table table-striped")|safe}}

So here we are using the pandas DataFrame’s built in method of converting data to a HTML table. using this methods arguments, we leave out the index and we style the table nicely, using Bootstrap table classes. Additionally, using the “safe” filter we tell Jinja2 that we are passing HTML.

Running your app again, you should see the formatted table:

Visualize country data with D3.js

We now have a dynamic web app, feeding from a MySQL database. Let’s take it a step further and add a country-level map visualization using D3.js. In particular we will use the Datamaps library. To do that we need to include this library and it’s dependencies in our page:

Then we need to add a container to hold our map. I added it just above the table. Lastly we need to write the JavaScript to color the countries by the number of outbound flights. Here is the HTML code, which adapts a Datamaps example code: