Интеграция визуализаций Bokeh в приложение Django

Интеграция визуализаций Bokeh в приложение Django Изучение

Bokeh — это интерактивная библиотека визуализации, которая помогает нам создавать визуальное представление набора данных и взаимодействовать с ним. Вы можете создавать различные типы визуализаций, такие как гистограммы, горизонтальные графики, временные ряды и т.д. Существуют различные методы включения приложений и виджетов Bokeh в веб-приложения и страницы.

В этом руководстве мы собираемся создать базовый график боке и встроить его в наше веб-приложение Django. Для этого мы будем импортировать компоненты из bokeh.embed, который возвращает отдельные компоненты. Функция bokeh.embed.components () возвращает сценарий, содержащий эти данные для вашего графика с тегом, в который загружается представление графика. Мы подробно рассмотрим пошаговую процедуру.

Шаг 1. Настройка базового проекта Django

Для этого проекта мы используем PyCharm IDE. PyCharm — одна из самых популярных IDE, используемых для языка сценариев python.

  • Откройте PyCharm, создайте новый проект и сохраните его как BokehProject.
  • Зайдите в терминал и установите Django с помощью команды:
pip установить django
  • Таким же образом мы установим боке в нашем проекте как:
pip install bokeh

Шаг 2: Создайте проект Django

  • Создайте проект Django, используя следующую команду:
django-admin startproject BokehDjango
  • Измените папку проекта, используя следующую команду:
cd BokehDjango
  • Запустите manage.py, чтобы первоначально перенести изменения данных в наш проект с помощью migrate, как показано ниже.
python manage.py migrate
  • Создайте суперпользователя, используя следующую команду, чтобы создать учетную запись суперпользователя
python manage.py createsuperuser
  • Добавьте имя, адрес электронной почты и пароль.
  • На этом этапе структура каталогов выглядит так, как показано ниже: На этом этапе структура каталогов выглядит так, как показано ниже
  • Теперь давайте запустим приведенную ниже команду, чтобы проверить, успешно ли установлен Django.
python manage.py runserver
  • Перейдите по адресу http://127.0.0.1:8000/,и вы увидите что-то вроде этого. Перейдите по адресу http
  • Теперь мы создаем приложение Django, используя следующую команду
python manage.py startapp BokehApp
  • Структура каталогов на этом этапе будет такой, как показано ниже: Структура каталогов на этом этапе будет такой, как показано ниже
  • Поскольку мы создали приложение, нам нужно добавить его в настройки. Откройте settings.py и добавьте в установленные приложения следующее:
INSTALLED_APPS = [
   'django.contrib.admin',
   'django.contrib.auth',
   'django.contrib.contenttypes',
   'django.contrib.sessions',
   'django.contrib.messages',
   'django.contrib.staticfiles',
   'BokehApp',
]
  • Обновите файл urls.py и добавьте шаблоны URL. Откройте pyиз папки нашего проекта, то есть BokehDjango, и добавьте функцию включения в оператор импорта. Кроме того, добавьте путь для включения URL-адресов нашего нового приложения, как показано ниже:
    Python
from django.contrib import admin
from django.urls import path, include
 
 
urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("BokehApp.urls")),
]
  • Теперь создайте новый файл в папке нашего приложения, то есть BokehApp, и сохраните его как py.
  • Откройте файл и добавьте путь к маршруту для вашей домашней страницы, как показано ниже, а также не забудьте импортировать путь и представления.
Читайте также:  Local IDE или Online IDE на Java

Python

from django.urls import path
from . import views
 
urlpatterns = [path("", views.home, name="home")]
  • Затем мы создаем представление для нашей домашней страницы, которое будет отображать наш первый график боке. Откройте views.py и создайте новый метод с именем home (),а перед этим мы импортируем HttpResponse..HttpResponse чаще всего используется как объект, возвращаемый из представления Django.
  • На данный момент мы просто отображаем приветственное сообщение, как показано ниже:
from django.shortcuts import render
from django.http import HttpResponse
 
# Create your views here.
def home(request):
    return HttpResponse("Welcome to home page")
  • Давайте запустим сервер с помощью python manage.py runserver и посмотрим на результат: Давайте запустим сервер с помощью python manage

Итак, это все о настройке нашего веб-сайта Django.

Шаг 3: Завершите настройку боке в нашем проекте

  • Перейдите в оболочку Python и проверьте версию Bokeh как:
bokeh.__version__
  • Как показано на изображении ниже: авершите настройку боке в нашем проекте
  • Теперь давайте создадим папку шаблонов в нашем каталоге BokehApp и сохраним ее как шаблоны. Создайте новый файл в каталоге шаблонов и сохраните его как base.html.
  • Добавьте следующие ссылки CSS в файл htmlв теге head и замените версию своего боке в месте bokeh -xyz min (подчеркнутое место 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”>
  • И ссылки JavaScript под конечным тегом body, то есть после и аналогичным образом заменяют вашу версию боке на 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>
  • В html файл выглядит следующим образом 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>
  • Давайте теперь заменим функцию просмотра на главную, чтобы она отображала наш первый график. Добавьте приведенный ниже код, который создает основные круговые метки разброса на нашем графике:
# Create funtion that
# return space count
def check_space(Test_string):
    return Test_string.count(" ")
 
# Driver function
if __name__ == "__main__":
    Test_string = "Welcome to geeksforgeeks, Geeks!"
 
    # Call the function and display
    print(f"Number of Spaces: {check_space(Test_string)}")
  • Метод компонентов возвращает сценарий, который содержит данные для вашего графика и предоставляет тег <div> для отображения представления графика. Эти два элемента могут быть вставлены в текст HTML, и <script> при выполнении заменит div на график.
  • Метод круга — это метод глифа, который является методом объекта- фигуры . Глифы — это основные визуальные строительные блоки графиков Боке. Сюда входят такие элементы, как линии, прямоугольники, квадраты, клинья или круги на диаграмме рассеяния.
  • Участок переменной позволяет создать сюжет , который держит все различные объекты , такие как глифы, аннотации и пр визуализации.
Читайте также:  Как выполнить код jQuery?

Итак, давайте обновим нашу страницу после сохранения всех файлов, и результат будет таким, как показано ниже.

Итак, давайте обновим нашу страницу после сохранения всех файлов

 

Чтобы улучшить внешний вид страницы, мы добавляем начальную загрузку в наш файл base.html. Мы добавили несколько компонентов, и окончательный 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>

Выход:

Чтобы улучшить внешний вид страницы, мы добавляем начальную загрузку в наш

 

Оцените статью
bestprogrammer.ru
Добавить комментарий