Хотите построить что-то подобное?
Тогда продолжайте читать! Далее следует краткий обзор основных функций, а также несколько советов и приемов, как сделать ваше приложение 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.Figure
method и введите объект Choroplethmapbox, за которым следует объект Scattermapbox в списке, в параметр данных. Или, может быть, проще просто увидеть, как это выглядит в строке 34 ниже.
Для правильной загрузки вам также понадобится токен mapbox, который вы можете получить на их веб-сайте - настройки mapbox по умолчанию отлично подходят для этого.
Чтобы это работало в вашем приложении, когда вы позже добавите dcc.Graph
метод, вы просто присваиваете имя своему графику - в данном случае ethnicity_map
параметру figure, и тогда все готово.
Пользовательский фавикон и стиль кода
Два последних маленьких совета! Использовать собственный значок в приложениях Dash очень просто, но по какой-то причине это не так распространено.
Все, что вам нужно сделать, это создать папку с ресурсами в корневом каталоге вашего проекта и добавить туда нужное изображение в качестве значка. Назовите его favicon.ico и все. Все остальное Dash делает под капотом.
Далее, отслеживание стиля кода при написании приложения Dash может быть затруднительным, поскольку в каждой строке есть много пробелов и различные возможные отступы табуляции, которые не выделены пробелами.
Кроме того, насколько я могу судить, не существует определенного стиля, который бы все использовали! Поэтому я рекомендую не слишком беспокоиться и просто кодировать, однако вам будет легко читать.
Затем, когда вы закончите, используйте черный для форматирования кода. Вы даже можете запустить его для всего каталога приложения, нажав.
python -m черный каталог приложений-тире
Это пропускает файлы, отличные от Python, и очищает весь ваш код, а приложение Dash остается без изменений. Спасибо разработчикам черного цвета!