概要

StreamlitとPlotlyというライブラリを使って時系列データの可視化ツールを作成した
Plotlyでインタラクティブな操作ができるグラフを描画
- Pythonの有名なグラフ描画ライブラリであるmatplotlibやSeabornに比べ、グラフ上でドラッグすることでズーム操作等ができる！
- 使用言語はPythonのみ。フロントの知識（HTML, CSS, JavaScript, etc...）は不要！
この記事で紹介しないこと
- Streamlit, Plotlyの詳細な使い方
- Python動作環境構築の手順

はじめに

私の部署では、船のエンジンに関する業務を行っています
船舶のエンジンのセンサから収集した計測データを使って機械学習モデルを作成し、実際の船舶運航時にエンジンに異常がないかをチェックするシステムを運用しているのですが、モデル作成のフェーズにてあるツールを作ってほしいという要望が到来しました
作成するアプリケーションの概要は以下の通りです

計測データ（時系列データ）とスコア（機械学習モデルによって算出される、異常の度合いを示す値）を並べて表示したい
センサ数が多い（最大100個くらい）ので、すべてのセンサをグラフとして表示せず
選択したセンサのみグラフとして表示したい
オンライン環境には接続せず、ローカルにあるデータを参照する

できたもの

こんな感じです

処理の概要

今回のアプリケーションではグラフの元データはcsvファイルで用意されています

ディレクトリ構成はこんな感じ（自動生成するものなので規則性があります）

アプリ右上1段目の部分でユーザにエンジン等を選択してもらい、この部分の情報によってプロット元となるcsvファイルへのパスが確定します

1段目のUI

その後、選択されたセンサに応じて元データを絞り込み、「Plot Graph」クリック時に作成されたDataFrameの内容で描画される...という流れです

ライブラリの概要

今回のアプリケーションでメインとなる使用モジュールのStreamlitとPlotlyについてですが

Stremalit -> UI担当
Plotly -> グラフ担当
といった役割です

Streamlit

フロントの知識を使わずともいい感じのWebアプリケーションを作れるPythonライブラリです
似た役割のPythonライブラリとしてDashがあり、こちらはStreamlit以上にPlotlyとの連携を前提としているような気がします

それぞれに利点があるのですが、なんとなく見た目が好みだったので今回はStreamlitを選択しました

Streamlitでは、サイドバーそのものやチェックボックス、プルダウンメニューやボタンまで
色々な入力UIが用意されており、細かいレイアウト等を指定せずともいい感じの見た目に仕上がります
どんなものが用意されているかは公式リファレンスから確認できます

 https://docs.streamlit.io/library/api-reference/widgets

Plotly

Pythonのグラフ描画ライブラリです
Pythonでグラフといえばmatplotlibですが、こちらと比較して自分で描画されたグラフを操作することができます

データ全体の傾向も見たい...けど注目すべき箇所があればその部分に注視したいという場合に適していると思います

似た役割のライブラリにBokehがあります
こちらは使っていないので詳しいことはわかりませんが、やりたいことに適しているか+見た目等の観点から今回はPlotlyを選択しました

おわりに

使用言語Pythonのみで時系列データ可視化のアプリケーションを作りました
こういうのが作れるよ～という紹介として参考にしていただければ幸いです

リンク

Streamlit公式ドキュメント
 Plotly公式リファレンス(Python)