【基礎編】集計からダッシュボードの作成まで一本化！PythonとDashによるデータ可視化アプリ開発 〜Dashの概要、環境構築、サンプル実行まで〜

本記事は、2020年10月16日に作成されました。

はじめに

マーケティングリサーチプラットフォームを提供している、株式会社マーケティングアプリケーションズ（MApps）です。

弊社では、キリンビール様から発売中の本麒麟がなぜヒットしているのか、その要因を探るため、アンケートでデータ収集→Pythonで集計→Dashでダッシュボードの作成を行い、データを可視化するWebアプリ開発に挑戦しました。

作ったダッシュボードについての動画をYouTubeで公開しております。ぜひご覧ください。

弊社では、Dashに関した内容を、基礎編、Tips編、実践編の３つに分けてQiitaで投稿していきます。

基礎編（本記事）
Dashの概要、環境構築、サンプルを実行してグラフを可視化する方法を紹介します。

Tips編
バブルチャート、複合グラフ、帯グラフ、レーダーチャートなど様々なグラフの可視化や、グラフをより見やすく、かつわかりやすくするための応用的な手法を紹介します。
記事はこちら

実践編
本麒麟のヒット分析を行うにあたり、Dashを用いてどのようにダッシュボードを作成したか、Tips編の内容を組み合わせた実践的な手法を紹介します。
記事はこちら

読んで良かった、参考になったという方は、ぜひ、LGTMボタンを押してください。

解説動画をYouTube📺で公開中！

この記事は、YouTubeにUPした解説動画と連動しています。
・初心者の方や、Dashを触るのが初めてで、どういう風に作っているのか知りたい！コードの中身を手っ取り早く理解したい！という方は、まず動画をご視聴ください👀

そもそも今回作る「ダッシュボード」とは何か？

Dashによる構築手法を紹介する前に「ダッシュボードとは◯◯である」と皆様と定義を共有しておく必要があります。一つ問いを立ててみましょう。

「Q.ダッシュボードとは何でしょうか？」

この問いに皆様は、何と答えるでしょうか？
「目標達成状況・新規受注状況・売り上げ推移など経営組織全体のKPI進捗サマリー」
「販売している商品の販売実績管理表」
「従業員の仕事のパフォーマンスや満足度をスコア化、勤務の状況も可視化した人事に関したグラフのまとまり」
おそらく、色々な答え方ができると思います。
なぜ違った答え方ができるのかと言うと、ダッシュボードは、色々な立場の人が、色々なデータを可視化し、色々な場面で使っているため、ダッシュボード自体の認識の仕方そのものが千差万別となるのです。

そこで本シリーズでは、ダッシュボードの定義をわかりやすく表した、永田ゆかり著 2020年『データ可視化のデザイン』 SＢクリエイティブから下記の一文を引用し、ダッシュボードとは、

データを見て理解を促進させる視覚的表現

と定義することにしました。
この定義だと、上記に記載した答え全て含まれると思います。
それでは、皆様とダッシュボードの定義を共有したところで、早速Dashの解説に移ります。

Dashとは？

・データ可視化に特化したPythonのWebフレームワークです。
・Flask、Plotly.js、React.jsによって作られています。
・公式サイトでは、「It's particularly suited for anyone who works with data in Python.」とあり、特にPythonでデータを扱う人に向いているとのこと。Pythonで集計・分析したデータを、今度はWebアプリケーションによって可視化するところまで一本でやってみたい！という方には、オススメのフレームワークだと思います。

使用環境

使用している環境は、下記の通りです。
・Mac(Windowsでも可)
・Anaconda　4.8.5
・Python　3.8.3
・dash　1.16.3
・dash-core-components　1.12.1
・dash-html-components　1.1.1

環境構築

各人ごとに環境構築の方法を記載しています。
自分が該当する項目からお読みください。

Anacondaがない方へ ▶︎Anacondaをインストールする
エディタがない方へ ▶︎VisualStudioCode（以下：VSCode）をインストールする
Anacondaとエディタ（VSCode）がある方へ ▶︎Dash用の仮想環境を用意する

※エディタがない方向けにVSCodeを紹介しております。Pythonの開発ができる統合開発環境（PyCharm）、エディタ（Atom,Vim,Sublime Text等)であれば問題ございません。

Anacondaがない方へ ▶︎Anacondaをインストールする

「Anaconda」
下記のサイトに遷移して、メニュー内の「Products」→「Individual Edition」をクリック、
https://www.anaconda.com/

