Dashでmyダッシュボードを作ろう ーpytrendsで見るコロナの感染拡大時期ー

TECH in 京都 #3（https://hacarus.connpass.com/event/254480/）の資料です。

Transcript

1. 1 Dashでmyダッシュボードを作ろう ーpytrendsで見るコロナの感染拡大時期ー 奥田 華代 株式会社HACARUS
2. 2 所属：株式会社HACARUS 肩書：データサイエンティスト 実務経験： • 生物系・医療系のデータ分析 • 実験データを管理する社内システムの開発 趣味：カフェ巡り、ホテルステイ、ボルダリング 好きな食べ物：パフェ 自己紹介
3. 3 • 何を作ることにしたか • なぜ作ることにしたか • どのように学習を進めたか ◦ Dash ◦ Pytrends • どのように作り進めたか • 作ってどうだったか ◦ 可視化したデータの考察 ◦ 苦労した点 今日話すこと
4. 4 • Dashやpytrendsのチュートリアル的な話 ◦ インストール手順や起動手順 ◦ コンポーネントの使い方や入出力の方法などの基本技術 ◦ 理由：時間がないため • データ分析の話 ◦ 可視化したデータを使って未来を予測するというような機械学習的な話 ◦ 理由：今回はデータの可視化に焦点を当てておりフォーカスから外れるため 話さないこと
5. 5 • 誰かがDashを使うきっかけになれば ◦ 知っているけど使ったことのない人は多いはず • 他の人がどのようにアプリ開発の学習を進めているのか、どこで苦労したのかを共有して、話の ネタになれば 発表のモチベーション
6. 6 何を作ることにしたか
7. 7 検索トレンドを可視化する ダッシュボード ・Googleトレンドのデータを使用 ・コロナの感染拡大時期との関連を表示
8. 8 なぜ作ることにしたか
9. 9 • 業務で簡単な分析や図表の可視化ができる簡易ツールを作ることになり、以下の条件を満たす ツールを探していた ◦ 学習コストが小さい ◦ 短時間でそれなりのものができる ◦ Pythonライブラリ • StreamlitとDashの2つが候補に挙がり、業務ではより簡便な Streamlitを使うことに 業務で簡易アプリを作るツールを探していた Dashは不要になったけど・・・
10. 10 • 以前から検索キーワードのトレンドを自分で可視化してみたかった 例）プログラミング言語の人気ランキング Dashの使用感を確認しておきたい
11. 11 • https://trends.google.co.jp/trends/?geo=JP • 検索トレンドを表示する • 指定期間に検索キーワードがどれくらい検索さ れたかの推移を可視化する Googleトレンドとは
12. 12 • 検索キーワードのトレンド ◦ 人気度の動向 ◦ 地域別のインタレスト ◦ 関連キーワード ▪ 注目（検索頻度の増加率が大きい） ▪ 人気（検索頻度が高い） • 最近の急上昇ワード • 年ごとの急上昇ワード Googleトレンドの機能
13. 13 • 良かった点 ◦ 本家だけあって使いやすい ◦ 確認したいワードや比較ワードを登録しておける • あるといいなと思った機能 ◦ キーワードを5つ以上比較できる ◦ 人気度の動向で急激な変化を見せている時期に絞って関連キーワードを検索できる Googleトレンドを使ってみて 後者の機能をDashとpytrendsで実装してみよう
14. 14 どのように学習を進めたか
15. 15 • PHPでWebアプリを作ったことがある • RのshinyやVue.js、PythonのKivyでデスクトップアプリを作ったことがある • Pythonはずっと使っている • Dashは名前は知っていたが使ったことはない • pytrendsも使ったことがない 作り始める前の知識・技術レベル つまり、Dashとpytrendsについては何も知らない
16. 16 • https://plotly.com/dash/ • データを可視化するダッシュボードを作 るフレームワーク • インタラクティブに動作するグラフを簡 単に埋め込める • 商用版と無償版がある Dashとは
17. 17 1. 公式チュートリアル a. インストール、起動方法、コンセプト等、基本事項を確認 b. チュートリアルに沿って実際に作って動かしてみる 2. 公式ギャラリー a. どんなものが実装できるのかを知る 3. Qiitaのキーワード検索結果 a. 見出しに目を通しす b. LGTM数や投稿時期も確認しつつ参考になりそうな記事をピックアップしておく 4. 作り進めながら必要なタイミングで各種コンポーネントの APIドキュメント Dashの学習の流れ
18. 18 1. 公式チュートリアル a. インストール、起動方法、コンセプト等、基本事項を確認 b. チュートリアルに沿って実際に作って動かしてみる 2. 公式ギャラリー a. どんなものが実装できるのかを知る 3. Qiitaのキーワード検索結果 a. 見出しに目を通しす b. LGTM数や投稿時期も確認しつつ参考になりそうな記事をピックアップしておく 4. 作り進めながら必要なタイミングで各種コンポーネントの APIドキュメント Dashの学習の流れ 難易度が不明＋自分の興味がどれくらい続く か分からないため、本は買わずにWebのリ ソースだけで進める APIドキュメントに目を通さなくても何ができそう か概ね把握できる。自分では考えつかなかった 見せ方を知れる 便利機能やつまづきポイントをまとめた記事を 先にみておくと、開発効率が格段にアップする
19. 19 • Github • Googleトレンドからデータを取得する非公式 API • Googleトレンドのすべての機能が実装されている • 制約 ◦ 公式APIではないため、頻繁にアクセスできない ▪ スリープを少し長めに取る（10秒程度） ◦ 最大5つのキーワードのデータしか同時取得できない（公式と同じ） • 学習の流れ ◦ 1、2本まとめ記事を読む→Google Colabで使用感の確認→Githubのドキュメント pytrendsとは
20. 20 どのように作り進めたか
21. 21 チュートリアルを試しながら起動 • レイアウト • Callbackの使い方 • インタラクティブなグラフの挿入方法 • なども合わせて確認 from dash import Dash, html, dcc import plotly.express as px import pandas as pd app = Dash(__name__) df = pd.DataFrame(...) fig = px.bar(df, ...) app.layout = html.Div([ html.H1(‘Hello Dash’), ... dcc.Graph( id=’example-graph’ figure=fig ) ]) If __name__ == ‘__main__’: app.run_server(debug=True)
22. 22 • https://dash-bootstrap-components.opensource.faculty.ai/ • Bootstrapスタイルのコンポーネントライブラリ • まだスタイルは本格的に整えないが、見た目のきれいな方が創作意欲が沸くので • 色んなテーマがあるので気分に合わせて dash_bootstrap_componentsを導入 import dash_bootstrap_components as dbc app = Dash(__name__, external_stylesheets=[dbc.themes.VAPOR]) … dbc.コンポーネント名([]) これだけで使える！
23. 23 dbc.Container( dbc.Row([ dbc.Card([md=4]), dbc.Card([md=8]) ]), html.Br(), dbc.Row([ dbc.Card([]), dbc.Card([]), dbc.Card([]), dbc.Card([]), ]), html.Br(), dbc.Row([ dbc.Card([]), dbc.Card([]), dbc.Card([]), dbc.Card([]), ]), ) dbc.Cardを使って配置決め
24. 24 dbc. 設定ボタンやグラフなど見た目の要素を追加 dbc.Input dcc.DatePicker Range dbc.Checklist dbc.Button dbc.Switch dcc.Graph（空のグラフを配置）
25. 25 ブラウザからの入力を受け取る dbc.Input( id="keyword", # コンポーネントのID type='text', # テキストフォーム value='virus', # 初期値 ) ……… @app.callback( Input(‘keyword’, ‘value’), ) def get_keyword_trend(kw): # トレンド取得のコードを書く dbc.Input ①入力を受け取るコン ポーネントのIDを指定 ②コンポーネントのどの値を受け取 るかパラメータ名で指定 ③どういう引数名で受 け取るか指定
26. 26 入力を受けて処理した結果をブラウザに表示する dcc.Graph(id='keyword-trend-graph') ……… @app.callback( Output(‘keyword-trend-graph’, ‘figure’), Input(‘keyword’, ‘value’), ) def get_keyword_trend(kw): # トレンド取得のコードを書く # グラフを作成するコードを書く fig = px.line(...) return fig dcc.Graph ①結果を渡したいコン ポーネントのIDを指定 ②コンポーネントのどのパラ メータに渡すか指定 ③渡したい結果を returnする
27. 27 検索トレンド from pytrends.request import TrendReq pytrends = TrendReq( hl=’jp-JP’, # host language tz=-540, # timezone ) keywords = [‘virus’] timeframe = ‘2022-01-01 2022-08-01’ geo = ‘JP’ pytrends.build_payload( keywords, timeframe=timeframe, geo=geo) trend_df = pytrends.interest_over_time() 関連キーワード Googleトレンドのデータを取得する処理を追加 # build_payload()まで検索トレンドと同じ # ただし指定できるキーワードは 1つまで df_dict = pytrends.related_queries() # df_dict[‘top’] -> 人気ワード # df_dict[‘rising’] -> 注目ワード
28. 28 スタイルを 調整して完成
29. 29 可視化したデータを読む
30. 30 • 対象地域：日本、アメリカ、イギリス、南アフリカ • 検索キーワード：virus • 対象期間 ◦ コロナが最初に流行し始めた時期から現在まで： 2019-08-05 - 2022-08-05（3年） ◦ 最近の動向：2021-08-05 - 2022-08-05（1年） • 何をみるか ◦ 対象期間の違いによるトレンドの違い ◦ 地域の違いによるトレンドの違い 対象地域、検索キーワード
31. 31 • http://www.iph.pref.osaka.jp/infection/disease/corona.html • 大阪府の情報になるが、第1波〜第7波の時期を確認 ◦ 第1波：2020-01-29〜2020-06-13 ◦ 第2波：2020-06-14〜2020-10-09 ◦ 第3波：2020-10-10〜2021-02-28 ◦ 第4波：2021-03-01〜2021-06-20 ◦ 第5波：2021-06-21〜2021-12-16 ◦ 第6波：2021-12-17〜2022-06-24 ◦ 第7波：2021-06-25以降 ◦ →検索トレンドのグラフに最初の 1ヶ月に相当する時期をハイライトで可視化 これまでのコロナ感染拡大時期
32. 32 • 第1波の期間の検索頻度は他の時期の比ではない • 短い期間で見ると他国で先に検索頻度が高くなっていることが多い • 検索トレンドをみておけば次に流行りそうなウイルスを早めに知れるかもしれない 読みとったこと
33. 33 作ってみて
34. 34 • Loading中であることを示すSpinnerを最前面に配置する ◦ dash_loading_spinnersを使用（見た目も＃でかわいい） • 間隔の調整 ◦ 追加のCSSを作りたくないので ◦ カード内の調整：html.Div([], style={'marginBottom': '1em'}) ◦ Row間の調整：html.Br() 苦労した点
35. 35 • Dashは簡単 ◦ プログラミング経験のある人なら Dash初心者でも1日〜数日でできそう ◦ Jupyter上でも使えるので通常のデータ分析の中に組み込める • 公式の日本語ドキュメントはないが、アプリ開発をしたことのない人がコンポーネントや callback の概念をさらっと知るのに良さそう ぜひ使ってみてください！ 感想
36. 36 ご静聴ありがとうございました！