Автор оригинала: Matt Makai.

Библиотека визуализации Python с открытым исходным кодом Bokeh помогает разработчики с созданием визуальных элементов веб-браузера. Вы можете строить графики для веб-приложения без кодирования JavaScript , как вам нужно использовать такие библиотеки, как d3.js и plotly.

Боке позволяет создавать множество стандартных и настраиваемых визуализаций, используя только Python, такой как эта гистограмма, которую мы создадим в этом руководстве:

Давайте использовать Фреймворк для бутылок с эффектом боке создавать пользовательские гистограммы веб-приложений Python.

Наши инструменты

Это руководство работает с Python 2 или 3, но Python 3 настоятельно рекомендуется для новых приложений. я использовал Python 3.6.2 , а пишу этот пост. В дополнение к Python в этом руководстве мы также будет использовать следующие зависимости приложения:

• Рамка для бутылок,
• версия 0.12.13
• Библиотека визуализации данных Bokeh,
• версия 0.12.6
• библиотеки структур данных и анализа pandas,
• версия 0.20.3
• pip и
• virtualenv , которые входят
• в комплекте с Python 3, чтобы установить и изолировать Bottle, Bokeh,
• и библиотеки pandas из других проектов Python, над которыми вы работаете

Если вам нужна помощь в получении настроена среда разработки перед запуском этого кода взгляните на это руководство по настройке Python 3 и Bottle в Ubuntu 16.04 LTS.

Весь код в этом сообщении в блоге доступен с открытым исходным кодом по лицензии MIT. на GitHub в разделе каталог bar-charts-bokeh-bottle-python-3 репозитория blog-code-examples . Используйте исходный код как хотите для своих собственных проектов.

Установка бутылки и боке

Создайте новую виртуальную среду для этого проекта, чтобы изолировать наши зависимости, используя следующую команду в терминале. Я обычно запускаю команда venv в отдельном каталоге venvs , в котором все мои виртуальные магазин.

python3 -m venv bottlechart

Активируйте virtualenv.

source bottlechart/bin/activate

Командная строка изменится после активации virtualenv:

Имейте в виду, что вам нужно активировать virtualenv в каждом новом терминале. окно, в котором вы хотите использовать virtualenv для запуска проекта.

Bokeh и Bottle можно установить в активированном сейчас virtualenv. с помощью пункта. Выполните эту команду, чтобы получить соответствующие боке и бутылку. версии.

pip install bokeh==0.12.6 bottle==0.12.13 pandas==0.20.3

Наши необходимые зависимости будут установлены в нашем виртуальном окружении после короткий период загрузки и установки.

Installing collected packages: bottle, six, chardet, certifi, idna, urllib3, requests, PyYAML, python-dateutil, MarkupSafe, Jinja2, numpy, tornado, bkcharts, bokeh, pytz, pandas
  Running setup.py install for bottle ... done
  Running setup.py install for PyYAML ... done
  Running setup.py install for MarkupSafe ... done
  Running setup.py install for tornado ... done
  Running setup.py install for bkcharts ... done
  Running setup.py install for bokeh ... done
Successfully installed Jinja2-2.9.6 MarkupSafe-1.0 PyYAML-3.12 bkcharts-0.2 bokeh-0.12.6 bottle-0.12.13 certifi-2017.7.27.1 chardet-3.0.4 idna-2.5 numpy-1.13.1 pandas-0.20.3 python-dateutil-2.6.1 pytz-2017.2 requests-2.18.2 six-1.10.0 tornado-4.5.1 urllib3-1.22

Теперь мы можем приступить к написанию кода нашего веб-приложения.

Создание приложения для бутылки

Сначала мы закодируем базовое приложение Bottle, а затем добавим гистограммы для отображаемой страницы.

Создайте для своего проекта папку с именем bottle-bokeh-charts . В пределах bottle-bokeh-charts создайте новый файл с именем app.py со следующими код:

import os
import bottle
from bottle import route, run, template


app = bottle.default_app()

TEMPLATE_STRING = """

 
  
 
 
  
Bugs found over the past {{ bars_count }} days
 

"""


@route('//')
def chart(num_bars):
    """Returns a simple template stating the number of bars that should
    be generated when the rest of the function is complete.
    """
    if num_bars <= 0:
        num_bars = 1
    return template(TEMPLATE_STRING, bars_count=num_bars)


if __name__ == '__main__':
    run(host='127.0.0.1', port=8000, debug=False, reloader=True)

Код, показанный выше, представляет собой короткое приложение Bottle с одним маршрутом, определенным с помощью функции chart . диаграмма получает произвольное целочисленное значение в качестве ввода. Функция template внутри chart использует шаблон HTML, определенный в TEMPLATE_STRING , для отображения HTML-страница в ответ на входящие запросы.

