Pythonと本と子供と雑談と

いつからはじめても遅くない

Dashを使ってプレゼン資料を作る

f:id:mazarimono:20190110142448j:plain

発表資料を作ったのですが、勉強会がキャンセルになったので、ブログにでも書くかと思っていたら、Pythonのアドベントカレンダーの8日目がまだ空いていることに気づいたので、今更アドベントカレンダー用の記事にします。多分怒られないよね。

これまで何度もdashについて記事にしてきましたが、最近、プレゼン資料をこれで作ったら面白いんじゃないの??って思ったので作ってみました。

dash.plot.ly

www.mazarimono.net

これまでのプレゼン資料って紙芝居って揶揄されるように、動きがなく退屈で気づいたら寝てて、その次気付いたら終わっていたというのが多くあるパターンだったと思います。

でもDashを使って資料を使ったら会議でも色んな見方がすぐにできて、意見が活発に出たりしてよいんでないかなー。ってことで作ってみました。



Dashに関して

DashはFlask、React、Plotlyが使われているウェブアプリケーションを作るライブラリです。これを使うと可視化したものを簡単にウェブにあげられます。

今回作ったものもherokuにあげています。herokuにあげるのは5行ほどでできるし良いです。今のところ、無料プランなので立ち上がりに時間がかかりますが、はやくVPSを解約して有料プランにすることを考えています(1か月前も書いていましたが・・・)。

ちなみに今回の作品はこちらになります

こちらを見ながら記事を読んでいただけるとより分かりやすいと思います。ヘロクはまだ無料プランなので、立ち上げに時間がかかる可能性がありますが、しばらく待っていただけると立ち上がります。

内容の説明

宣伝部分

今回の資料に関してはタブで切り替えられるようにして、プレゼン資料風にしています。別に、一枚で下にどんどんスクロールしていっても良いですが、なんかそっちの方がぽいかなと思ってそうしました。

1枚目はタイトル、2枚目は自己紹介、3枚目は1月13日に行われるIOSTワークショップの告知となっています。

IOSTワークショップ

ちなみにIOSTワークショップは2月後半にメインネットが立ち上げられるIOSTのCO-Founder、CTOテリーが京都に来てくれて、そのブロックチェーンを使うための環境設定、そしてJavaScriptでスマートコントラクトを書くということを教えてもらえる、中々贅沢なイベントです。JavaScriptで書けるってのもお手軽なので、暇な人は下のコンパスから参加してもらえると嬉しいです!最初の1時間でブロックチェーンがどんなもんかってのの解説もあるので、ブロックチェーン知らんけどなんか作ったら面白いかもと思っている人も参加していただけるイベントだと思います。 我々はBlockchain Kyotoとして参加します。

blockchain-kyoto.connpass.com

はんなりPythonの会 Dash HandsOn Returns

4枚目ははんなりPythonの会の宣伝になっています。はんなりPythonの会は京都のPythonのコミュニティーで毎月第三金曜日に勉強会をやっています。この記事にもあるように、今年からハンズオン→発表会→質問会という流れで展開していくと思います。1月は11月にやったDashのハンズオンリターンズということで、前回の後分かったことだったり、初めての人に向けてどうやったらよいかなどをやっていきますので、この記事で関心を持たれた人はぜひ参加いただければと思います。

hannari-python.connpass.com

どうしてこんな宣伝があるかって?それは勉強会での発表資料だからです。
これで宣伝は終わり、以降でDashを活用した中身を見ます。

Dash活用部分

Tab Dash-1

f:id:mazarimono:20190110143408g:plain タブDash-1では簡単なチャートを2つ載せています(データは適当な数値です)。

上は棒グラフを出しています。マウスをホバーすると、数値が出ます。そしてレジェンドをクリックすると、そのクリックした地域のグラフが消えます。例えば、KyotoのレジェンドをクリックいただくとKyotoのデータを消すことができます。根性悪い京都人なんて嫌いだって人は何回も消して楽しめます。

下は線グラフを出しています。これまでだとこれくらいのデータがある場合、線グラフにしたら分かりにくいため、いくつか選択して表示するというようなことがなされていたと思いますが、Dashを使ったプレゼン資料だと全部出して、レジェンドをクリックして消して減らして見やすくするなんてことが可能です。また、これとこれを見たいなんてこともすぐにできます。このグラフでmieとwakayamaが見たい場合はそれ以外をクリックして消してしまえばすぐに見られ、再度ほかの地域を表示させたい場合は再びクリックすればすぐに見られます。

これだけでもかなり口を挟む人が出てきそうです。しかし、すぐにできます。

これまでだと・・・
偉い人が言う=>急いでPCで作り直そうとする=>焦っているからミスるorすぐにできない=>怒られる
みたいなループが発生していたかもしれないところがすっといけます。またデータに関して色々と質問が来て、会社としてそのデータに関して意見が深まる可能性も高くなるでしょう。

Tab Dash-2

f:id:mazarimono:20190110143531g:plain もう少し複雑なデータの見方もできます。

Dash-2のタブでは、平均余命と一人当たりのGDPの関係と、その時代ごとの変遷が見られるグラフが作られています。このグラフはDashのドキュメントにあるのでそちらを参照ください(下のリンク先の二つ目)。

dash.plot.ly

これは下のスライダーで年代の切り替えを行えます(herokuでスライダーが動かない・・Gyazoのgifでローカルでは動いているのが分かっていただけるかと・・)。そして、先ほどまでと同じようにレジェンドで点を消したりもできたりするので、色々な傾向がみられるようになります。

これだけでは十分でないって方のために、次のグラフも用意しています。

Tab Dash-3

f:id:mazarimono:20190110143641g:plain これだと文句をいう人は中々いないでしょう。まず、上のドロップダウンで出したい要素を選択できます。

そして、その値が反映されたグラフが左側に表示されます。そしてそのグラフは下のスライダーで年代を変えることができます(こちらもheroku上では動いてませんね・・)。

これの面白いのは、左のグラフでマウスホバーしたポイントのヒストリカルデータが、右側にプロットされるということです。

これにより、気になったポイントマウスホバーするだけで、その過去、未来の値がどうなっているかなんてことがチェックすることができます。

ちなみにこれもドキュメントにあったもので、コードは下のリンク先にあります(またも二つ目)。

dash.plot.ly

まとめ

ここでみたようにDashを使うとプレゼン資料をかなりインタラクティブに作ることができます。ちなみにコードは400行くらいで、ソースはgithubでみられます

多くの場合においてデータはいろんな人が見て意見を出し合った方が一人で考えるよりも良い見方ができますし、このようにインタラクティブにすることによって思いもよらなかったことが発見できる可能性も高まります。

こういうと、多分「資料作るの面倒だよね」って意見が出てくると思うのですが、データから色々なことを発見するのは手をかけないとできないよーってことが言えます。なので、それを面倒がっているんだったら「データなんて見ないで、営業かけてこんかい!!!」なノリでやった方が良いと思います。

こんな感じでDashをプレゼン資料に使うことで、そのプレゼンに多くの人の意見が加わり、その価値が始める前よりも上がるということが行えると思います。それは企業価値にも大いにプラスです!コマンドを5行書けばherokuにもあげられるので、共有も簡単です。まぁ、終わってから見る人は少ないかもしれませんが、その時に、色々と自分でデータを触る人も増えるのではないでしょうか?

最後に、今年1回目のはんなりPythonの会では、今回見てみたDashのハンズオンを行います。ご関心をお持ちの方はコンパスからお申し込みください。

hannari-python.connpass.com