Прямо сейчас мы живем в карантине по всему миру. Что мы можем сделать с этим как инженер-программист? Мы можем сделать интерактивную панель инструментов, чтобы помочь людям понять данные. Почему интерактивная приборная панель? Динамические, интерактивные визуализации могут расширить возможности людей изучать данные для себя.
Построить красивые, веб-аналитические приложения. JavaScript не требуется.
Для людей, которые имеют только в науке данных, изучение веб-разработки такая запуганная работа. Особенно изучение нового языка программирования, такого как JavaScript. Быть Python по-прежнему имеет лучшие науки о науке о науке и машине, создавая визуализацию веб-приложения без хлопот – мечта сбывается для Pythonistas.
Dash является продуктивным Python Framework для строительства веб-приложений. Написано на колбе, Plottly.js и rance.js, dash идеально подходит для создания приложений визуализации данных с очень пользовательскими пользовательскими интерфейсами в чистом Python. Это особенно подходит для всех, кто работает с данными в Python.
Спасибо моему другу Оди что создал COVID-19 API по Скачка ArcGIS На приборной панели Джона Хопкинса Covid-19. Вы можете найти проект ниже.
Math Aroid/Covid-19-API
COVID-19 Глобальные данные (от JHU CSSE на данный момент) AS-A-Service
Обслуживание данных из Университета Джона Хопкинса CSSE как JSON API
Маршруты
/: содержит OpenGraph Image для разделения
/API: Глобальное резюме
/api/og: генерируйте сводную открытую график изображения
/API/подтвержден: Глобальные случаи на регион отсортированы по подтвержденным случаям
/API/восстановлено: глобальные случаи в регионе отсортированы путем восстановленных случаев
/API/Смерти: Глобальные случаи в регионе отсортированы по мотивам смерти
/API/Daily: Глобальные случаи в день
/API/Daily/[Дата ]: Деталь обновлений в [Дате] (например,/API/Daily/2-14-2020)
/API/Страны: Все страны и их коды ISO
/API/Страны/[Страна]: Сводка [Страна] (E.g./API/Страны/Индонезия или/API/Страны/США или/API/Страны/CN)
/API/Страны/[Страна]/подтверждено: [страна] случаи в регионе отсортированы подтвержденными случаями
/API/Страны/[Страна]/восстановленные: [страна] случаи в регионе отсортированы путем восстановленных случаев
/API/Страны/[Страна]/Смертные случаи: случаи [страна] в регионе, отсортированные по мотивам смерти
/API/Страны/[Страна]/OG: Создание сводного изображения открытого графа для [страны]
использование
Клон
Установите депс (
пряжа
,NPM установить
НесомненноУстановите и зарегистрируйтесь в Zeit. Теперь если ты…
Прежде чем мы начнем, я надеюсь, что вы можете следовать за этим Учебник Dash Для того, как установить и основные материалы.
import dash dash_app = dash.Dash( "An Example for Dash Apps", external_stylesheets=[ "https://fonts.googleapis.com/css?family=Product+Sans:400,400i,700,700i", "https://cdn.rawgit.com/plotly/dash-app-stylesheets/2cc54b8c03f4126569a3440aae611bbef1d7a5dd/stylesheet.css", "https://codepen.io/bcd/pen/KQrXdb.css" ] ) dash_app.config.suppress_callback_exceptions = True
Вот как вы создаете приложение Dash и для этого примера, вы можете использовать пользовательскую таблицу стилей CSS для изменения стилей элементов по умолчанию. dash_app.config.suppress_callback_exceptions. Мы просто хотим игнорировать предупреждение.
import dash_html_components as html def template(template_name: str, dropdown_menu): return html.Div([ html.H2('An Example Dash App', style={"display": "inline", 'font-size': '3.65em', 'margin-left': '7px', 'font-weight': 'bolder', 'font-family': 'Product Sans', 'color': "rgba(117, 117, 117, 0.95)", 'margin-top': '20px', 'margin-bottom': '0', }), html.Img(src="https://avatars2.githubusercontent.com/u/20743732", style={ 'height': '100px', 'float': 'right', 'margin-bottom': '10px', }), dropdown_menu, html.Div(id='graphs-' + template_name) ], className='container')
Есть два компонента, которые мы будем использовать больше в приложении Dash dash_html_components.
и dash_core_components.
. dash_html_components
Библиотека имеет компонент для каждого HTML-тега.
HTML. H2 («Пример приложения Dash»)
Компонент генерирует
HTML-элемент в вашем приложении. Вы можете добавить свои пользовательские CSS в качестве словаря Пример приложения Dash
Стиль
Входной аргумент.
В этом коде мы создаем функцию шаблона в качестве основы страницы, чтобы ее можно было использовать в другой функции.
import dash_core_components as dcc import plotly.graph_objs as go from dash.dependencies import Input, Output import pandas as pd from apps import template from apps.app import dash_app APPS_NAME = 'covid19' df = pd.read_json('https://covid19.mathdro.id/api/daily') df['reportDate'] = pd.to_datetime(df['reportDate']) dropdown_menu = dcc.Dropdown(id='data-input-' + APPS_NAME, options=[ {'label': 'Data Harian Dunia', 'value': 'data-harian-dunia'}], value=['data-harian-dunia'], multi=True) layout = template.template(APPS_NAME, dropdown_menu) def covid19(value_name: str): data_1 = go.Scatter(x=df['reportDate'], y=df['totalConfirmed'], name="Total Confirmed", mode="lines+markers") data = [data_1] layout = dict(title='Total Positif Covid 19 di Seluruh Dunia', xaxis=dict(title='Hari'), yaxis=dict(title='Jumlah Kumulatif'), ) fig = dict(data=data, layout=layout) return dcc.Graph( id=value_name, figure=fig, ) @dash_app.callback( Output('graphs-' + APPS_NAME, 'children'), [Input('data-input-' + APPS_NAME, 'value')], ) def update_graph(data): graphs = [] for x in data: if x == 'data-harian-dunia': graphs.append(covid19(x)) return graphs
dash_core_components
Набор компонентов для интерактивных пользовательских интерфейсов включает в себя такие компоненты, как выпадающие, графики, блоки размещения и многое другое.
Поскольку Python имеет богатые науки/машины обучения Ecosystem, вы можете просто импортировать Пандас
Чтобы получить некоторые данные из API и преобразуйте его в DataFrame и готовы манипулировать данными.
dash_app.callback
Декоратор – это то, как мы можем сделать приложение Dash Interactive. В Dash, входы и выход нашего приложения являются просто свойства конкретного компонента.
import dash_core_components as dcc import dash_html_components as html from dash.dependencies import Input, Output from apps.app import dash_app from apps import covid19 dash_app.layout = html.Div([ dcc.Location(id='url', refresh=False), html.Div(id='page-content') ]) app = dash_app.server @dash_app.callback(Output('page-content', 'children'), [Input('url', 'pathname')]) def display_page(pathname): if pathname == '/': return covid19.layout else: print(pathname) return '404' if __name__ == '__main__': dash_app.run_server(host='0.0.0.0', debug=True, port=8080)
В Main.py мы создаем взаимодействие с URL-адресом, вы можете добавить больше страниц, просто добавьте еще один макет на Pathname. Приложения Dash являются веб-приложениями. Dash использует колбу как веб-каркас. Базовое приложение Flask доступно в dash_app.server
. Отказ Кроме того, вы можете использовать Gunicorn для развертывания вашего приложения по Gunicorn-B 0.0.0.0:8080 Главная: приложение
Отказ
И теперь последний шаг – развертывание на платформе Google Cloud, используя приложение. Вы можете научиться настроить этот QuickStart для Python 3. После этого у вас есть только 2 шага для развертывания приложения Dash.
Создать App.yaml.
runtime: python37
Просто добавьте время выполнения, чтобы сообщить App Engine использовать Python 3 Runtime для вашего приложения.
Просто разверните его
gcloud app deploy
Действительно просто правильно? При этом вы можете легко развернуть ваше приложение Tash в мир и не беспокоиться о том, как инфраструктура входит в ваши приложения.
Это пример проекта Dash, вы можете добавить свой график/или компонент, как вы хотите. Вы можете найти остальную часть проекта и спикер, доступа к этим ниже.
RUBIAGATRA/DASH-COVID19
Пример для приложения
Пример для приложения
pip install -r requirements.txt
python main.py
Оригинал: “https://dev.to/rubiagatra/build-covid-19-dashboard-using-dash-and-deploy-to-google-cloud-platform-1ogm”