Последние две строки позволяют нам запустить приложение Bottle. в режиме отладки на порту 8000. Никогда не используйте режим отладки для производственных развертываний! Серверы WSGI, такие как Gunicorn созданы для работы с настоящими трафик и будет проще настроить без серьезной защиты дыры.

Теперь мы можем протестировать наше приложение.

Убедитесь, что ваш виртуальный сервер все еще активирован и что вы находитесь в базовый каталог вашего проекта, в котором находится app.py . Запустите app.py с помощью команды python .

(bottlechart)$ python app.py

Перейдите к localhost: 8000/16/ в своем веб-браузере. Вы должны увидеть сообщение заголовка о количестве ошибок, обнаруженных в последние 16 дней. Однако для этого сообщения нет гистограммы. только пока.

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

Создание столбчатой ​​диаграммы с боке

Мы построим нашу базовую основу приложения Bottle, используя новый код Python. чтобы задействовать библиотеку Bokeh.

Откройте app.py резервную копию и добавьте следующие выделенные строки импорта.

import os
import bottle
import random
from bokeh.models import (HoverTool, FactorRange, Plot, LinearAxis, Grid,
                          Range1d)
from bokeh.models.glyphs import VBar
from bokeh.plotting import figure
from bokeh.charts import Bar
from bokeh.embed import components
from bokeh.models.sources import ColumnDataSource
from bottle import route, run, template

Остальная часть нашего приложения будет использовать этот импорт для генерации случайных данные и гистограмма.

Наша гистограмма будет содержать «найденные программные ошибки» для своей темы. Данные будут генерировать случайным образом каждый раз при создании страницы. В реальном приложении у вас, конечно, наверняка будет более стабильный и полезный источник данных.

Продолжайте изменять app.py , чтобы раздел после импорта выглядел как следующий код.

app = bottle.default_app()

TEMPLATE_STRING = """

 
  
  
  
 
 
  
Bugs found over the past {{ bars_count }} days
  {{ !the_div }}
  
  
  {{ !the_script }}
 

"""


@route('//')
def chart(num_bars):
    """Returns a simple template stating the number of bars that should
    be generated when the rest of the function is complete.
    """
    if num_bars <= 0:
        num_bars = 1
    data = {"days": [], "bugs": [], "costs": []}
    for i in range(1, num_bars + 1):
        data['days'].append(i)
        data['bugs'].append(random.randint(1,100))
        data['costs'].append(random.uniform(1.00, 1000.00))

    hover = create_hover_tool()
    plot = create_bar_chart(data, "Bugs found per day", "days",
                            "bugs", hover)
    script, div = components(plot)
    return template(TEMPLATE_STRING, bars_count=num_bars,
                    the_div=div, the_script=script)

Функция chart получает три новых списка, которые случайным образом генерируются Супер-удобный случайный модуль Python 3 .

chart вызывает две функции: create_hover_tool и create_bar_chart . Мы еще не написали эти функции, так что давайте сделаем это сейчас. Добавьте эти две новые функции под функцией chart , но перед if __name__ == '__main__': строка.

def create_hover_tool():
    # we'll code this function in a moment
    return None


def create_bar_chart(data, title, x_name, y_name, hover_tool=None,
                     width=1200, height=300):
    """Creates a bar chart plot with the exact styling for the centcom
       dashboard. Pass in data as a dictionary, desired plot title,
       name of x axis, y axis and the hover tool HTML.
    """
    source = ColumnDataSource(data)
    xdr = FactorRange(factors=data[x_name])
    ydr = Range1d(start=0,end=max(data[y_name])*1.5)

    tools = []
    if hover_tool:
        tools = [hover_tool,]

    plot = figure(title=title, x_range=xdr, y_range=ydr, plot_width=width,
                  plot_height=height, h_symmetry=False, v_symmetry=False,
                  min_border=10, toolbar_location="above", tools=tools,
                  responsive=True, outline_line_color="#666666")

    glyph = VBar(x=x_name, top=y_name, bottom=0, width=.8,
                 fill_color="#6599ed")
    plot.add_glyph(source, glyph)

    xaxis = LinearAxis()
    yaxis = LinearAxis()

    plot.add_layout(Grid(dimension=0, ticker=xaxis.ticker))
    plot.add_layout(Grid(dimension=1, ticker=yaxis.ticker))
    plot.toolbar.logo = None
    plot.min_border_top = 0
    plot.xgrid.grid_line_color = None
    plot.ygrid.grid_line_color = "#999999"
    plot.yaxis.axis_label = "Bugs found"
    plot.ygrid.grid_line_alpha = 0.1
    plot.xaxis.axis_label = "Days after app deployment"
    plot.xaxis.major_label_orientation = 1
    return plot

