データ視覚化に Plotly と Dash を使用する方法

この記事は、Lemony Hug によるHuawei クラウドコミュニティ「データからデプロイメントまで Plotly と Dash を使用してデータの視覚化と実稼働環境のデプロイメントを実現する」から共有されたものです。

データの視覚化はデータ分析の重要な部分であり、データをより直観的に理解し、隠れたパターンや傾向を発見するのに役立ちます。 Python にはデータ視覚化のための強力なツールが多数あり、Plotly と Dash が一般的な選択肢です。 Plotly はさまざまなインタラクティブな描画機能を提供し、Dash はインタラクティブな Web アプリケーションを構築するための Python フレームワークです。この記事では、データ視覚化に Plotly と Dash を使用する方法を紹介し、ケースコードを通じてそのアプリケーションをデモンストレーションします。

Plotly と Dash をインストールする

まず、Plotly ライブラリと Dash ライブラリをインストールする必要があります。次のコマンドで pip を使用してインストールできます。

pip インストール プロット ダッシュ

インストールが完了したら、これら 2 つのライブラリの使用を開始できます。

ケースコード: シンプルなデータ視覚化アプリケーション

簡単な例から始めましょう。販売データの CSV ファイルがあり、このデータを視覚化して Web アプリケーションとして展開するための対話型グラフを作成したいとします。まず、必要なライブラリをインポートする必要があります。

インポートダッシュ
ダッシュインポートDCC、HTMLから
pxとしてplotly.expressをインポートします
パンダをPDとしてインポートする

#データの読み取り
df = pd.read_csv('販売データ.csv')

#ダッシュアプリケーションの作成
app = ダッシュ.ダッシュ(__name__)

