Integrating Bokeh Visualisations Into Django Projects.

Published in

HackerNoon.com

7 min readFeb 19, 2019

Despite being a python developer for years only recently have I needed to interact with Django. While exploring Django, I decided I wanted to learn a little more about Bokeh the visualisation library. I tried to integrate it into my django project and found it challenging to find a complete tutorial. I thought I would create a post outlining the steps to integrate Bokeh into Django in case anyone finds it useful.

Pre-Requisties:

Python — I used python 3
Pip

I developed the project on a Mac using Sublime Text 3. This may mean if you are using another OS, we may have slightly different commands.

Setting Up Django Project

Before we can work with bokeh, we need to setup our django project. If you are already familiar with setting up django projects, feel free to skip ahead.

Let’s open the command line/terminal. Typically it will already be pointing to your home directory when you open it.

Navigate to your preferred directory area through use of the cd command. I am going to store the project in a directory called codeprojects.

I then make a new directory for the project using the mkdir command.

mkdir bokeh_project

Then navigate into the directory you created.

cd bokeh_project

We then need to make a virtual environment for this project. A virtual environment allows for python projects to have an isolated environment in which each project can store there own dependencies regardless of other project dependencies.

python3 -m venv myvenv

Activate your virtual environment

source myvenv/bin/activate

Now we have our virtual environment, we can install django within it using the pip command.

python -m pip install django

Create the Django project directories

django-admin startproject bokeh_example

Open the project in your IDE. You will see the project structure has been created.

Now in the terminal navigate into bokeh_example using cd

cd bokeh_example

Create the sqlite3 database using the following command in the terminal.

python manage.py migrate

Now check the website has been created by running the server command

python manage.py runserver

Navigate to the browser and enter this address

http://127.0.0.1:8000

You should see a page like the below confirming you created the website correctly!

To keep everything tidy, we want to create a new area inside the project that will store all the site files. Run the following command

python manage.py startapp mysite

This will create a new directory structure.

The next step is to create the base.html file which will store the web page and bokeh visualisations.

Add a folder called templates inside the mysite folder. Add another directory within it called pages and then create a file called base.html inside it.

This base.html file will contain our core html code.

We can put some basic html inside it for now

<html><head>
</head><body>
  <h1> Hello Medium! </h1>
</body></html>

We then need to link the html file to a view. Open mysite/views.py and create a new method called homepage.

def homepage(request):
 return render(request, ‘pages/base.html’, {})

This method will redirect the view to the base.html file based on a request.

For this to work we need to change bokeh_project/urls.py. You must add a line to include the mysite.urls

urlpatterns = [
 path(‘admin/’, admin.site.urls),
 path(‘’, include(‘mysite.urls’)),
]

We now need to create a url connection mysite.urls file. This will point a url to our view which results in the base.html file.

from django.urls import path
from . import viewsurlpatterns = [
 path(‘’, views.homepage, name=’homepage’)
]

The final step is to add ‘mysite’ to INSTALLED_APPS in the settings.py file.

Now we have our base.html linked up. We can run our server again and we can see our html page displayed saying Hello Medium!

Integrating Bokeh Into Project

Now we have our django project, we can now integrate Bokeh into the html page.

First we must install Bokeh using pip in our virtual env.

python -m pip install bokeh

Now it’s ready to go.

Check the version of bokeh installed by firstly entering the below into the command line

python

This will open the python interactive environment. We can then enter the following commands to find out the bokeh version

import bokehbokeh.__version___

Once you have the version, you can quit the interactive environment by typing quit().

For reference I have version 1.0.4. This is important for when you integrate bokeh into the homepage.

Let’s go back to the base.html file.

We need to include bokeh dependencies in the header of the file. Make sure the dependencies reference the version of bokeh you own.

<link href=”http://cdn.pydata.org/bokeh/release/bokeh-1.0.4.min.css" rel=”stylesheet” type=”text/css”>
 <link href=”http://cdn.pydata.org/bokeh/release/bokeh-widgets-1.0.4.min.css" rel=”stylesheet” type=”text/css”><script src=”http://cdn.pydata.org/bokeh/release/bokeh-1.0.4.min.js"></script>
 <script src=”http://cdn.pydata.org/bokeh/release/bokeh-widgets-1.0.4.min.js"></script>
{{ script | safe }}

We also need to the html file to contain a div where the visualisation will be displayed

We then need to modify the views.py file to create a graph. We will first implement a basic line graph. Edit your views.py to include the following information

Once you have made these changes, run the server and you should see a graph like below:

We can take it to the next level by implementing a fancier graph from Bokeh’s user guide. I chose to implement the nested bar graph and modified the homepage method in views.py.

This results in the following graph.

CSS Makeover

The webpage looks quite bland. We can make the webpage look more realistic by leveraging bootstrap and css. Firstly let’s include bootstrap in our base.html file.

Copy and paste the stylesheet and javascript links for bootstrap into the base.html <head> section.

<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" integrity=”sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA” crossorigin=”anonymous”><script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity=”sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin=”anonymous”></script> <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js" integrity=”sha384–7aThvCh9TypR7fIc2HV4O/nFMVCBwyIUKL8XCtKE+8xgCgl/PQGuFsvShjr74PBp” crossorigin=”anonymous”></script>

Let’s firstly add a navigation bar as a header for the webpage.

Once integrated into the file the result on the webpage should look like the following:

Let’s now focus on filling out the content of the website. I am going to create a style that makes graph look as though it is part of a blog post.

We will use containers. The container will contain one small column which will be the side bar and one larger column which be the blog feed.

Before adding containers in the html page we need to create our css document. Add a new folder called static, the same way we did for templates. Within static create another folder called css and a new file in called mysite.css

Now we have our css file, let’s go back to our base.html and include the file in the header.

<link rel=”stylesheet” href=”{% static ‘css/mysite.css’ %}”>

You must also make reference to loading static files at the beginning of the head tag.

<head>
 {% load static %}

We also must make some changes in settings.py file. We must point the static directory to the correct area so the css file gets picked up.

Let’s go back to the base.html and create the containers which will store the site content. Under the navigation bar enter:

Firstly let’s populate the side bar. We will add a vertical navigation bar and a side widget.

We can then add some styling within the css file.

The webpage should now look like this:

Now let’s focus on creating the blog content. We must add information like a header and some Lorem Ipsum content for the post. We do so below:

We can improve the blog post by adding additional styles and importing google fonts. From google fonts I selected Oswald and Open Sans for use in the blog post.

Firstly you must include the link to the fonts in the head.

<link href=”https://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel=”stylesheet”>

Now we can add the font families and additional styles in the css file.

Once these changes are made the site should look like the following:

You can now take it from here to experiment and build out the site with real content, different styles or more Bokeh visualisations!

Integrating Bokeh Visualisations Into Django Projects.

Pre-Requisties:

Setting Up Django Project

Integrating Bokeh Into Project

CSS Makeover

Written by Kari McMahon