Рубрики
Без рубрики

Адаптивные гистограммы с боке, Flask и Python 3

Как создавать гибкие гистограммы с помощью библиотеки визуализации данных Bokeh, Flask и Pyton 3.

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

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

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

Адаптивная гистограмма боке с 64 полосами.

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

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

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

  • Веб-фреймворк Flask,
  • версия 0.12.2
  • Библиотека визуализации данных Bokeh,
  • версия 0.12.5
  • библиотеки структур данных и анализа pandas,
  • версия 0.20.1
  • pip и
  • virtualenv , которые входят
  • в комплекте с Python 3, чтобы установить и изолировать Flask, Bokeh,
  • и библиотеки pandas из любых других проектов Python, которыми вы могли бы быть
  • работа над

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

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

Установка Bokeh и Flask

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

python3 -m venv barchart

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

source barchart/bin/activate

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

Активация нашей виртуальной среды Python в командной строке.

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

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

pip install bokeh==0.12.5 flask==0.12.2 pandas==0.20.1

После короткого периода загрузки и установки наши необходимые зависимости должен быть установлен в нашем virtualenv. Ищите вывод для подтверждения все заработало.

Installing collected packages: six, requests, PyYAML, python-dateutil, MarkupSafe, Jinja2, numpy, tornado, bokeh, Werkzeug, itsdangerous, click, flask, pytz, pandas
  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 bokeh ... done
  Running setup.py install for itsdangerous ... done
Successfully installed Jinja2-2.9.6 MarkupSafe-1.0 PyYAML-3.12 Werkzeug-0.12.2 bokeh-0.12.5 click-6.7 flask-0.12.2 itsdangerous-0.24 numpy-1.12.1 pandas-0.20.1 python-dateutil-2.6.0 pytz-2017.2 requests-2.14.2 six-1.10.0 tornado-4.5.1

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

Запуск нашего приложения Flask

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

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

from flask import Flask, render_template


app = Flask(__name__)


@app.route("//")
def chart(bars_count):
    if bars_count <= 0:
        bars_count = 1
    return render_template("chart.html", bars_count=bars_count)


if __name__ == "__main__":
    app.run(debug=True)

Приведенный выше код представляет собой короткое приложение Flask с одним маршрутом. который определяет функцию chart . диаграмма принимает произвольное целое число в качестве ввода, который позже будет использоваться для определения того, сколько данных мы хотим в нашем гистограмма. Функция render_template в диаграмме будет использовать шаблон из механизма шаблонов по умолчанию Flask с именем Jinja2 для вывода HTML.

Последние две строки позволяют нам запускать приложение Flask из командная строка на порту 5000 в режиме отладки. Никогда не используйте режим отладки для производства, вот что нравится серверам WSGI Gunicorn созданы для.

Создайте подкаталог в папке проекта с именем templates . В пределах шаблоны создают файл с именем chart.html . chart.html упоминается в функцию chart нашего файла app.py , поэтому нам нужно создать ее перед нашим приложение будет работать правильно. Заполните chart.html следующим Разметка Jinja2.




  
    Bar charts with Bokeh!
  
  
    

Bugs found over the past {{ bars_count }} days

Шаблон chart.html отображает количество столбцов, переданных в chart через URL.

Сообщение тега

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

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

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

$(barchart) python app.py

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

Простое приложение Flask без гистограммы

Наш простой маршрут Flask готов, но это не очень интересно. Время чтобы добавить нашу гистограмму.

Создание гистограммы

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

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

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 flask import Flask, render_template

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

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

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

app = Flask(__name__)


@app.route("//")
def chart(bars_count):
    if bars_count <= 0:
        bars_count = 1

    data = {"days": [], "bugs": [], "costs": []}
    for i in range(1, bars_count + 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 render_template("chart.html", bars_count=bars_count,
                           the_div=div, the_script=script)

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

chart вызывает две функции: create_hover_tool и create_bar_chart . Мы еще не написали эти функции, поэтому продолжайте добавлять код ниже диаграммы :

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=0, 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="#e12127")
    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 пока ничего не делает, она просто возвращает None , который мы можем использовать, если нам не нужен инструмент наведения. Парение инструмент – это наложение, которое появляется, когда мы наводим курсор мыши на один из полосы или коснитесь полосы на сенсорном экране, чтобы увидеть больше данных о бар.

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

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

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

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

Нам просто нужно несколько обновлений нашего файла templates/chart.html для отображения визуализация. Откройте файл и добавьте в него эти 6 строк. Две из этих строк предназначены для требуемого CSS, две – для JavaScript Bokeh. файлы, а оставшиеся два – это сгенерированная диаграмма.




  
    Bar charts with Bokeh!
    
  
    

Bugs found over the past {{ bars_count }} days

{{ the_div|safe }} {{ the_script|safe }}

Хорошо, давайте попробуем наше приложение с простой диаграммой из 4 полос. В Приложение Flask должно автоматически перезагружаться при сохранении app.py с новым код, но если вы выключите сервер разработки, запустите его снова с python app.py команда.

Откройте в браузере адрес localhost: 5000/4/.

Адаптивная гистограмма боке с 4 полосами.

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

Адаптивная гистограмма боке с 16 полосами.

Теперь еще от 4x до 128 баров с localhost: 5000/128/…

Адаптивная гистограмма боке со 128 полосами.

Пока все выглядит хорошо. Но как насчет этого инструмента наведения, чтобы детализировать каждый панель для дополнительных данных? Мы можем добавить наведение с помощью всего нескольких строк кода в функции 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: 5000/128/ страница.

Адаптивная гистограмма боке со 128 полосами и показом инструмента наведения.

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

График заполнен более чем 100 столбцами или около того, но вы можете дать попробуйте с любым количеством полосок, которое вы хотите. Вот что такое непрактичное количество в 50 000 баров, черт возьми, похоже:

Адаптивная гистограмма боке с 50000 полосами.

Да, нам может потребоваться дополнительная работа, чтобы отобразить больше, чем несколько сто баров за раз.

Что дальше?

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

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

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

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