DashHandsOn 01

はんなりPython 26

#dashhandson

自己紹介

小川英幸 hideyan.icon

はんなりPython オーガナイザの1人

元金融（トレード・分析・雑用）

現在　自分の会社　ぼんやりしている・・・仕事しよう！

今年やりたいこと / データ分析からアプリ作りへ

本日の資料　https://github.com/hannari-python/dash_hands_on

グーグルコラボ　https://colab.research.google.com/drive/1l9dxea50_AxyEnQVZSM4hVHsNsTDN2gl

本日やること

解説

Dashとは

レイアウト

コンポーネント

スタイル設定

グラフ作成（Plotly.py）ここでJupyterを使おうと思っています。

レイアウトの組み立て

コールバック

作成　

各自好きなものを作ってみてください

できればデータを何か使ったものが良いかなぁ？

最後で全員に披露しましょう！

でかいデータはpickleを使ってみよう。

Dashとは

Plotly社が作るウェブフレームワーク。Flask / React / Plotly公式 : https://plot.ly/　ドキュメント: https://dash.plot.ly/

Plotly / もともとグラフツールのみを出していた Plotly.js / Plotly.py など : https://plot.ly/graphing-libraries/

BIツールっぽいものが作れるDashが2017年に出される　https://medium.com/plotly/introducing-dash-5ecf7191b503

昨年秋ごろVer1.0.0が出される　https://dash.plot.ly/dash-1-0-migration

アプリケーションサンプル　https://dash-gallery.plotly.host/Portal/

特徴

インタラクティブなWebアプリケーションが短い時間で作れる

Plotlyのグラフが使えるので、データの可視化が簡単に作れる

Pythonのみで作れる

知っといた方が良い

HTML / CSS / Pandas

ハンズオン準備

環境設定

環境設定ガイド　https://www.python.jp/install/install.html

Windows

code:powershell

$ py -m venv <好きなPath>

$ 好きなPath/Scripts/activate.ps1

$ pip install --upgrade pip

$ pip install dash dash_bio dash_canvas dash_cytoscape dash_daq pandas plotly

本日は基本エディタを使います。グラフの作成はグーグルコラボ

Docker (WSL/Mac/Linux)

code:console

$ git clone https://github.com/hannari-python/dash_hands_on.git

$ cd dash_hands_on

-- Dockerのbuild

$ docker build -t dash-handson .

-- Docker に入る

$ docker run --rm -it -v $(pwd):/work -P -p 8050:8050 dash-handson bash

-- はいった

root@a0a8554e2eb6:/work# python first.py

-- 実行するとサーバーが立ち上がるので http://127.0.0.1:8050/ にアクセス

-- CtrlキーとCキーを同時に押すと止まる。

-- 好きにファイルを実行してください。

-- Dashを実行したままソースコードの編集ができます。

root@a0a8554e2eb6:/work# python h1_component.py

Getting Started

まずはアプリケーションを動かしてみよう（first.py）

https://github.com/hannari-python/dash_hands_on/blob/master/first.py

code:commmand

$ python first.py

http://127.0.0.1:8050/ へアクセス

見た目を作るレイアウトのみ

インタラクティブ版(first_callback.py)。ドロップダウンを使って表示する国を選択できる。

アプリケーションは2つの部分からなる

レイアウト / 見た目

コンポーネントから作る。色々と提供されている。https://dash.plot.ly/

コールバック / インタラクティブさ

レイアウト作成

見た目つくり

コンポーネントを組み合わせて作成する

コンポーネントを提供するパッケージが使える（自作もできる）

dash_html_components / HTMLの作成 https://dash.plot.ly/dash-html-components

dash_core_components / 動くツールいろいろ https://dash.plot.ly/dash-core-components

dash_table / データテーブル https://dash.plot.ly/datatable

dash_cytoscape / ネットワーク図 https://dash.plot.ly/cytoscape

dash_DAQ / データの計測など https://dash.plot.ly/dash-daq

dash_canvas / 画像処理 https://dash.plot.ly/canvas

dash_bio / バイオインフォマティクス用 https://dash.plot.ly/dash-bio

コンポーネントは属性値に値を与え作成します。

H1 クラス（html パッケージ）　https://dash.plot.ly/dash-html-components/h1　

RadioItem クラス（dccパッケージ）　https://dash.plot.ly/dash-core-components/radioitems

Thermometer クラス（daq パッケージ）　https://dash.plot.ly/dash-daq/thermometer　

コンポーネントはたくさんの属性を持ちます

help(クラス名)で参照できます。

style 属性 : 名前の通り、スタイルを設定するための属性。辞書でスタイルを設定する。

辞書のキーはCSSのプロパティ名、辞書の値はCSSのプロパティ値

案外スタイル設定重要ですねぇ～でも難しい・・・ CSS: https://developer.mozilla.org/ja/docs/Web/CSS

文字色を変えたり

コンポーネントを横に並べるのもCSSで行います。

グラフ作成（グーグルコラボをってみましょう）

グラフ作成はPlotly.pyを用います。ドキュメントは辞書で作っていますが・・・

https://plot.ly/graphing-libraries/

plotly.express / plotlyのラッパ。グラフ作成が簡単。

plotly.graph_objects / 詳細の設定を頑張りたいときは使うと良い。 / 今日は解説しません。

plotly.data.* / データセット

レイアウト作成

コンポーネントを組み合わせて、何か作ってみましょう。データは自分好みがあればそれを。なければplotly.dataなど（15分）

コールバック

コールバックのサンプルコードを作って、もう一度流れを見直す。

コールバックがDashの魅力

ツールを組み合わせ、データの深堀が可能に！！

コールバックはapp.callbackでデコレートしたコールバック関数

first_callback.pyに戻って確認します。

コールバックとは

あるコンポーネントの属性値の変化をきっかけに、何らかのコンポーネントの属性値を変更し、動きを作る

いろいろなコンポーネントや属性を用いて動きが作れます。

コンポーネントだとdccに使えるものが多い。

クリック回数を数えるn_clicks属性とか。

複数ページの切り替えなんかもコールバックで行います。

今日はfirst_callback.pyとcallback_graph.py 1-3を使ってちょっと解説します。