21
Help us understand the problem. What are the problem?

posted at

updated at

Streamlit × Flourish で短期間でアッと言わせる可視化アプリを構築する

まずはデモ

突然ですが、データ分析をしていて、こんな風に感じた事ありませんか??

  • 良い分析結果が出たけど、Jupyter Notebookはコードが散在しているので、ビジネス層に共有しづらい。
  • インタラクティブに操作して、ユーザーの見たい内容によって、表示するデータの中身を変えたい
  • 分析結果を全世界にWebアプリで公開したいけど、学習コストが高くて、そんな暇はない! てかHTML、CSS、JS わからん!
  • でも、せっかくなら、スタイリッシュでカッコいい可視化アプリにしたい!

そんな方に必見!いまや便利なツールが世の中に溢れていて、
組み合わせるだけですぐに実現できちゃうんですね~

私自身、学習コスト含めて、わずか1日半で構築できたアプリを紹介します。
自慢でもなんでもなく、知ってるか知らないかで本当に簡単に出来ちゃうので、
騙されたと思って試して是非試してみて下さい。

アプリの内容は、過去1年間でフリマで取引されたスマホのデータを分析・可視化したものです。
※もちろんデータはコツコツ集めたものです。ココが実は一番大変

Animation.gif

どうやって作ったのか

PythonのフレームワークであるStreamlitを使いました。
HTMLやCSS、JSの知識がなくても、データ分析者が普段使い慣れた、Pythonの基礎文法、Pandas、Numpyを使っていつも通り書けば
良い感じにWebアプリの画面にしてくれるという優れものです。

image.png

インストール方法やコードの紹介はこちらの記事が非常に参考になりました。

↑で紹介したアプリもコード行数としては150行満たないレベルなのでほんとにすぐできちゃいます。
サーバーも準備することなく、Streamlit側でGitHubと連携して、すぐにデプロイが出来てしまうのですごく便利です。

オシャレな動きのあるグラフを取り入れる

可視化グラフの配色とかタイトルとか結構人によってセンス分かれますよね。
私もその辺が疎い方で、matplotlibで可視化するときも、こだわって時間かけすぎてしまうんですが。。。

そんな時にデータだけ準備して、後は良い感じに仕上げてくれるサービスがありました。
Flourish というサービスで、無料で使えるし、
CSVでデータを準備すればGUI操作で簡単にオシャレなグラフが作成できちゃいます。

image.png

image.png

しかも優れモノなのが、右上の「Export & Publish」からHTMLのコードを自動生成してくれるので、
コピペするだけでアプリに自動でグラフを描画してくれるんですね。
Streamlit 自体にHTMLを差し込める関数が用意されているので、実はこれを組み合わせてアプリを作成してます。

image.png

分析の結果を動きのあるグラフでPower Point資料などにも組み入れることできるので、聴衆を引き付けるプレゼンをしたい方などは
さっとCSVデータだけフォーマットに合うように加工してしまえば、周りをアッと言わせること間違いなしです!

他にもこんな面白いグラフがたくさん用意されているので、是非気になる方はつかってみてください

Animation2.gif

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
21
Help us understand the problem. What are the problem?