あきらぼ

テック系ブログ

Streamlitで部屋の温度・湿度モニターの可視化ボード作成

こんにちは。

 

今回はStreamlitを使って以前作った部屋の温湿度モニターの可視化ボードを作ってみました。

以前はChart.jsを使ってグラフ化していたのですが、Streamlitを使うと簡単にもっとInteractiveな表示ができそうなので試してみた次第です。

 

前回Chat.jsを使った際の記事はこちら。

 

aki-lab.hatenadiary.com

 

Streamlitとは?

Streamlitとはpythonのwebフレームワークで、データ解析に特化したフレームワークになります。

Pandasなどと相性がよく、データサイエンスやAIのフィールドでよく利用されているようです。

実際、私も仕事で解析のスクリプト組んだとしても結果の共有に悩む場面が多いですが、こういったWEBで表示できると共有先の環境に合わせる必要がなく便利というわけです。

 

streamlit.io

 

実際、使用してみた感じでもWEB上で細かくデータも見ることができるのでとても便利です。

一時解析ぐらいできてしまうぐらいインタラクティブに動かせるのも魅力です。

実際のサンプルサイト

今回使った実際のサンプルサイトはこちらになります。

JSON形式のデータを読み込んで表示しています。

https://aki-r-streamlit-sample-app-gkayym.streamlit.app/

 

まずはLineグラフに関して。

SreamlitのAPIにも線グラフのAPIはありますが、Plotlyと組み合わせられるのでグラフはPlotlyで表示しています。

Plotlyの方がカスタマイズ性が高いです。

実際見てもらうとドラッグ、ズームも簡単でPNGで出力もできます。

 

以前使っていたChart.jsよりもグリグリと動かせるので使い勝手がとても良いです。

 

次にPandasのデータフレーム表示に関して。

データフレームを簡単に表示できるだけでなく、変数名のところをクリックすることで簡単にソートできてしまいます。

これだけで簡単な一時解析できるぐらいの便利さです。

 

こんな形で、データ表示としては強力なGUIを作ることができます。

 

実装コード

今回上記のサンプルを作成したのは以下のコードです。

GUIアプリですが、この程度であれば非同期やコールバックを考えずにそこそこ実装できます。

 

 

公開はサーバーであればstreamlitをpipでインストールして実行するだけ。

今回添付したサンプルはstreamlitの機能でgithub連携で公開していてデプロイも楽ちんです。

 

今回のコードはこちらです。

github.com

 

以上、Streamlitでの可視化ダッシュボード作成でした。