Make your own visualization tool using python and dash!
Tags: Graph, Dash, Plotly, Visualization, Python3

We often need to plot graphs to present our work to an audience. A graph for that email, another for the presentation, yet another for the report, sounds familiar right? There are so many visualization tools and software available today, that we are spoilt for choice. But some are expensive to use, some we aren’t allowed to download as per company policy, some need licenses. Then there is the option of plotting your own graph by writing some code in a jupyter notebook or your favorite IDE, but well, that is going to take some extra time and effort, which you maybe don’t want to invest right now. Good old excel is always there, but that geeky little gnome that lives in your head makes you feel less geeky when you use excel to plot graphs.

Well, I was in this situation too, so I decided to make my own simple graphing tool using python and plotly-dash. I did spend some of my spare time developing this, but now all I need to do if I need a new graph, is to fire up my dash app, upload the file that has my data, and viola, I have a graph that I can then copy on to my presentation or email. In this post, I will show you how you can make a similar simple tool yourself, and better it in fact, with more features that you think will be useful for you. Let’s get started.

Setting up a virtual environment

1. Open a terminal in the folder you want to create the virtual environment in. (Assumption is that you have installed python and it is configured on the right path)

2. Setup the pip package manager.

3. Install the virtualenv package using pip

4. Create the virtual environment and activate it.

Required libraries

Install all required python libraries in the virtual environment, example pandas, dash, plotly etc. The complete git repository for this project that I have done is available here. You may choose to install required libraries by installing the requirements.txt file that I have included in the repository.

Code structure of the dash app

The way that I have structured the code is to separate out each section of functionality. Let me elaborate. By having all layout components separated out in one file, all the callbacks in another, and finally all the logic and graph generating functions in the third, not only do we have neatly organized and readable code, but it also makes it easy to add new components. Most importantly, it helps debug without scrolling endlessly through one long sheet of code to find one tiny little bug!

The tree structure of the directory would look like:

Basic code

The next step is to get the basic code in place.

Index.py and app.py follow the structure defined in the documentation for multi-page apps.

For the layouts, I have made 3 overall columns, with the center column being wider to host the graphs and the left and right to house drop downs and radio buttons. Let your imagination drive you to create your preferred layout.

Use the dcc.Upload() component from the dash_core_components library to have a drag and drop or select file from disk option.

dcc.Upload(

id='upload-data',

children=

html.Div([

'Drag and Drop or Click to Select File'

], className='upload_box'),

multiple=False

)

Add dynamic dropdowns which get populated with columns from the uploaded file.

dcc.Dropdown(

id='x-dropdown',

options=[],

placeholder='Options ',

disabled=False

)

With a play of callbacks, the graph type is updated from a selection of radio buttons on the right.

Notice the grf.graph_generator(). As we saw in the structure of the code earlier, the graph_generator and other functions of the business logic are housed in the data_n_graphs.py file and imported it in the callbacks as

import data_n_graphs.py as grf

With that you already have a simple but functional visualization tool, and what’s more, it’s homemade!!

Once you have a basic version in place and you are feeling adventurous, keep adding a new feature to make your tool as fancy as you like. I added a color picker for the graphs, dynamic titles and labels and some styling on the stylesheet.

Agile

This is one corporate buzz word that has been doing its rounds for a while now. Some of us like it and some of us hate it. And yet others dislike it just because it was forced on them! But my principle in life is to try and take the best out of everything. You don’t need to like it completely, but if the best message of the concept is useful, then just pick that.

So on those lines, the concept of agile is to have a usable, working code at every iteration. Spending a lot of time and code to make a super fancy application before even trying it out, is not worth the effort. Instead, make a basic application in the first iteration; say just being able to take a user input file and displaying it as a graph. Each day, improve it to add one more small detail, maybe giving drop downs for the columns to be plotted. And thus, slowly you keep bettering your code with constantly having a working and usable functionality, until some iterations later you have a very fancy application indeed.

Version control

I cannot emphasize enough about version control. Keep your code safe, you have spent your time and efforts on it. Keep a track of your changes, what if you want to fall back on a working version of code, after a bunch of unsuccessful changes. A couple of months back, when going to office was still a norm, a water cooler chat with one of my colleagues led me to ask him about the version control they were using in their project. He said they make a copy of the folder of code every evening and call it XYZ-Copy. The next day they work on this folder and in the evening call it XYZ-Copy-Copy, which turns in XYZ-Copy-Copy-Copy. I excused myself before he told me what the version is called now.

I’m feeling lazy (or lucky)

Well, my version of the code is available on git and I am still trying to better it each weekend that I have some free time. So feel free to fork my repository, it would give me immense joy if my project is of use to someone out there.

I usually end my articles with a quote. So on the context, I’ll end with a Sanskrit sloka.