ご自身の環境に合ったインストーラーを選んでください。

ダウンロードしたインストーラーパッケージを起動して、最後の「概要」まで進んでいきます。

エディタがない方へ ▶︎VisualStudioCodeをインストールする

「Visual Studio Code」
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

「今すぐダウンロード」をクリック。

ご自身の環境に合ったインストーラーを選んでください。

zipファイルを開いたら、アプリケーションが入っていますのでそれが起動できればOKです。

Anacondaとエディタがある方へ ▶︎Dash用の仮想環境を用意する

Anacondaでは複数の仮想環境(conda環境)を構築することができますので、Dash用の仮想環境を用意していきます。
仮想環境を用意することは、「Dashで必要なライブラリをインストールした。すると、他に使用しているライブラリと競合してエラーが出てしまった」というトラブルを回避することができます。

Anaconda Navigatorを起動して「Environments」をクリックして、「Create」をクリック。

Nameに「dash」、Pythonは、「3.8」を選択し、「Create」をクリック。

構築が完了しましたら、新しく「dash」という環境が追加されています。

「dash」の環境を起動させます。ターミナルを立ち上げて、下記のコマンドを入力します。

conda activate dash

下記のように新しく構築した環境の名前が表示されます。

(dash) L116:　（ユーザーの名前等が表示されているかと思います）

必要なライブラリをインストールする

実行している現在の環境に、必要なライブラリをcondaコマンドでインストールしていきます。
ライブラリインストール時に、「Proceed ([y]/n)?」と途中に聞かれて「y」と入力しないといけません。
この処理を自動化するために、末尾に「-y」とつけて、インストールしていきます。

conda install -c conda-forge dash -y

conda install -c anaconda pandas -y

conda install -c plotly plotly -y 

簡単なグラフを可視化する

環境は揃いましたので、次は簡単なグラフを可視化してみます。
作成するのは、下記のグラフです。

デスクトップを作業場所にします。
「dash」フォルダを作成し、その下に「sample」フォルダを作成。
下記のコードをコピペして「app.py」のファイルを作成して、保存します。

app.py

# -*- coding: utf-8 -*-

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

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({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

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=True)

「sample」フォルダに「app.py」があることを確認しましょう。

ターミナルを開いて、下記のように進んでいきます。

「dash」の環境を立ち上げる。

conda activate dash

「app.py」があるディレクトリに移動。

cd (略)Desktop/dash/sample

下記のように入力

python app.py

するとターミナル上で下記のように表示されます。

http://127.0.0.1:8050/　
をコピペして、ブラウザのURL入力欄に貼り付けます。

無事に表示されたことが確認できたら、完了です！

Dashの構成とサンプルコードの解説

Dashの構成は、以下の2つです。
「Layout」アプリ内の外観を決める。（例：Divを生成して、その中にH1タグを入れる、グラフを表示させる）
「Callbacks」アプリ内のデータと操作間の連携をさせる。（例：入力した情報に応じてグラフを表示させる）

上記の棒グラフを作成するサンプルコードは、下記のような構成をしております。
大まかには、下記のように３工程で完了できるかと思います。

準備：必要なライブラリをインポートする、データを作成する、データを使ってグラフを作成する
表示：Layout内で必要な装飾をし、データを流し込む
実行：アプリを実行する

今回シリーズを通して、「Callbacks」は使用せず、ただデータを表示するのみ行っております。
「Callbacks」を使用することで、よりデータを表示させる方法の幅を広げることができると思いますので、興味がある方は、ぜひ「Callbacks」も調べてみてください。

その他　エラーが起こったときの対処方法

自分でコードをカスタマイズしていると、下記のようにエラーが起こる場合があります。

その時は、ターミナルを確認します。

するとapp.pyの３０行目のfigがうまく読み込めていないことがわかりました。
「app.py」のソースコードを確認すると、figの行がコメントアウトされていました。

再び、実行できるようにコメントアウトを外して保存します。

再度、実行をして、ブラウザを更新します。

python app.py

再び画面が表示されました。

次回は、より応用的な手法のTips編です。

今回は、Dashで簡単な棒グラフの可視化までを行いました。
次回は、バブルチャート、複合グラフ、帯グラフ、レーダーチャートなど様々なグラフの可視化や、グラフをより見やすく、かつわかりやすくするための応用的な手法を紹介します。

Tips編
記事はこちら