Dash と Plotly を使用したライブ グラフ
Python は動的型付けの汎用プログラミング言語で、機械学習、Web 開発、アプリ開発、ゲーム開発、データ サイエンスなど、さまざまなコンピューター サイエンス分野で使用されています。Python を構築している熱心なソフトウェア エンジニアと開発者の巨大なコミュニティによって支えられています。 さまざまな API とライブラリを作成します。
そのようなライブラリの 1つが Dash です。 Dash は、Flask、Plotly、および ReactJS で構築されたフレームワークです。
Dash は、Python プログラミング言語でインタラクティブなダッシュボードを作成するために使用されます。
ライブ グラフまたはリアルタイム グラフは、短期間に非常に頻繁に変化するタイプのグラフです。 このようなグラフを統合するアプリケーションは、ページを時々更新 (リロード) する余裕しかありません。 膨大な量のデータを繰り返しロードすることは、サーバーとクライアント マシンにとってコストと負担が大きすぎるため、一部の新しいデータが受信されます。
さらに、アプリケーションが遅くなり、操作が難しくなります。 株価チャートは、そのようなグラフの最良の例です。
このような状況では、アプリケーションの状態を微調整せずに変更されたデータを更新する手法、つまりホット ロードが使用されます。 ホット ロードはライブ リロードとは異なることに注意してください。ライブ リロードとは、データが変更されたときにアプリケーション全体を更新 (リロード) することを意味します。
この記事では、簡単な例を使用して、Dash を使用してライブ グラフを作成する方法を学習します。
Dash と Plotly を使用したライブ グラフ
開発プロセスと理解を容易にするために、手順全体をより単純なビットに分割します。
依存関係のインストール
まず、dash と plotly という 2つの依存関係をインストールする必要があります。 次の pip コマンドを使用してインストールします。
先の手順に進む前に、仮想環境を作成することを強くお勧めします。
pip install dash
pip install plotly
輸入品
次に、新しいファイル main.py を作成し、前に説明したすべてをそのファイルに追加します。 この単純なアプリケーションを作成するために必要なファイルは 1つだけです。
dash、random (ランダムな値を生成するため)、plotly、plotly.graph_objs をグラフ機能に、dash_core_components をグラフに、dash_html_components を HTML コンポーネントに、そして Input と Output コールバック用。
import dash
import random
import plotly
import plotly.graph_objs as go # graph features
import dash_core_components as dcc # graphs
import dash_html_components as html # html components
from dash.dependencies import Output, Input # callbacks
アプリケーションとデータの初期化
グラフにプロットされる x および y 座標を格納するために、Dash アプリケーションと 2つの deque データ構造を初期化します。 同じものについては、次の Python コードを参照してください。
app = dash.Dash(__name__)
xData = [1]
yData = [1]
ダッシュボードのレイアウト
ダッシュボードのレイアウトを作成するには、Dash の HTML コンポーネントを使用します。
app.layout = html.Div(
[
dcc.Graph(
id="live-graph", animate=True # enable smooth transition upon updation
),
dcc.Interval(
id="live-graph-interval",
interval=1000, # time, in ms, elapsed between two consecutive values
n_intervals=0, # number of intervals completed from the start of the server
),
]
)
animate を True に設定したことに注意してください。これは、新しいデータ ポイントがグラフに追加されたときにスムーズな移行が必要なためです。 False に設定すると、グラフが突然更新され、ユーザー エクスペリエンスが妨げられる可能性があります。
ライブ グラフを更新する
@app.callback(
Output("live-graph", "figure"), [Input("live-graph-interval", "n_intervals")]
)
def updateGraph(n):
xx = xData[-1] + 1
yy = yData[-1] + (yData[-1] * random.uniform(-0.5, 0.5))
if yy == 0:
yy = 1
xData.append(xx)
yData.append(yy)
data = plotly.graph_objs.Scatter(
x=list(xData), y=list(yData), name="Scatter", mode="lines+markers"
)
return {
"data": [data],
"layout": go.Layout(
xaxis=dict(range=[min(xData), max(xData)]),
yaxis=dict(range=[min(yData), max(yData)]),
),
}
サーバーを実行する
Dash アプリケーションで利用可能な run_server() を呼び出して、サーバーを実行します。
if __name__ == "__main__":
app.run_server()
出力を含む完全なソース コード
以下は、完全なソース コードと出力です。 python main.py を使用してスクリプトを実行すると、URL が出力として表示されることに注意してください。
その URL を任意の Web ブラウザで開き、アプリケーションにアクセスします。
import dash
import random
import plotly
import plotly.graph_objs as go # graph features
import dash_core_components as dcc # graphs
import dash_html_components as html # html components
from dash.dependencies import Output, Input # callbacks
app = dash.Dash(__name__)
xData = [1]
yData = [1]
app.layout = html.Div(
[
dcc.Graph(
id="live-graph", animate=True # enable smooth transition upon updation
),
dcc.Interval(
id="live-graph-interval",
interval=1000, # time, in ms, elapsed between two consecutive values
n_intervals=0, # number of intervals completed from the start of the server
),
]
)
@app.callback(
Output("live-graph", "figure"), [Input("live-graph-interval", "n_intervals")]
)
def updateGraph(n):
xx = xData[-1] + 1
yy = yData[-1] + (yData[-1] * random.uniform(-0.5, 0.5))
if yy == 0:
yy = 1
xData.append(xx)
yData.append(yy)
data = plotly.graph_objs.Scatter(
x=list(xData), y=list(yData), name="Scatter", mode="lines+markers"
)
return {
"data": [data],
"layout": go.Layout(
xaxis=dict(range=[min(xData), max(xData)]),
yaxis=dict(range=[min(yData), max(yData)]),
),
}
if __name__ == "__main__":
app.run_server()
出力：
Vaibhav is an artificial intelligence and cloud computing stan. He likes to build end-to-end full-stack web and mobile applications. Besides computer science and technology, he loves playing cricket and badminton, going on bike rides, and doodling.