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

はじめに

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

サーベロイドチャンネル

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

そして、そのDashに関する内容を、基礎編(本記事）、Tips編、実践編の３つの記事に分けて投稿し、そのノウハウを全て無料で公開しています。

今回の基礎編では、Dashの概要・環境構築・サンプルを実行して、グラフを可視化する方法をご紹介します。なお、YouTubeでは授業形式の解説動画を公開中なので、本記事と合わせてご視聴頂けたら嬉しいです。

↓解説動画はこちら！

Tips編

バブルチャート・複合グラフ・帯グラフ・レーダーチャートなど、様々なグラフの可視化や、グラフをより見やすく、分かりやすくするための応用的な手法をご紹介します。

実践編

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

そもそも、よく聞く「ダッシュボード」とは？

Dashによる構築手法をご紹介する前に「ダッシュボードとは◯◯である」というダッシュボードの定義について、皆さんと共有したいと思います。１つ問いを立ててみましょう。

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

この問いに対して、皆さんは何と答えますか？

・「目標達成状況・新規受注状況・売り上げ推移など、経営組織全体のKPI　　　進捗サマリー」
・「販売している商品の販売実績管理表」
・「従業員の仕事のパフォーマンスや満足度をスコア化し、勤務の状況も可視化した、人事に関するグラフのまとまり」

おそらく、様々な答え方ができると思います。
ダッシュボードは、【様々な立場の人】が【様々データ】を可視化し【様々な場面】で使っているため、ダッシュボード自体の認識の仕方そのものが千差万別になるのです。

人により様々な認識があると思いますが、本記事ではダッシュボードの定義を分かりやすく表した本、『データ可視化のデザイン』（永田ゆかり著 /SBクリエイティブ)から下記の一文を引用し、ダッシュボードとは、

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

と定義することにします。この様な定義にすることにより、先ほど記載した様々な回答例の内容が全て含まれることになると思います。

それでは、ダッシュボードの定義が定まったところで、いよいよ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の30行目のfigがうまく読み込めていないことが分かりました。「app.py」のソースコードを確認すると、figの行がコメントアウトされています。

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

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

python app.py

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

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

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

Tips編の記事はこちらからご覧頂けます。

この他にもYouTubeで動画公開中

MAppsチャンネルでは、マーケティングリサーチ関する様々な動画を公開中です。こちらも併せてご覧ください。

（画像クリックでご視聴頂けます。）

テック系シリーズ

統計シリーズ/多変量解析

対談シリーズ

明日話せるマーケティング小ネタシリーズ