J'ai créé un site de visualisation du PIB (production nationale totale) en utilisant DASH!

Quel était cet article

Je commence à apprendre l'analyse de données et ainsi de suite. Et depuis que j'ai appris Dash, qui est l'un des frameworks Python, j'ai décidé de créer un site qui visualise certaines données à l'aide de Dash. Je vais résumer le processus dans cet article!

Visualisation des données du PIB

** J'ai décidé de visualiser les données du PIB. ** Je ne veux pas visualiser les données du PIB séparément, mais j'ai réfléchi au type de données à visualiser, mais je ne pouvais penser à rien, alors ** Japon ** / ** Amérique ** / ** Chine En plus de **, j'ai décidé de visualiser les données du PIB des ** Pays-Bas ** où je vis actuellement.

Collecte de données

** Les données sur le PIB ont été collectées à partir de ce site. NOTE GLOBALE ** (https://www.globalnote.jp/post-1409.html) En fait, je voulais visualiser les données grattées à l'aide de Beutiful Soup en les déposant dans des données CSV, mais je ne pouvais pas vraiment trouver les données cohérentes que je voulais visualiser avec des données ouvertes.

Donc, à partir de ce site, ** j'ai écrit les données une par une dans Excel et construit les données CSV. ** **

Vérifiez les données avec Jupyter Notebook

python

import pandas as pd
gdp_data = pd.read_csv('GDP_data.csv', sep=';')
gdp_data.head()

Informations de données

・ L'unité est d'un million de dollars américains. -PIB nominal total (production intérieure totale) sur la base des statistiques du FMI. ・ La conversion en dollars américains est basée sur le taux de change moyen de chaque année

python

gdp_data['Japan']

En faisant cela, les données stockées dans la colonne Japon peuvent être récupérées.

Préparation pour DASH

La préparation de Dash est très simple. Suivez les instructions sur le site ci-dessous. Cela dit, je viens de faire une installation pip ... https://dash.plot.ly/installation

Codage visualise.py

À partir de là, nous allons créer un fichier qui visualise les données à l'aide de Dash. Les éléments suivants doivent être importés avec les bibliothèques requises pour utiliser Dash.

visualise.py

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

if __name__ == '__main__':
    app.run_server(debug=True)

external_stylesheets spécifie l'emplacement du CSS externe. J'ai mis l'instance générée dans l'application. Après les minutes if, la fonction de configuration du serveur est exécutée, mais si le débogage est défini sur True, c'est pratique car vous pouvez vérifier le site affiché tout en apportant des modifications à ce fichier.

Nous allons donner des données ici et les visualiser.

Transmettez les données à DASH.

visualise.py

gdp_data = pd.read_csv('GDP_data.csv', sep=';')

Convertissez les données de csv en trame de données en l'insérant après l'importation.

app.layout = html.Div([
    dcc.Graph(
       id='gdp_graph',
       figure = {
           'data': [
               go.Scatter(
                   x=gdp_data['Time'],
                   y=gdp_data['Japan'],
                   mode='lines',
                   opacity=0.7,
                   marker={
                       'size':15,
                       'color':'red'
                   },
                   name='Japan'
               ),
               go.Scatter(
                   x=gdp_data['Time'],
                   y=gdp_data['USA'],
                   mode='lines',
                   opacity=0.7,
                   marker={
                       'size':15,
                       'color':'blue'
                   },
                   name='USA'
               ),
               go.Scatter(
                   x=gdp_data['Time'],
                   y=gdp_data['China'],
                   mode='lines',
                   opacity=0.7,
                   marker={
                       'size':15,
                       'color':'yellow'
                   },
                   name='China'
               ),
               go.Scatter(
                   x=gdp_data['Time'],
                   y=gdp_data['Netherlands'],
                   mode='lines',
                   opacity=0.7,
                   marker={
                       'size':15,
                       'color':'black'
                   },
                   name='Netherlands'
               )
           ]
       }
    )
])

Mettez-les après la variable d'application. Il est clairement indiqué que le graphique est utilisé comme mise en page dans l'application en utilisant go.Scatter. Vous pouvez visualiser les données en plaçant les données de l'axe x et de l'axe y dans go.Scater. Nous allons jeter un coup d'oeil.

$ python3 visualise.py

À ce stade, un tel graphique est terminé. Ça a l'air très bien et c'est facile! ?? Il est très bien que certains graphiques aient déjà été implémentés avec des fonctions utiles. (Si vous appuyez sur Japon, seul le graphique du Japon disparaît)

Ajustez un peu la mise en page

'layout': go.Layout(
               xaxis = {'title': 'Time'},
               yaxis = {'title': 'GDP'},
               width = 1000,
               height = 500
           )

Vous pouvez également afficher la mise en page des données affichées en ajoutant «mise en page» après les données. J'ai pu nommer les axes Y et X! plus loin...

html.H1(
        children='GDP Graph',
        style = {
            'textAlign': 'center',
            'color': 'black',
        }),

    html.Div(
        children='''
        You can easily visualise data by using DASH framework. 
        Here, you can understand the flow of GDP change in graph.
        ''',
        style = {
            'textAlign': 'center',
            'color': 'black',
        }),

Vous pouvez également ajouter des éléments html à l'application comme ceci. Vous pouvez facilement ajouter des explications, etc. Kurushunai

finalement

Cette fois, j'ai fait un petit site de visualisation de données. Il est toujours facile de démarrer, mais la force de python est que même avec ce type de connaissances, vous pouvez relativement bien visualiser les données.

De plus, j'ai pensé le publier sur Heroku, mais cela n'a pas fonctionné, j'ai donc écrit cet article.

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go

gdp_data = pd.read_csv('GDP_data.csv', sep=';')
gdp_data = gdp_data.rename(columns = {'Unnamed: 0': 'Time'})
gdp_data = gdp_data.drop('Unnamed: 5', axis=1)
gdp_data = gdp_data.drop('Unnamed: 6', axis=1)

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server
app.layout = html.Div(children=[
    html.H1(
        children='GDP Graph',
        style = {
            'textAlign': 'center',
            'color': 'black',
        }),

    html.Div(
        children='''
        You can easily visualise data by using DASH framework. 
        Here, you can understand the flow of GDP change in graph.
        ''',
        style = {
            'textAlign': 'center',
            'color': 'black',
        }),
    dcc.Graph(
       id='gdp_graph',
       figure = {
           'data': [
               go.Scatter(
                   x=gdp_data['Time'],
                   y=gdp_data['Japan'],
                   mode='lines',
                   opacity=0.7,
                   marker={
                       'size':15,
                       'color':'red'
                   },
                   name='Japan'
               ),
               go.Scatter(
                   x=gdp_data['Time'],
                   y=gdp_data['USA'],
                   mode='lines',
                   opacity=0.7,
                   marker={
                       'size':15,
                       'color':'blue'
                   },
                   name='USA'
               ),
               go.Scatter(
                   x=gdp_data['Time'],
                   y=gdp_data['China'],
                   mode='lines',
                   opacity=0.7,
                   marker={
                       'size':15,
                       'color':'yellow'
                   },
                   name='China'
               ),
               go.Scatter(
                   x=gdp_data['Time'],
                   y=gdp_data['Netherlands'],
                   mode='lines',
                   opacity=0.7,
                   marker={
                       'size':15,
                       'color':'black'
                   },
                   name='Netherlands'
               )
           ],
           'layout': go.Layout(
               xaxis = {'title': 'Time'},
               yaxis = {'title': 'GDP'},
               width = 1000,
               height = 500
           )
       }
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)