【Python】データ可視化-株価を時系列に表示するCoolなグラフを作成【Dash】その１

Pythonのデータ可視化ツールは「matplotlib」が有名ですが、もう少し格好良く表示させたいと思った事ありませんか？

この記事では、Python製の可視化ツールであるDashを使用して、Webアプリを作成します。

完成品(株価を時系列に表示するアプリ)

株価を時系列に表示するダッシュボードを作成します
株式シンボルと期間を選択するとグラフが表示されます
株式シンボルをクリックする事で非表示・表示を切り替えられます

Dashとは？

Dashは、Python製のWebアプリケーションのフレームワークであり、Flask, Plotly, React.jsをベースに開発されています。

可視化ツールのPlotlyをベースとした描画を行うことで、お手軽にPythonでグラフを表示するWebアプリを作成できます。

Dashならダッシュボード作成も簡単

公式サイトにSales ForceのAPIを使用してダッシュボードを作成した例があります。

GitHubにソースコードが置いてありますが、数百行程度のプログラムで、この様な美しいダッシュボードを作成する事が出来ます。

1：Dashのインストール

まずは、Dashをインストールします。

pip install dash

公式サイト

2：必要なモジュールをインポートし、簡易グラフを作成

次に、必要なモジュールをインポートし、簡易的なグラフをDashで作成します。

以下のコードを実行して、Jupyter Notebookで実行してみましょう。

# 必要なモジュールのインポート
import dash
import dash_core_components as dcc
import dash_html_components as html

# Dashアプリケーションを作成
app = dash.Dash()

# ヘッダー、ボックス、グラフを含むページを作成
app.layout = html.Div([
    html.H1('Stock Ticker Dashboard'),
    html.H3('Enter a stock symbol:'),
    dcc.Input(
  id ='my_ticker_symbol' 
        value='GAP' # 初期値を設定
    ),
    dcc.Graph(id='my_graph',
        figure={
            'data': [
                {'x': [1,2], 'y': [3,1]}
            ]
        }
    )
])

# サーバーを起動
if __name__ == '__main__':
    app.run_server()

3:実行結果

実行結果（Jupyter Notebook）

「Jupyter Notebook」で正しくサーバーが起動されると、以下の様な表示が出ると思います。

もし、Flaskがインストールされていないといったエラーが出る場合は、pip installでダウンロードして下さい。

実行結果（ブラウザー）

ローカルサーバーのアドレスをブラウザーで開き、以下の様なグラフが表示されれば、成功です。

4: 解説

プログラムについて、簡単に解説しておきます。

必要なモジュールのインポート

# 必要なモジュールのインポート
import dash
import dash_core_components as dcc
import dash_html_components as html

まずは、必要なモジュールをインポートしています。

Dashは主に以下の２つのコンポーネントから構成されており、この２つを押させておけばOKです。

dash_core_components : グラフやボタン、ドロップダウンなどのUIを提供
dash_html_components :HTMLのDivタグやH1タグなどを提供

Dashアプリケーションを作成

# Dashアプリケーションを作成
app = dash.Dash()

# ヘッダー、ボックス、グラフを含むページを作成
app.layout = html.Div([
    html.H1('Stock Ticker Dashboard'),
    html.H3('Enter a stock symbol:'),
    dcc.Input(
  id ='my_ticker_symbol' 
        value='GAP' # 初期値を設定
    ),
    dcc.Graph(id='my_graph',
        figure={
            'data': [
                {'x': [1,2], 'y': [3,1]}
            ]
        }
    )
])

次に、Dashアプリケーションをapp名で作成し、レイアウトを作成しています。

まず初めにhtml.Divを定義し、その中にh1とh3のhtmlタグを作成しています。

また、dcc.Graphの部分でグラフを作成します。指定の仕方は、Plotlyでの書き方に従い、データを辞書型で渡す必要があります。

Dashアプリケーションの起動

# サーバーを起動
if __name__ == '__main__':
    app.run_server()

最後に、Dashアプリケーションを起動します。

グラフが表示されたら、次はコールバックを導入していきます。

【Python】データ可視化-コールバック導入【Dash】その2