Integración de visualizaciones Bokeh en la aplicación Django

Bokeh es una biblioteca de visualización interactiva que nos ayuda a crear una representación visual del conjunto de datos e interactuar con él. Puede crear varios tipos de visualizaciones, como gráficos de barras, diagramas horizontales, series de tiempo, etc. Existen varios métodos para incluir aplicaciones y widgets de Bokeh en aplicaciones y páginas web.  

En este tutorial, vamos a crear un gráfico bokeh básico y lo incrustaremos en nuestra aplicación web Django. Para eso, importaremos componentes de bokeh.embed que devuelve los componentes individuales. La función bokeh.embed.components() devuelve un script que contiene esos datos para su gráfico con una etiqueta <div> en la que se carga la vista del gráfico. Veremos en detalle el procedimiento paso a paso.

Paso 1: Configuración de un proyecto Django básico

Para este proyecto, estamos usando PyCharm IDE. PyCharm es uno de los IDE más populares utilizados para el lenguaje de secuencias de comandos Python.

• Abra PyCharm y cree un nuevo proyecto y guárdelo como BokehProject.
• Vaya a la terminal e instale Django usando el comando:

pip install django

• De la misma manera, instalaremos bokeh en nuestro proyecto como:

pip install bokeh

Paso 2: Crea el proyecto Django  

• Crea un proyecto Django usando el siguiente comando:

django-admin startproject BokehDjango

• Cambie la carpeta del proyecto usando el siguiente comando:

cd BokehDjango

• Ejecute manage.py para migrar inicialmente los cambios de datos a nuestro proyecto utilizando la migración como se muestra a continuación.

python manage.py migrate

• Cree un superusuario usando el siguiente comando para crear una cuenta de superusuario

python manage.py createsuperuser  

• Agregue el nombre, el correo electrónico y la contraseña.
• En esta etapa, la estructura del directorio es como se muestra a continuación:

• Ahora ejecutemos el siguiente comando para verificar si Django se instaló correctamente.

python manage.py runserver

• Navega a la dirección http://127.0.0.1:8000/ y verás algo como esto.

• Ahora creamos una aplicación Django usando el siguiente comando

python manage.py startapp BokehApp

• La estructura de directorios en esta etapa será como se muestra a continuación:

• Como hemos creado una aplicación, debemos agregarla a la configuración. Abra settings.py y agregue lo siguiente en las aplicaciones instaladas:

INSTALLED_APPS = [
   'django.contrib.admin',
   'django.contrib.auth',
   'django.contrib.contenttypes',
   'django.contrib.sessions',
   'django.contrib.messages',
   'django.contrib.staticfiles',
   'BokehApp',
]

• Actualice el archivo urls.py y agregue patrones de URL. Abra urls.py desde nuestra carpeta de proyecto, es decir, BokehDjango, y agregue la función de inclusión en la declaración de importación. Además, agregue la ruta para incluir las URL de nuestra nueva aplicación como se muestra a continuación:

from django.contrib import admin
from django.urls import path, include
 
 
urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("BokehApp.urls")),
]

• Ahora cree un nuevo archivo en nuestra carpeta de aplicaciones, es decir, BokehApp, y guárdelo como urls.py.
• Abra el archivo y agregue la ruta a la ruta para su página de inicio como se muestra a continuación y tampoco olvide importar la ruta y las vistas.

from django.urls import path
from . import views
 
urlpatterns = [path("", views.home, name="home")]

• A continuación, creamos la vista de nuestra página de inicio que generará nuestro primer gráfico Bokeh. Abra views.py y cree un nuevo método llamado home() y antes de eso importamos HttpResponse..HttpResponse se usa con mayor frecuencia como un objeto de retorno desde una vista de Django.
• A partir de ahora, simplemente mostramos un mensaje de bienvenida como se muestra a continuación:

from django.shortcuts import render
from django.http import HttpResponse
 
# Create your views here.
def home(request):
    return HttpResponse("Welcome to home page")

• Ejecutemos el servidor usando python manage.py runserver y veamos el resultado:

¡Excelente! Así que todo se trataba de configurar nuestro sitio web de Django.

Paso 3: Complete la configuración de Bokeh en nuestro proyecto:

• Vaya a su shell de python y verifique la versión de Bokeh como:

bokeh.__version__  

• Como se muestra en la imagen a continuación:

• Ahora vamos a crear una carpeta de plantillas en nuestro directorio BokehApp y guardarla como plantillas. Cree un nuevo archivo en el directorio de plantillas y guárdelo como base.html.
• Agregue los siguientes enlaces de CSS en su archivo base.html en la etiqueta principal y reemplace la versión de su bokeh en el lugar bokeh -xyz min (lugar subrayado xyz)

<link href=”http://cdn.pydata.org/bokeh/release/bokeh-2.3.2.min.css
   " rel=”stylesheet” type=”text/css”>
<link href=”http://cdn.pydata.org/bokeh/release/bokeh-widgets-2.3.2.min.css"
   rel=”stylesheet” type=”text/css”>

• Y los enlaces de JavaScript debajo de la etiqueta del cuerpo final, es decir, después de </body> y, de manera similar, reemplace su versión de bokeh en xyz

<script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.3.2.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.2.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.2.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.3.2.min.js"></script>

• El archivo base.html parece

