データの可視化において、独自のデザインを適用したダッシュボードを構築したい場合、プログラミングによるアプローチが有効です。本稿では、PythonのDashフレームワークとTailwind CSSを組み合わせて、カスタマイズ性の高い可視化ダッシュボードを作成する手順を解説します。

環境設定とライブラリのインポート

まず、必要なライブラリをインポートします。DashはPlotlyをベースとしたダッシュボード構築用フレームワークであり、Pandasはデータ操作に使用します。

import dash
import pandas as pd
import plotly.express as px
from dash import dcc, html

Dashアプリケーションの初期化

Tailwind CSSを利用するため、CDNを外部スクリプトとして設定し、Dashアプリケーションを初期化します。

# 外部スクリプトの設定
external_scripts = [{"src": "https://cdn.tailwindcss.com"}]

# Dashインスタンスの生成
dashboard_app = dash.Dash(
    __name__,
    external_scripts=external_scripts
)

データセットの作成と前処理

Pandasを使用して、地域別の製品売上データを作成します。

# 売上データの生成
sales_data = pd.DataFrame({
    "Product": ["PC", "Mouse", "Monitor", "PC", "Mouse", "Monitor"],
    "Revenue": [1500.0, 25.5, 300.0, 1800.0, 30.0, 350.0],
    "Region": ["Tokyo", "Tokyo", "Tokyo", "Osaka", "Osaka", "Osaka"],
})

# メトリクス計算
total_revenue = sales_data.Revenue.sum()
product_num = sales_data.Product.nunique()
region_num = sales_data.Region.nunique()
col_count = sales_data.shape[1]

グラフの生成

Plotly Expressを利用して、製品別・地域別の売上を示す棒グラフと、地域ごとの売上分布を示す箱ひげ図を作成します。

# 棒グラフ: 地域別・製品別の売上
bar_chart = px.bar(sales_data, x="Product", y="Revenue", color="Region", barmode="group")

# 箱ひげ図: 地域別の売上分布
box_chart = px.box(sales_data, x="Region", y="Revenue", color="Region")

レイアウトの構築

Tailwind CSSのユーティリティクラスを活用し、レスポンシブなグリッドレイアウトを実装します。ヘッダー、KPIカード、そしてグラフセクションを配置します。

dashboard_app.layout = html.Div(
    className="bg-slate-100 min-h-screen p-8",
    children=[
        html.Header(
            className="mb-6 text-center",
            children=[
                html.H1("製品売上ダッシュボード", className="text-4xl font-extrabold text-slate-800 mb-2"),
                html.P("Python Dash + Tailwind CSSによる実装", className="text-lg text-slate-500"),
            ]
        ),
        html.Section(
            className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8",
            children=[
                html.Div(f"¥{total_revenue:,.0f}", className="bg-emerald-500 text-white p-6 rounded-lg shadow text-3xl font-bold text-center"),
                html.Div(f"{product_num} Products", className="bg-indigo-500 text-white p-6 rounded-lg shadow text-3xl font-bold text-center"),
                html.Div(f"{region_num} Regions", className="bg-rose-500 text-white p-6 rounded-lg shadow text-3xl font-bold text-center"),
                html.Div(f"{col_count} Columns", className="bg-amber-500 text-white p-6 rounded-lg shadow text-3xl font-bold text-center"),
            ]
        ),
        html.Section(
            className="grid grid-cols-1 lg:grid-cols-2 gap-6",
            children=[
                html.Div(dcc.Graph(figure=bar_chart), className="bg-white p-4 rounded-lg shadow"),
                html.Div(dcc.Graph(figure=box_chart), className="bg-white p-4 rounded-lg shadow"),
            ]
        )
    ]
)

アプリケーションの実行

以下のコードを実行すると、ローカルサーバーが起動し、ブラウザで http://127.0.0.1:8050 にアクセスすることでダッシュボードを確認できます。

if __name__ == "__main__":
    dashboard_app.run_server(debug=True, port=8050)