サイトアイコン アマチュア無線局JS2IIU

Dash応用編: 第10回 ライブデータダッシュボードの構築

JS2IIU

こんにちは、JS2IIUです。いよいよDash応用編の最終回です。今回もよろしくお願いします。

はじめに

Dashを使って、リアルタイムデータを扱うライブダッシュボードを構築することは、多くの分野で応用可能です。例えば、株価の変動やIoTデバイスのセンサー情報を即座に反映するダッシュボードは、その代表的な例です。この記事では、APIやWebSocketを通じてライブデータを取得し、グラフや表を動的に更新する方法について解説します。

リアルタイムデータの更新

Dashでは、データをリアルタイムで更新するために、dcc.Intervalコンポーネントを使用します。このコンポーネントを用いると、指定した時間間隔でコールバックがトリガーされ、データの更新が可能です。また、WebSocketを利用すれば、データの更新があった際に即座にクライアントに通知する仕組みを作ることもできます。

APIを使ったライブデータの取得例

まず、株価データのAPIからリアルタイムデータを取得し、それをグラフで表示するアプリケーションのサンプルコードを見ていきます。

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import requests

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(id='live-graph', config={'displayModeBar': False}),
    dcc.Interval(id='interval-component', interval=1*1000, n_intervals=0)  # 1秒ごとに更新
])

# コールバック関数
@app.callback(Output('live-graph', 'figure'),
              Input('interval-component', 'n_intervals'))
def update_graph(n):
    url = 'https://api.example.com/stock_price'
    response = requests.get(url)
    data = response.json()

    fig = go.Figure(
        go.Scatter(x=data['time'], y=data['price'], mode='lines', name='Price')
    )
    
    fig.update_layout(title='Live Stock Price', xaxis_title='Time', yaxis_title='Price')

    return fig

if __name__ == '__main__':
    app.run_server(debug=True)

コードの詳細説明

  1. dcc.Intervalコンポーネント: このコンポーネントは、指定した時間間隔ごとにDashのコールバックをトリガーします。ここでは1秒ごとに更新されるように設定しています。
  2. コールバック関数: APIからリアルタイムデータを取得し、それを基にPlotlyのグラフを更新します。ここでは、株価データの取得にrequestsを使用し、Scatterグラフとして描画しています。
  3. dcc.Graphコンポーネント: ここでグラフを表示しています。コールバックによって、毎秒データが更新されるたびに新しいグラフが描画されます。

WebSocketを使ったリアルタイム更新

次に、WebSocketを利用してデータの変更をリアルタイムに検知し、即座にダッシュボードに反映させる手法を見ていきます。

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import websocket
import json

app = dash.Dash(__name__)

# グローバル変数としてデータを保持
latest_data = {'time': [], 'price': []}

def on_message(ws, message):
    global latest_data
    data = json.loads(message)
    latest_data['time'].append(data['time'])
    latest_data['price'].append(data['price'])

# WebSocket接続を開く
ws = websocket.WebSocketApp("wss://example.com/stock", on_message=on_message)
ws.run_forever()

app.layout = html.Div([
    dcc.Graph(id='live-graph', config={'displayModeBar': False}),
    dcc.Interval(id='interval-component', interval=1*1000, n_intervals=0)  # 1秒ごとに更新
])

# コールバック関数
@app.callback(Output('live-graph', 'figure'),
              Input('interval-component', 'n_intervals'))
def update_graph(n):
    fig = go.Figure(
        go.Scatter(x=latest_data['time'], y=latest_data['price'], mode='lines', name='Price')
    )
    
    fig.update_layout(title='Live Stock Price via WebSocket', xaxis_title='Time', yaxis_title='Price')

    return fig

if __name__ == '__main__':
    app.run_server(debug=True)

コードの詳細説明

  1. WebSocketの利用: websocket.WebSocketAppを使って、サーバーとリアルタイムで通信します。データが送られてくるたびにon_message関数が呼ばれ、最新のデータがlatest_dataに蓄積されます。
  2. dcc.IntervalとWebSocketの組み合わせ: WebSocketからのデータは常に受け取りますが、グラフの更新は1秒ごとに行います。この方法でリアルタイムに更新されるデータを可視化します。

ライブデータダッシュボードの構築のポイント

  1. 更新頻度とパフォーマンスのバランス: データの更新頻度が高いほど、サーバーやクライアントの負荷が増加します。適切な更新間隔を設定し、パフォーマンスを考慮した設計が必要です。
  2. データの蓄積と処理: ライブデータは増加し続けるため、過去のデータを管理する方法も重要です。表示するデータを一定量に制限するか、データベースに保存して必要に応じて取得する方法が有効です。

まとめ

リアルタイムデータを取り扱うダッシュボードは、データの動的な変化を即座に可視化するための強力な手法です。dcc.IntervalやWebSocketを活用して、APIやデータストリームからデータを取得し、グラフや表を動的に更新するアプリケーションを構築できます。

全10回のDash応用編、総まとめ

全10回にわたって、Dashフレームワークの基本から応用までを深く掘り下げてきました。今回のシリーズでは、レイアウトのカスタマイズや状態管理、複数ページアプリケーションの構築、リアルタイムデータの処理、さらには機械学習モデルの統合やパフォーマンス最適化など、幅広いトピックを取り扱いました。

Dashの強みは、そのシンプルさと柔軟性にあります。簡単なWebアプリケーションから、企業レベルのリアルタイムダッシュボードまで、さまざまなニーズに応じたアプリケーションを構築できます。また、Pythonだけで完結する点も非常に魅力的で、他のフレームワークに比べて迅速にプロトタイプを作成し、実際の運用に移行することが可能です。

シリーズを通じて、Dashが提供する豊富なコンポーネント、特にグラフやインタラクティブなUIの構築を通じて、実践的なスキルを学んでいただけたかと思います。さらに、クラウドへのデプロイやCI/CDの自動化、WebSocketやAPIを使ったリアルタイムデータの処理など、実務でも応用できる高度な技術も習得していただけたでしょう。

最後に、Dashは日々進化しており、新しいバージョンや機能が追加され続けています。引き続き学びを深め、さらなる応用や発展的なプロジェクトに挑戦してみてください。このシリーズが、皆様のDashを用いたアプリケーション開発の一助となれば幸いです。

最後まで読んでいただきありがとうございました。73

Dash関連記事まとめ

DashはJavaScriptライブラリであるReactの上に構築されたPythonフレームワークであるが、DashはRでも動作し、最近ではJuliaもサポートしている。
Wikipedia – Plotly/Dash から引用、翻訳

モバイルバージョンを終了