＃ レイアウト
app.layout = html.Div([
    html.H1("売上データの視覚化"),
    dcc.Graph(
        id='売上グラフ'
    ）
])

＃ 折り返し電話
@app.callback(
    ダッシュ.dependency.Output('売上グラフ', '図'),
    [dash.dependency.Input('売上グラフ', '値')]
）
def update_graph(選択された年):
    filtered_df = df[df['年'] == 選択された_年]
    fig = px.bar(filtered_df, x='月', y='売上', title=f'売上データ-{選択された_年}')
    イチジクを返す

# アプリケーションを開始する
__name__ == '__main__'の場合:
    app.run_server(debug=True)

この例では、最初に sales_data.csv という名前の CSV ファイルを読み取り、次に Dash アプリケーションを作成しました。アプリケーションのレイアウトで、タイトルと空のグラフ領域を定義します。次に、ユーザーが別の年を選択すると、グラフが更新されてその年の売上データが表示されるようにコールバック関数を設定しました。最後に、run_server メソッドを呼び出してアプリケーションを起動します。

コードが適切に実行できるように、sales_data.csv ファイルに必要なデータフィールド (年、月、売上など) が含まれていることを確認してください。

事例コード: 高度なデータの視覚化と対話

前のケースでは、Dash と Plotly を使用して単純なデータ視覚化アプリケーションを作成する方法を示しました。ここで、対話性やカスタマイズの追加など、いくつかの高度な機能をさらに詳しく見てみましょう。

販売データの傾向を表示し、ユーザーがさまざまな製品カテゴリを選択することでさまざまな傾向を確認できるようにしたいとします。この機能は、次のコードを通じて実現できます。

インポートダッシュ
ダッシュインポートDCC、HTMLから
pxとしてplotly.expressをインポートします
パンダをPDとしてインポートする

#データの読み取り
df = pd.read_csv('販売データ.csv')

#ダッシュアプリケーションの作成
app = ダッシュ.ダッシュ(__name__)

＃ レイアウト
app.layout = html.Div([
    html.H1("売上データの傾向"),
    dcc.ドロップダウン(
        id='製品ドロップダウン',
        オプション=[
            {'ラベル': '製品 A', '値': '製品 A'},
            {'ラベル': '製品 B', '値': '製品 B'},
            {'ラベル': '製品 C', '値': '製品 C'}
        ]、
        値='製品A'
    ）、
    dcc.Graph(
        id='売上動向'
    ）
])

＃ 折り返し電話
@app.callback(
    ダッシュ.dependency.Output('売上動向', '図'),
    [dash.dependency.Input('製品ドロップダウン', '値')]
）
def update_trend(選択された製品):
    filtered_df = df[df['Product'] == selected_product]
    fig = px.line(filtered_df, x='月', y='売上', title=f'{selected_product}売上推移')
    イチジクを返す

# アプリケーションを開始する
__name__ == '__main__'の場合:
    app.run_server(debug=True)

この例では、ユーザーがさまざまな製品カテゴリを選択できるようにするドロップダウンメニューを追加しました。ユーザーが別の製品を選択すると、グラフが更新され、選択した製品の販売傾向が表示されます。これにより、ユーザーはさまざまな製品の販売をより柔軟に探索できるようになります。

単純な折れ線グラフに加えて、Plotly は、より複雑な視覚化のニーズを満たすための豊富なグラフの種類とカスタマイズオプションも提供します。 Dash を使用すると、インタラクティブな Web アプリケーションを構築し、コールバック関数を通じてグラフを動的に更新して、ユーザーに優れたエクスペリエンスを提供できます。

インタラクティブ性とスタイルを追加する

上記のケースでは、Dash と Plotly を使用してデータ視覚化アプリケーションを作成し、基本的な対話型機能を提供する方法を示しました。ここで、さらにインタラクティブ性とスタイルを追加して、アプリをより魅力的で使いやすくしましょう。

インポートダッシュ
ダッシュインポート dcc、html、callback_context から
pxとしてplotly.expressをインポートします
パンダをPDとしてインポートする

#データの読み取り
df = pd.read_csv('販売データ.csv')

# 固有の製品リストを取得する
available_products = df['Product'].unique()

#ダッシュアプリケーションの作成
app = ダッシュ.ダッシュ(__name__)

#スタイルを適用する
app.layout = html.Div([
    html.H1("売上データの傾向", style={'textAlign': 'center'}),
    html.Div([
        html.Label("製品の選択:"),
        dcc.ドロップダウン(
            id='製品ドロップダウン',
            options=[{'label': product, 'value': product} for product in available_products],
            値=利用可能な製品[0]
        ）
    ]、style={'width': '50%'、'margin': 'auto'、'textAlign': 'center'})、
    dcc.Graph(
        id='売上動向',
        config={'displayModeBar': False} # チャートのモードバーを無効にする
    ）
]、スタイル={'パディング': '20px'})

＃ 折り返し電話
@app.callback(
    ダッシュ.dependency.Output('売上動向', '図'),
    [dash.dependency.Input('製品ドロップダウン', '値')]
）
def update_trend(選択された製品):
    filtered_df = df[df['Product'] == selected_product]
    fig = px.line(filtered_df, x='月', y='売上', title=f'{selected_product}売上推移')
    イチジクを返す

# アプリケーションを開始する
__name__ == '__main__'の場合:
    app.run_server(debug=True)

この例では、アプリをより魅力的に見せるためにいくつかのスタイルを追加しました。タイトルを中央に配置し、商品ドロップダウンの周囲に余白を追加して、レイアウトの美しさをさらに高めました。さらに、ユーザーインターフェイスを簡素化するために、チャートのモードバーを無効にしました。

これらの改善により、アプリは強力なインタラクティブなデータ視覚化機能を提供するだけでなく、外観とユーザーエクスペリエンスも向上しました。これにより、ユーザーはデータを探索し、そこから貴重な洞察を得るためにアプリを使用する意欲が高まります。

実稼働環境へのデプロイ

データ視覚化アプリケーションの開発が完了したら、通常は、他のユーザーがアクセスして使用できるように、アプリケーションを運用環境にデプロイする必要があります。このセクションでは、Dash アプリケーションを運用サーバーにデプロイする方法について説明します。

Gunicorn と Nginx の使用

Gunicorn は、Web アプリケーションからの HTTP リクエストを処理できる Python WSGI (HTTP サーバー) HTTP サーバーです。 Nginx は高性能 HTTP およびリバースプロキシサーバーであり、通常は静的ファイルの処理と負荷分散に使用されます。

まず、Gunicorn と Nginx をインストールする必要があります。

pip インストール ガニコーン
sudo apt-get インストール nginx

次に、Gunicorn を使用して Dash アプリケーションを実行します。

gunicorn -w 4 -b 0.0.0.0:8050 your_app:app

これにより、Gunicorn サーバーがローカルで起動され、ポート 8050 で Dash アプリケーションが実行されます。次に、HTTP リクエストを Gunicorn サーバーに転送するために、Nginx をリバースプロキシとして構成する必要があります。

Nginxの構成

次の内容を Nginx の構成ファイルに追加します。

サーバー {
    80を聞いてください。
    サーバー名 あなたのドメイン.com;

    位置 / {
        proxy_pass http://127.0.0.1:8050;
        プロキシリダイレクトはオフです。
        proxy_set_header ホスト $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

your_domain.com を実際のドメイン名に置き換えます。次に、Nginx 構成をリロードします。

sudo systemctlリロードnginx

これで、Dash アプリケーションが運用環境に正常にデプロイされ、ドメイン名を介してアクセスできるようになりました。

HTTPSを使用する

セキュリティを向上させるために、HTTPS プロトコルを使用するように Nginx を構成することもできます。 SSL 証明書を取得し、Nginx に構成する必要があります。簡単な方法は、Let's Encrypt を使用して無料の SSL 証明書を取得することです。簡単な構成例を次に示します。

サーバー {
    80を聞いてください。
    サーバー名 あなたのドメイン.com;

    位置 / {
        301 https://$host$request_uri を返します。
    }
}

サーバー {
    443 SSL をリッスンします。
    サーバー名 あなたのドメイン.com;

    ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem;

    位置 / {
        proxy_pass http://127.0.0.1:8050;
        プロキシリダイレクトはオフです。
        proxy_set_header ホスト $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

このように構成すると、Dash アプリケーションは HTTPS プロトコル経由で提供され、すべての HTTP リクエストが HTTPS にリダイレクトされます。

統合されたユーザー認証と権利管理

場合によっては、データ視覚化アプリケーションへのアクセスを特定のユーザーまたはユーザーグループのみに制限したい場合があります。これを実現するには、ユーザー認証システムと権利管理システムを統合します。

基本認証を使用する

簡単な方法は、Basic 認証を使用することです。 Nginx で基本認証を構成して、アプリケーションにアクセスする前にユーザーにユーザー名とパスワードの入力を要求することができます。以下は Nginx 構成のサンプルです。

サーバー {
    443 SSL をリッスンします。
    サーバー名 あなたのドメイン.com;

    ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem;

    位置 / {
        auth_basic "アクセス制限";
        auth_basic_user_file /etc/nginx/.htpasswd;

        proxy_pass http://127.0.0.1:8050;
        プロキシリダイレクトはオフです。
        proxy_set_header ホスト $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

この構成では、auth_basic ディレクティブを使用して基本認証を有効にし、パスワードファイル /etc/nginx/.htpasswd を指定します。 htpasswd ツールを使用してこのパスワードファイルを作成し、ユーザー名とパスワードをそれに追加する必要があります。

OAuth認証を使用する

もう 1 つの一般的な方法は、OAuth 認証を使用することです。 OAuth を通じて、ユーザーの認証プロセスを Google、GitHub などのサードパーティ ID プロバイダーに委任できます。ユーザーがサードパーティの ID プロバイダーで認証に成功すると、アプリケーションにアクセスできるようになります。

Dash のダッシュ認証ライブラリを使用して、OAuth 認証を実装できます。このライブラリは、複数の OAuth プロバイダーを統合し、Dash アプリケーションへのアクセスを制限する簡単な方法を提供します。

権限管理を追加する

認証に加えて、ユーザーが特定のデータまたは機能にアクセスできるかどうかを判断する権限を与えることもできます。一般的なアプローチは、アプリケーションにロールベースのアクセス制御 (RBAC) システムを実装することです。 RBAC を使用すると、ユーザーをさまざまなロールに割り当て、アプリケーション内のさまざまなロールへのアクセスを制限できます。

Dash アプリケーションに RBAC システムを実装して、ユーザーがロールに基づいて特定のアクションを実行する権限を持っているかどうかを判断できます。これには、ログイン時にユーザーのロールを確認し、そのロールに基づいてアプリ内の機能とデータアクセスを動的に調整することが含まれる場合があります。

ロギングとエラー処理

アプリケーションを運用環境にデプロイする場合、ロギングとエラー処理は非常に重要です。適切なロギングは、アプリケーションの動作を追跡し、問題をタイムリーに検出して解決するのに役立ちます。エラー処理により、アプリケーションの安定性が向上し、エラーによるサービスの中断が軽減されます。

ロギングの構成

まず、アプリケーションのログを構成しましょう。 Dash アプリケーションは通常、ログを stdout または stderr に出力します。これらのログをファイルにリダイレクトすることで記録できます。 Python のロギングモジュールを使用して、より高度なロギングを実装することもできます。

インポートログ

logging.basicConfig(filename='app.log', level=logging.INFO)

上記のコードを Dash アプリケーションに追加すると、ログが app.log という名前のファイルに記録され、ログレベルが INFO に設定されます。必要に応じてログレベルを調整し、さまざまなレベルの情報を記録できます。

エラー処理

もう 1 つの重要な側面はエラー処理です。アプリケーションでエラーが発生した場合、ユーザーフレンドリーなエラーメッセージを提供しながら、これらのエラーをキャプチャしてログに記録できるようにしたいと考えています。

Dash アプリケーションでは、try-excel ブロックを使用して例外をキャッチし、例外が発生したときにエラーページを返したり、わかりやすいエラーメッセージを表示したりできます。

@app.server.errorhandler(例外)
def handle_error(e):
    logging.error(f'エラーが発生しました: {str(e)}')
    return html.H1("おっと! 何か問題が発生しました。"), 500

上記のコードでは、すべての例外をキャッチするエラー処理関数 handle_error を定義します。例外が発生すると、エラーメッセージが記録され、エラーメッセージを含むページがユーザーに返されます。

適切なロギングとエラー処理により、アプリケーションの動作をより深く理解し、エラーが発生したときに適切な措置を講じて、アプリケーションの安定性と信頼性を確保できます。

モニタリングとパフォーマンスの最適化

最後に、アプリケーションが運用環境にデプロイされたら、アプリケーションのパフォーマンスを定期的に監視し、パフォーマンスを最適化するための措置を講じる必要もあります。これには、アプリケーションの応答時間、メモリ使用量、CPU 負荷などの指標を監視し、監視結果に基づいて最適化することが含まれます。

Prometheus、Grafana などの監視ツールを使用してアプリケーションのパフォーマンス指標を監視し、監視結果に基づいて調整や最適化を行うことができます。

要約する

この記事では、Dash アプリケーションを運用環境に展開するための主要な手順と必要な対策について詳しく説明します。まず、Gunicorn と Nginx を使用して Dash アプリケーションをデプロイする方法について説明し、HTTPS プロトコルを通じてアプリケーションのセキュリティを向上させる方法を示しました。次に、ユーザー認証と権利管理システムを統合する方法と、アプリケーションの安定性と信頼性を向上させるためにログ記録とエラー処理を構成する方法を検討しました。最後に、監視とパフォーマンスの最適化の重要性を強調し、いくつかの監視ツールと最適化方法を提案します。これらの対策により、Dash アプリケーションを実稼働環境にデプロイし、実稼働環境での堅牢性と信頼性を高め、ユーザーに高品質のサービスとエクスペリエンスを提供できます。

クリックしてフォローし、できるだけ早くHuawei Cloudの新しいテクノロジーについて学びましょう~