Python

【Python】Dashによるグラフをweb上で表示する方法|コロナウイルス感染者数を可視化

Python

はじめに

Dashとは、データ可視化をWebアプリケーション上で実現するためのライブラリです。具体的には、Flask、React、Plotlyが組み合わされて作られています。Plotlyの特徴として、インタラクティブなグラフが実現可能です。

今回はこのDashの基本的なレイアウトについて、コロナウイルスの感染者数を例に解説したいと思います。例えば、簡単なグラフのプロットや散布図、棒グラフの出力方法などです。

Dashのインストール方法についてわからない方はこちらの記事を参考にしてみてください。

この記事のゴール

  • こんなグラフをWebブラウザ上で表示することが可能になります。

環境構築方法

環境構築は、Anacondaをインストールし、同梱されているJupyter Labを用います。Anacondaのインストール方法についてはこちらの記事参考にしてみてください。

例1:コロナウイルス感染者数

2021年2月9日時点での以下3地域の感染者数をプロットしてみましょう。

  • 東京
  • 神奈川
  • 大阪
google検索結果

コード

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

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

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

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "City": ["東京", "神奈川", "大阪"],
    "Number of infected people": [104189, 42454, 45196]})

fig = px.bar(df, x="City", y="Number of infected people")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=False,host = '127.0.0.1',port=8012)

pandasのDataFrameにデータを格納しています。

  • px.barで棒グラフを出力
  • 第一引数:データ 例:df
  • 第二引数: X軸のデータ 例:x=”City”,
  • 第三引数:Y軸のデータ 例:y=”Number of infected people”

各軸のデータは第一引数で指定した、データフレームにて指定することが可能です。
第二、三引数で、それぞれの軸に当てはめます。

コードの実行結果は、以下です。

こんな感じのグラフがグーグルのクローム(ウェブブラウザ)で立ち上げることができました。

例2:回復者数を線グラフで追加

次に、棒グラフと線グラフを重ねてWebブラウザで表示してみましょう。

今回は、2021年2月9日時点での感染者数と回復者数を用います。

その方法は以下です。

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import plotly.graph_objects as go
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
df = pd.DataFrame({
    "City": ["東京", "神奈川", "大阪"],
    "感染者数": [104189, 42454, 45196],
    "回復者数": [95648, 39748, 40824]})
scat = go.Scatter(x = df["City"],y = df["回復者数"],name="回復者数")
bar = go.Bar(x = df["City"],y = df["感染者数"],name="感染者数")
fig = go.Figure(data = [bar,scat])

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=False,host = '127.0.0.1',port=8012)

以下三つのモジュールを使うことで複数のグラフを合わせて可視化することができます。

  • import plotly.graph_objects as goでライブラリをインポート
  • scat = go.Scatter
  • bar = go.Bar
  • fig = go.Figure

出力結果は、以下です。

まとめ

今回は、Dashによるグラフをweb上で表示する方法についてコロナウイルスの感染者数を例に解説しました。

pythonをより深く学んでみたいという方は、こちらの記事も参考にしてみてください。

今回の記事は、以上です。

最後までお読みいただきありがとうございました。

コメント

タイトルとURLをコピーしました