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:
Python
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.
Python
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:
Python
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)
HTML
<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
HTML
<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
<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:
Python
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
<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:
Publicación traducida automáticamente
Artículo escrito por namaldesign y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA