Créez rapidement un tableau de bord d'analyse de données Python avec Streamlit et déployez-le sur AWS

introduction

Je souhaite créer un tableau de bord capable de visualiser et d'analyser les données de manière intuitive et de les publier en tant qu'application Web. Mais html, css et js sont gênants, donc je ne veux pas les déranger. Dans un tel cas, Streamlit vous permet de créer un tableau de bord d'analyse de données avec un seul script Python sans aucun problème. Dans cet article

• Processus de création d'application (installation, préparation des données, création de tableau de bord) --Procédure de déploiement sur une instance AWS EC2

Je vais partir. Puisqu'il est un tel moment, en tant que sujet, regardez les données qui peuvent confirmer le trafic des personnes dans les 23 quartiers de Tokyo publiées dans Yahoo Data Solution, et le nouveau Corona Vérifions l'impact des mesures.

\ # Surtout la seconde moitié est un enregistrement qu'un débutant du système Web a essayé à tâtons, il devrait donc y avoir diverses lacunes dans le contenu et la description. \ # J'apprécierais si vous pouviez le signaler.

Création d'applications

Installation Streamlit

Streamlit est OSS. GitHub：https://github.com/streamlit/streamlit

L'installation est OK avec ce qui suit.

pip install streamlit

En exécutant la commande suivante, vous pouvez lancer l'application de démonstration localement et la vérifier sur le navigateur (le navigateur se lancera automatiquement).

streamlit hello

La Page officielle du didacticiel est facile à comprendre et à utiliser. Cet article de commentaire est également disponible.

[Une addition] Ceci est également utile.

• [Python] J'ai écrit un test de "Streamlit" qui facilite la création d'une application de visualisation

Préparation des données

C'est un tel moment, vous voudrez donc voir comment les nouvelles mesures corona affectent le flux de personnes à Tokyo. Lorsque j'ai recherché de telles données, je les ai trouvées sur Yahoo! Data Solution. "Transition quotidienne de la population estimée séjournant à Tokyo 23 quartiers (total / visiteurs / résidents)" Données Il a été publié en tant que données ouvertes (à compter du 10 avril 2020). Cette fois, je vais essayer de visualiser cela d'une manière agréable.

[Source: Yahoo! Data Solution (https://ds.yahoo.co.jp/report/, 09/04/2020)] Les données sont mises à jour quotidiennement. Les données jusqu'au 9 avril 2020 sont utilisées ici.

Les données originales sont au format Excel et comprennent le nombre de résidents, de visiteurs et le nombre total de personnes dans les 23 quartiers de Tokyo sur une base quotidienne. Comme il est enregistré dans une feuille séparée pour chaque mois, convertissez-le en csv à l'avance.

Lisez chacun de ces éléments et combinez-les en un seul.

import numpy as np
import pandas as pd

data_02 = pd.read_csv('Transition du quartier 23 de Tokyo 0409_février.csv')
data_03 = pd.read_csv('Transition du quartier 23 de Tokyo 0409_Mars.csv')
data_04 = pd.read_csv('Transition du quartier 23 de Tokyo 0409_avril.csv')

data_all = pd.concat([data_02, data_03.iloc[:, 2:], data_04.iloc[:, 2:]], axis=1)

data_all.head()

Les zones et les classifications cibles sont organisées en MultiIndex et en sortie.

data_all.fillna(method='ffill', inplace=True)
data_all.set_index(['zone', 'Classification des cibles'], inplace=True)

data_all.to_csv('tokyo_0409.csv', index=True, header=True)

Les données finales ressemblent à ceci.

data_all.head(7)

Créer un tableau de bord

À partir de là, nous allons créer un tableau de bord. Streamlit vous permet de créer un tableau de bord avec un seul script Python. Cette fois, j'écrirai le script sous la forme streamlit_app.py.

Le contenu des données est affiché dans un graphique linéaire. Spécifiez la zone cible dans la zone de sélection et faites-en une spécification qui vous permet de voir la transition chronologique du nombre de résidents, de visiteurs et du nombre total de la zone.

streamlit_app.py

import numpy as np
import pandas as pd
import streamlit as st
import plotly.graph_objects as go

st.title('Transition quotidienne de la population estimée dans 23 quartiers de Tokyo')
st.write('[Source: Yahoo Data Solution]')

data_all = pd.read_csv('data/tokyo_0409.csv')
erea_list = data_all['zone'].unique()

data_all.set_index(['zone', 'Classification des cibles'], inplace=True)

#Changer la valeur en tenue verticale
data_all = data_all.T
#Convertir la date en type datetime
data_all.index = map(lambda x: '2020'+x, data_all.index)
data_all.index = pd.to_datetime(data_all.index, format='%Y année%m mois%jour j')
data_all.index.name = 'temps'

#Sélectionnez la zone d'affichage avec la boîte de sélection
selected_erea = st.sidebar.selectbox(
    'Sélectionnez la zone à afficher:',
    erea_list
)

#affichage graphique
st.write(f'##Affichage:{selected_erea}')
data_plotly = data_all[(selected_erea)]
data_plot = [
    go.Scatter(x=data_plotly.index,
               y=data_plotly['Résident'],
               mode='lines',
               name='Résident'),
    go.Scatter(x=data_plotly.index,
               y=data_plotly['Visiteur'],
               mode='lines',
               name='Visiteur'),
    go.Scatter(x=data_plotly.index,
               y=data_plotly['L'ensemble'],
               mode='lines',
               name='L'ensemble')]
layout = go.Layout(
    xaxis={"title": "Date"},
    yaxis={"title": "Nombre de personnes"}
)
st.plotly_chart(go.Figure(data=data_plot, layout=layout))

Utilisez la méthode st.write () du module streamlit, etc. Nous définirons les chaînes de caractères, les tableaux et les graphiques à afficher à l'écran.

De plus, en tant que processus interactif, st.selectbox () est utilisé pour afficher les options de la zone cible. En ayant la valeur sélectionnée par l'utilisateur dans selected_erea comme valeur de retour, Les informations de la zone correspondante sont dessinées dans un graphique. Vous pouvez placer des éléments dans la barre latérale sur le côté gauche de l'écran avec st.sidebar, ce qui le rend un peu joli.

Pour l'affichage graphique, des méthodes simples telles que st.line_chart () sont fournies, Je ne semblais pas pouvoir gérer les dates, etc. Cette fois, j'utilise st.plotly_chart () pour créer un graphique interactif avec Plotly et le dessiner.

Une autre caractéristique de Streamlit est Vous pouvez tracer des données sur la carte avec st.map () Vous pouvez afficher une barre de progression pour les processus qui prennent beaucoup de temps avec st.progress (). Je voulais également utiliser cette zone, mais cette fois je l'omettrai.

Il est pratique de pouvoir créer un écran avec juste un court script Python sans être du tout conscient du HTML.

Déployer sur AWS

Utilisation supposée, vous pouvez vérifier rapidement les données disponibles, partager les résultats avec l'équipe, etc. Je pense que c'est à ce sujet, mais comme c'est un gros problème, je vais le déployer sur une instance AWS EC2 et le publier en tant que test.

procédure: 1: Créez une instance t2.micro de l'offre gratuite AWS EC2 2: Exécutez l'application dans l'instance

streamlit run streamlit_app.py

3: Acquisition de domaine Cette fois, j'ai obtenu un nom de domaine approprié ʻonedata.ml du service de domaine gratuit [freenom](https://www.freenom.com/ja/index.html). (Vous pouvez obtenir gratuitement les domaines ".tk", ".ml", ".ga", ".cf", ".gq") 4: Modifier le fichier de configuration streamlit Dans le fichier de configuration (config.toml) dans le dossier ~ / .streamlit`, Entrez le nom de domaine que vous avez obtenu comme adresse d'accès.

[browser]
gatherUsageStats = false
serverAddress = "onedata.ml"

[server]
port = 8501

5: Transfert de port de 80 à 8501 Par défaut, streamlit accepte la communication sur le port 8501. Je veux pouvoir accéder à partir du port par défaut 80 afin d'accéder sans spécifier le port par nom de domaine. Pour ce faire, vous avez besoin des privilèges root lors de l'exécution de l'application. Par conséquent, ici, nous allons y faire face en jouant avec iptables et en transférant l'accès du port 80 au port 8501.

sudo iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 8501

6: Ouverture du port 80 Modifiez le groupe de sécurité> Règles entrantes sur le tableau de bord EC2 et laissez le port 80 ouvert.

Voici l'application que j'ai créée ↓ http://onedata.ml

Mise en œuvre ↓ https://github.com/tkmz-n/streamlit_app

Résumé

Créez une application de démonstration simple pour visualiser les données ouvertes à l'aide de Streamlit J'ai essayé de le déployer sur AWS et de le publier.

En regardant les données, nous pouvons voir que le trafic de personnes dans les 23 quartiers de Tokyo diminue progressivement depuis la fin du mois de mars. Continuons à rester chez nous dans le but de faire converger la nouvelle Corona le plus rapidement possible.