<html>
   <head>
      <link href=”http://cdn.pydata.org/bokeh/release/bokeh-2.3.2.min.css
         " rel=”stylesheet” type=”text/css”>
      <link href=”http://cdn.pydata.org/bokeh/release/bokeh-widgets-2.3.2.min.css"
         rel=”stylesheet” type=”text/css”>
   </head>
   <body>
      <h1>Our first Bokeh Graph</h1>
      {{div| safe}}
   </body>
   <script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.3.2.min.js"></script>
   <script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.2.min.js"></script>
   <script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.2.min.js"></script>
   <script src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.3.2.min.js"></script>
   {{script| safe}}
</html>

• Reemplacemos ahora la función de vista de inicio para que represente nuestro primer gráfico. Agregue el siguiente código que crea marcas de dispersión circulares básicas en nuestro gráfico:

from django.shortcuts import render
from django.http import HttpResponse
from bokeh.plotting import figure
from bokeh.embed import components
 
# Create your views here.
 
def home(request):
 
   #create a plot
    plot = figure(plot_width=400, plot_height=400)
 
   # add a circle renderer with a size, color, and alpha
 
   plot.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)
 
   script, div = components(plot)
 
   return render(request, 'base.html', {'script': script, 'div': div})

• El método de componentes devuelve una secuencia de comandos que contiene los datos de su gráfico y proporciona una etiqueta <div> para mostrar la vista del gráfico. Estos dos elementos se pueden insertar en el texto HTML y el <script> cuando se ejecuta reemplazará el div con la trama.
• El método del círculo es un método de glifo que es un método del objeto de figura . Los glifos son los bloques de construcción visuales básicos de las tramas Bokeh. Esto incluye elementos como líneas, rectángulos, cuadrados, cuñas o los círculos de un diagrama de dispersión.
• La variable de trama nos permite crear una trama que contiene todos los diversos objetos, como glifos, anotaciones, etc. de una visualización.

Actualicemos nuestra página después de guardar todos los archivos y el resultado será como se muestra a continuación.

Para mejorar el aspecto de la página, estamos agregando bootstrap a nuestro archivo base.html. Hemos agregado algunos de los componentes y el HTML final será como se muestra a continuación:

<html>
   <head>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
         rel="stylesheet"
         integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
         crossorigin="anonymous">
      <link href=”http://cdn.pydata.org/bokeh/release/bokeh-2.3.2.min.css
         " rel=”stylesheet” type=”text/css”>
      <link href=”http://cdn.pydata.org/bokeh/release/bokeh-widgets-2.3.2.min.css"
         rel=”stylesheet” type=”text/css”>
   </head>
   <body>
      <ul class="nav nav-tabs">
         <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Active</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
         </li>
         <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1"
               aria-disabled="true">Disabled</a>
         </li>
      </ul>
      <h1 align="center">Data Visualization using Bokeh and Django</h1>
      <div class="container overflow-hidden">
         <div class="row gx-5">
            <div class="col">
               <div class="p-3 border bg-light">Bokeh is a data
                  visualization library for Python. Unlike Matplotlib and
                  Seaborn, they are also Python packages for data visualization,
                  Bokeh renders its plots using HTML and
                  JavaScript. Hence, it proves to be extremely useful
                  for developing web based dashboards.
                  The Bokeh project is sponsored by NumFocus
                  https://numfocus.org/. NumFocus also supports PyData, an
                  educational program, involved in development of
                  important tools such as NumPy, Pandas and more.
                  Bokeh can easily connect with these tools and
                  produce interactive plots, dashboards and data applications.
                  Features
                  Bokeh primarily converts the data source into a JSON file
                  which is used as input for BokehJS, a JavaScript library,
                  which in turn is written in TypeScript and renders the
                  visualizations in modern browsers.
                  Some of the important features of Bokeh are as follows −
                  Flexibility
                  Bokeh is useful for common plotting requirements as
                  well as custom and complex use-cases.
                  Productivity
                  Bokeh can easily interact with other popular Pydata
                  tools such as Pandas and Jupyter notebook.
                  Interactivity
                  This is an important advantage of Bokeh over Matplotlib and
                  Seaborn, both produce static plots. Bokeh
                  creates interactive plots that change when the user
                  interacts with them. You can give your audience a
                  wide range of options and tools for inferring and
                  looking at data from various angles so that user can
                  perform “what if” analysis.
                  Powerful
                  By adding custom JavaScript, it is possible to generate
                  visualizations for specialised use-cases.
                  Sharable
                  Plots can be embedded in output of Flask or Django
                  enabled web applications. They can also be rendered in
                  Jupyter notebooks.
                  Open source
                  Bokeh is an open source project. It is distributed under
                  Berkeley Source Distribution (BSD) license. Its
                  source code is available on https://github.com/bokeh/bokeh
               </div>
            </div>
            <div class="col">
               <div class="p-3 border bg-light">
                  <h1>Simple Bokeh Graph</h1>
                  {{ div| safe}}
               </div>
            </div>
         </div>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
         crossorigin="anonymous"></script>
   </body>
   <script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.3.2.min.js"></script>
   <script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.2.min.js"></script>
   <script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.2.min.js"></script>
   <script src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.3.2.min.js"></script>
   {{script| safe}}
</html>

 Producción: