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

はじめに
この記事のゴール
環境構築方法
例１：コロナウイルス感染者数
例２：回復者数を線グラフで追加
まとめ

はじめに

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

【Python】Plotly と Jupyter Labでインタラクティブな散布図をさらにかっこよく表現してみた

前回、Plotly と Jupyter Labでインタラクティブな散布図の作成方法を解説しました。Plotly と Jupyter Labでインタラクティブな散布図をさらにかっこよく表現してみます。

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

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

【Python】conda install dash / pip install dashインストール方法

今回は、dashのインストール方法について解説します。

この記事のゴール

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

環境構築方法

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

Python Anacondaとは？｜インストール〜Jupyter　Notebookの立ち上げ

はじめにPython の環境構築を楽にしたくないですか？Python Anacondaをインストールすることで、Pythonの環境構築がとても楽になります。よって、今回はPython Anacondaについて解説し、導入手順までを解説します...

例１：コロナウイルス感染者数

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

東京
神奈川
大阪

コード

# -*- 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”

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

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

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

例２：回復者数を線グラフで追加

次に、棒グラフと線グラフを重ねて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)

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