Это много нового кода. Функция create_hover_tool не выполняет ничего, кроме возвращения. Нет , который используется, когда нет инструмент наведения желателен для графика.

В функции create_bar_chart мы берем случайно сгенерированный источник данных и преобразовать его в объект ColumnDataSource , который является одним тип входного объекта, который мы можем передать функциям Bokeh. Указываем два диапазона для осей x и y диаграммы.

Список tools останется пустым, потому что у нас еще нет инструмента наведения. Много волшебства происходит в строках, где мы создаем plot , используя Функция figure . Мы указываем все параметры, которые мы хотим, чтобы наш график имел такие как размер, панель инструментов, границы и должен ли график быть реагирует на изменение размера веб-браузера.

Объект VBar создает вертикальные полосы для добавления их на график с помощью функция add_glyph .

Последние строки функции меняют внешний вид графика. За Например, мы убрали логотип Bokeh , указав plot.toolbar.logo = None и добавил подписи к обеим осям. Я рекомендую сохраняя bokeh.plotting документация открыта, чтобы вы знали, какие у вас есть варианты настройки диаграммы и визуализации.

Давайте протестируем наше приложение, попробовав 6-столбчатую диаграмму. Приложение “Бутылка” должно автоматически перезагружается при сохранении app.py с новым кодом. Если вы закроете вниз на сервере разработки, запустите его резервную копию с помощью python app.py .

При запуске сервера разработки вы получите следующее предупреждение, потому что мы используем последнюю (на момент написания) версию 0.12.6 Выпуск боке.

/Users/matt/Envs/bottlechart/lib/python3.6/site-packages/bokeh/util/deprecation.py:34: BokehDeprecationWarning: 
The bokeh.charts API has moved to a separate 'bkcharts' package.

This compatibility shim will remain until Bokeh 1.0 is released.
After that, if you want to use this API you will have to install
the bkcharts package explicitly.

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

Откройте в браузере localhost: 8000/6/.

Он выглядит немного скудным, поэтому мы можем увеличить его в 3 раза, до 18 бар. перейдя на localhost: 5000/18/.

Теперь еще от 5x до 90 баров с localhost: 5000/90/.

Пока все хорошо! А как насчет того инструмента наведения, который мы пропустили? Мы можем добавить инструмент наведения с помощью еще нескольких строк кода в create_hover_tool функция.

Создание инструмента наведения

Добавьте эти выделенные строки в app.py в create_hover_tool функция.

def create_hover_tool():
    """Generates the HTML for the Bokeh's hover data tool on our graph."""
    hover_html = """
      

        $x
      
      

        @bugs bugs
      
      

        [email protected]{0.00}
      
    """
    return HoverTool(tooltips=hover_html)

Встраивание HTML в ваше приложение Python обычно не лучший вариант идея, но она работает с небольшими фрагментами, такими как этот инструмент наведения. Инструмент наведения курсора использует $ x для отображения оси x полосы, @bugs для отображения поле “ошибки” из нашего источника данных и [email protected] {0.00} для отображения “затрат” поле, отформатированное как сумма в долларах с точностью до 2 десятичных знаков.

Убедитесь, что вы изменили return None на return HoverTool (tooltips = hover_html) в вашей функции, чтобы результаты новый код отражается на обновленном графике.

Вернитесь в браузер и перезагрузите localhost: 8000/122/ страница.

Отлично сработано! Попробуйте поиграть с количеством полос в URL-адресе и размер окна, чтобы увидеть, как график выглядит в различных условиях.

На графике становится больше 100. Однако вы можете попробовать создать столько полос, сколько вы хотите, если ваш компьютер может обрабатывать рендеринг. Этот снимок экрана показывает, что такое совершенно непрактичная сумма в 40 000 бары выглядят так:

Вам может потребоваться дополнительная работа, чтобы диаграмма была полезной для отображения. более пары сотен баров за раз.

Что теперь?

Мы создали красивую небольшую настраиваемую гистограмму, используя библиотеку кода Bokeh.

Далее вы можете изменить источник входных данных, работать с другими типами диаграмм или измените цветовую схему диаграммы.

Боке – это гораздо больше. Взгляните на официальная документация проекта , репозиторий GitHub , страницу Full Stack Python Bokeh или взгляните на другие темы о Full Stack Python.

Вопросов? Дай мне знать через запрос на выпуск GitHub в репозитории Full Stack Python , в Твиттере @fullstackpython или @mattmakai .

Вы видите что-то не так в этом сообщении в блоге? Вилка источник этой страницы на GitHub и отправьте запрос на перенос с исправлением.