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/,и вы увидите что-то вроде этого.
- Теперь мы создаем приложение 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.
- Откройте файл и добавьте путь к маршруту для вашей домашней страницы, как показано ниже, а также не забудьте импортировать путь и представления.
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 и посмотрим на результат:
Итак, это все о настройке нашего веб-сайта 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
(f
"Number of Spaces: {check_space(Test_string)}"
)
- Метод компонентов возвращает сценарий, который содержит данные для вашего графика и предоставляет тег <div> для отображения представления графика. Эти два элемента могут быть вставлены в текст HTML, и <script> при выполнении заменит div на график.
- Метод круга — это метод глифа, который является методом объекта- фигуры . Глифы — это основные визуальные строительные блоки графиков Боке. Сюда входят такие элементы, как линии, прямоугольники, квадраты, клинья или круги на диаграмме рассеяния.
- Участок переменной позволяет создать сюжет , который держит все различные объекты , такие как глифы, аннотации и пр визуализации.
Итак, давайте обновим нашу страницу после сохранения всех файлов, и результат будет таким, как показано ниже.
Чтобы улучшить внешний вид страницы, мы добавляем начальную загрузку в наш файл 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
>
Выход: