Хотите построить что-то подобное?

Тогда продолжайте читать! Далее следует краткий обзор основных функций, а также несколько советов и приемов, как сделать ваше приложение Dash красивым - вот исходный код для меня.

Если вы ищете что-то более вводное, то на самом деле нет ничего лучше, чем Собственные уроки Dash.

Несколько вкладок

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

Сделать это очень просто! Взгляните на приведенный ниже фрагмент кода…

После присвоения html.Div app.layout вы можете использовать основной компонент Dash dcc.Tabs, чтобы затем легко создавать столько вкладок, сколько хотите, используя dcc.Tab. Ярлыки соответствуют заголовку вкладки, а в дочерних элементах вы можете поместить html, графики, уценку, а затем отформатировать все это так, как вам нравится.

Графики солнечных лучей

Это одни из самых привлекательных диаграмм, которые вы можете найти в библиотеке plotly, но вы их нечасто видите.

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

Вы можете добавить их в свои приложения для даш, используя plotly express, высокоуровневый интерфейс для построения графиков. Хотя он предлагает меньший контроль, чем использование метода графических объектов, готовые к работе результаты довольно хороши, даже если настраивать форматирование неудобно.

Однако, чтобы это работало, вам сначала понадобится правильно отформатированный фрейм данных pandas. В противном случае все идет капут.

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

Для справки вот как должен выглядеть окончательный результат:

Сначала напишите декоратор app.callback для функции, которую вы будете использовать для создания диаграммы солнечных лучей. Для вывода форматом является такой кортеж (имя графика, «цифра»), а для ввода - (название ползунка года, «значение»). Затем вы снова обращаетесь к ним в структуре app.layout - дополнительную информацию см. В документации по добавлению обратных вызовов в ваше приложение.

Затем настраиваемая функция, которую вы пишете, принимает выбранный год в качестве параметра и возвращает объект графического выражения - в моем примере ниже это присвоено переменной justice_graph.

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

К сожалению, гораздо сложнее отформатировать данные на графике, чтобы они выглядели красиво! Для этого вам нужно вызвать update_traces на объекте графического изображения Sunburst - см. Строку 30 ниже. Затем укажите свой собственный шаблон наведения и используйте его для ссылки на значения в переменной hover_data, назначенной пользовательской функции, которая создает диаграмму солнечных лучей; см. строку 16.

Затем вы можете настроить способ отображения этого текста, вызвав update_layout и указав шрифты, используемые на графике, как в строках 45–48 ниже.

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

Наложение графика Scattermapbox на график Choroplethmapbox

Plotly предлагает два довольно интересных графика поверх карт - scattermapbox, который отображает отдельные точки разброса на карте, и choroplethmapbox, который окрашивает разные участки в градиент в соответствии с некоторой переменной - то, что вы часто видите, чтобы выразить плотность населения.

Интересно, что вы можете сочетать эти два! Документации о том, как это сделать, не так много, но это не так уж и сложно.

Прежде всего, вам нужно вызвать метод графического объекта choroplethmapbox (извините за грубость) и назначить его переменной; в этом случае чоро. Это очень хорошо следует за сюжетной документацией. Вероятно, самый сложный момент здесь - это быстрое получение правильно отформатированного geojson - для этого я настоятельно рекомендую этот репозиторий github для значений UK.

Затем проделайте то же самое с методом графического объекта Scattermapbox. Чтобы управлять размером и цветом разбросанных точек, вы можете ввести числовые объекты серии панд в словарь, назначенный параметру маркера.

После того, как вы все это сделаете, вызовите объект plotly graph с помощью. go.Figuremethod и введите объект Choroplethmapbox, за которым следует объект Scattermapbox в списке, в параметр данных. Или, может быть, проще просто увидеть, как это выглядит в строке 34 ниже.

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

Чтобы это работало в вашем приложении, когда вы позже добавите dcc.Graph метод, вы просто присваиваете имя своему графику - в данном случае ethnicity_map параметру figure, и тогда все готово.

Пользовательский фавикон и стиль кода

Два последних маленьких совета! Использовать собственный значок в приложениях Dash очень просто, но по какой-то причине это не так распространено.

Все, что вам нужно сделать, это создать папку с ресурсами в корневом каталоге вашего проекта и добавить туда нужное изображение в качестве значка. Назовите его favicon.ico и все. Все остальное Dash делает под капотом.

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

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

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

python -m черный каталог приложений-тире

Это пропускает файлы, отличные от Python, и очищает весь ваш код, а приложение Dash остается без изменений. Спасибо разработчикам черного цвета!