Python Dashで作るインタラクティブなWebサイト

Transcript

1. Dashで作るインタラクティブな 可視化Webサイト 2019.03.16 Hiroki Abe Shingen.py #3 LT
2. Dashとは Python製Webフレームワーク https://dash.plot.ly/ (サーバーにFlask,フロントエンドにPlotly.js, React.jsが使われている) インタラクティブなデータ可視化Webサイトを簡単に構築できる。 ダッシュボードの作成に最適。 - 豊富なUI (グラフ,ボタン,スライダー,ドロップダウン,テーブル,etc) - HTML, JavaScriptのコーディングが不要, CSSによる柔軟なカスタマイズ - オープンソース (MIT license)
3. インストール • インストール https://dash.plot.ly/installation pip install dash==0.39.0 # The core dash backend pip install dash-html-components==0.14.0 # HTML components pip install dash-core-components==0.44.0 # Supercharged components pip install dash-table==3.6.0 # Interactive DataTable component (new!) pip install dash-daq==0.1.0 # DAQ components (newly open-sourced!) サンプルコードの実行にはPandas, NumPyが必要 • 実行 python [script_name].py (公開時は、Apacheなどのサーバー上で動かす) • チュートリアル https://dash.plot.ly/
4. グラフ作成は4Step 1. データの用意 x,y軸データを用意する。 PandaのデータフレームやNumPyの配列を指定可能 2. グラフ用データを作る 1.で作ったデータをグラフオブジェクトにセットする (折れ線、棒、箱ひげ図、円など) 3. レイアウト(外観)を作る タイトル、大きさ、軸、レジェンドの設定を指定する。 4.データとレイアウトをまとめてグラフを作成する。
5. Dashで可視化してみる1 気象庁が提供する気象データ(CSV)を可視化してみた https://www.data.jma.go.jp/gmd/risk/obsdl/ (そのままだとPandasで読めないのでCSVをちょっと改変) dash_sample3.py dash_sample4.py dash_sample5.py
6. Dashで可視化してみる2 FlightStaus APIで取得したフライト/航空情報を可視化 https://developer.flightstats.com/ XMLやJSON形式で取得可能。お試しアカウントで20000回までアクセス可能 Geoオブジェクトをつかった地図へのプロット airline_from_nrt_airport.py airports_jp.py
7. まとめ • Dashをつかって簡単にインタラクティブな可視化Webサイトの作成が可能 • ダッシュボードや成果物の共有に最適 •発表で使用したソースコード https://www.dropbox.com/s/u37e7z1qbuccw0x/dash_source_code.zip?dl=0 ・データ入手元 気象庁 : https://www.data.jma.go.jp/gmd/risk/obsdl/ Flight Status: https://developer.flightstats.com/ ・データ活用のコンテスト (第3回 東京公共交通オープンデータチャレンジ ) https://tokyochallenge.odpt.org/