本記事は、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」のファイルを作成して、保存します。
# -*- 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編
記事はこちら