Visualization matters. Maybe not to you as a data analyst/scientist, you may feel confident looking at tabular data and drawing conclusions from there. But more often than not, you will need to present your work to your boss, and/or college professor (if you are still in college). Unlike you, they probably aren’t so acquainted with the data and will get confused if you throw a bunch of numbers at them.
To avoid this, one approach is to generate charts via Matplotlib and/or Seaborn and show your superior charts directly in Jupyter Notebook or as a saved PNG file. While that is by no means a bad way to display your results, it surely won’t leave your superior stunned, and therefore, you won’t be able to stand out from the crowd.
Thankfully, there exists a pretty cool library called Bokeh, and this post will cover the process of creating a simple Dashboard application which is more likely to leave your superiors surprised. Not only that, your superior will be able to manually filter or drill-down data, not just to look at the charts.

One thing to note here, this is not a tutorial on how to use Bokeh or Flask. This post only covers how to do Data Visualization by combining those libraries. Before we begin, I assume that you have at least some knowledge of the following technologies:
- HTML
- CSS
- Flask (Python)
- Bokeh (I’m using version 1.2.0)
and are fluent in:
- Python (loops and conditionals)
- Pandas/Numpy stack
You can still follow along if your Python isn’t great, but I can’t guarantee that you will understand everything. Throughout this article, I won’t explain any of the HTML and CSS snippets and will be focusing mainly on Bokeh and Flask.
I will be using the famous Titanic Dataset. If you get stuck during the process, you can get the code at my GitHub Repo.
Here’s what you’ll be making. Notice the dropdown menu and how the value is changed. When reapplied, the charts are re-drawn for the relevant passenger class (my apologies for the terrible design skills though).

Okay, without further ado, let’s get started!
Part 1. Creating Directories and Files
To start out, create an empty root directory anywhere on your PC and name it as you wish. In it, create the following files and folders:

Where next-level-visualization is the name of my root directory. You can then open up your favorite code editor in the root directory, mine is Visual Studio Code.
Part 2. HTML and CSS
Now, let’s take care of HTML and CSS files. I will simply put Gists here, which you are free to copy. These are here to put everything where it should be, and style it appropriately. If you know some web design, you can see that I am using Bootstrap, so the required effort for the design part is minimal.
Part 3. Python setup
Now what you need to do is some basic housekeeping, importing modules, declaring a couple of constants and helper functions, and finally setting up basic Flask application.
I will start with imports, there are quite a few of them. You will need Numpy and Pandas of course and a lot of stuff from Bokeh. You will also need to import Flask, so the charts can be rendered to already defined HTML templates. Here you will also load in the dataset and make new attribute in it, which is called ‘Title‘ and will represent the title the person had – like Mr., Miss., etc. Keep in mind that you may need to modify CSV file location if you haven’t created the directory and file structure as I instructed.
Now you will need to define some constant attributes – it’s not a must, but makes it easier for you to change later on. By constant attributes I mean the stuff like the font used on the chart, title size, ticks size, padding, etc. In here you will also declare 2 helper function, the first one is _palette_generator(), and it will help you with the dynamic coloring of the bars on the chart. It will basically return a list of colors of adequate length. The next helper function is called plot_styler()_. It will use earlier defined constant attributes and set various properties to the chart, like font sizes, etc. It is defined because you would otherwise need to style each individual plot manually.
Finally, you will need to define a basic structure for the Flask app as follows:
This will enable you to run app.py from the Terminal/CMD and view the app on localhost:5000, but I wouldn’t advise running the app just yet.
Python setup is now done, and you can proceed to the next part.
Part 4. Defining Functions for Chart Generation
This dashboard app will consist of 3 charts. Yes, I know that’s not a lot. But you can create additional ones on your own, and these 3 charts will help you to get a sense of it.
If you are wondering where to put the code for the following functions, put it after the chart() function.
The first one will generate a bar chart based on the values of ‘Survived‘ column – as there are only two options I won’t make the chart big and will put it to the right of some dummy text (See index.html). This function will subset the dataset based on the provided class the passenger was in and will output the bar chart of those representations. I’ve also added HoverTool to make the chart interactive. Here you will be using earlier defined _plot_styler() function to save some time and space. By itself, the function code isn’t hard to understand, if you are good with Pandas and Bokeh_:
The next function will generate a chart for the passenger titles. Remember that we earlier made a new attribute ‘Title‘ containing titles like Mr., Miss., etc. Now the goal is to visualize how many passengers there are with particular title in particular passenger class. The _class_titles_bar_chart()_ is for the most part similar to the previous one because both of them are displaying bar charts, so it really does not need additional explanation.
And the final function, _age_hist()_ will render a histogram of ‘Age‘ column for a given passenger class. Histograms in Bokeh are somewhat more difficult than ones in Matplotlib. First, you need to create a Histogram with Numpy, which will return the histogram itself, and the location of the edges. All of those will be passed to ColumnDataSource, with edges being further divided into the left and right edges (useful for plot interactivity – you get the information on the bin width). From there on, the process is very similar as with any other chart types in Bokeh.
The chart generation functions are now created, and the time is now to display everything to the screen.
Part 5. Tying it all Together
Okay, this is the part you’ve been waiting for. I know that it was a lot of code to write, but I hope it was manageable to understand even if you don’t have a significant amount of experience.
In the current state, nothing will render to the screen. It’s because you’ve declared chart drawing functions, but you haven’t called them from anywhere. Now I want you to declare a new function called redraw(), it will make 3 variables, each of which will hold return values from 3 chart drawing function. Then you will simply return them:
When that’s done the only thing left to do is to edit the main route. As the dashboard has a dropdown menu inside of a form, the route needs to have GET and POST methods provided to it. Then you can fetch the value of the dropdown. As an edge case check, if the value is somehow 0 or it does not exist you will need to call redraw() function for the passenger class 1. If the value exists, again call redraw(), but here pass in the fetched value instead.
Now you have 3 variables representing charts for current passenger class. From here you need to create script and div by using Bokeh’s components module. Now you will return the HTML file name, which is index.html, and those 3 scripts and 3 divs:
If you take a look at index.html you will see how the divs and scripts are placed. And that is basically it. The whole code is written, and there’s nothing left to do but to launch the application.
Part 6. Launching the App and Final Words
If you’ve never written a Flask application before you don’t need to worry. The process of launching is very simple.
Navigate to the root directory of your app and open Terminal/CMD window. From there, simply write:
python app.py
Where app.py stands for the name of the Python file. Change it if you’ve named yours differently. Now the app is running, and you can see it at the following URL:
http:// http://localhost:5000/
That’s basically it. You now have a starting template for creating more-complex dashboard application (and better designed of course). I hope that you’ve learned something and that it will help you to stand out from the crowd, irrelevant of the environment you’re in.
Until next time…
Loved the article? Become a Medium member to continue learning without limits. I’ll receive a portion of your membership fee if you use the following link, with no extra cost to you.