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

Создайте панель инструментов COVID-19, используя тире и развертывание в облачную платформу Google

Как мы можем построить панель инструментов COVID-19, используя тире и развернуть ее в облачную платформу Google. Теги с Python, Dash, React, GCP.

Прямо сейчас мы живем в карантине по всему миру. Что мы можем сделать с этим как инженер-программист? Мы можем сделать интерактивную панель инструментов, чтобы помочь людям понять данные. Почему интерактивная приборная панель? Динамические, интерактивные визуализации могут расширить возможности людей изучать данные для себя.

Построить красивые, веб-аналитические приложения. 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: Создание сводного изображения открытого графа для [страны]

использование

  1. Клон

  2. Установите депс ( пряжа , NPM установить Несомненно

  3. Установите и зарегистрируйтесь в 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») Компонент генерирует

Пример приложения Dash

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

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

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”