ساخت داشبورد داده با Dash در پایتون

داشبورد داده (Data Dashboard) یکی از ابزارهای قدرتمند برای نمایش و تحلیل داده‌ها به صورت تعاملی است. در این مقاله، ما به ساخت یک داشبورد با استفاده از کتابخانه Dash در پایتون خواهیم پرداخت. Dash یک فریم‌ورک برای توسعه وب‌اپلیکیشن‌های داده‌محور است که به زبان Python نوشته شده و از React برای رابط کاربری استفاده می‌کند.

چرا Dash؟

Dash توسط Plotly توسعه داده شده و یکی از ابزارهای محبوب در حوزه علم داده است. با استفاده از Dash، می‌توانید سریع و به راحتی داشبوردهای تعاملی بسازید که قابلیت نمایش گراف‌ها، جداول و عناصر تعاملی را دارند.

پیش‌نیازها

قبل از شروع، مطمئن شوید کتابخانه Dash را نصب کرده‌اید:

pip install dash

همچنین برای نمایش داده‌ها و گراف‌ها، می‌توانید از pandas و plotly استفاده کنید:

pip install pandas plotly

ساخت ساختار پایه داشبورد

ابتدا یک فایل Python ایجاد کرده و کد زیر را بنویسید:

import dash
from dash import dcc, html, Input, Output

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1("داشبورد داده من"),
    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'سیاه'},
            ],
            'layout': {
                'title': 'نمونه گراف'
            }
        }
    )
])

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

در این کد، ما یک داشبورد ساده با عنوان “داشبورد داده من” و یک نمودار بار معمولی ایجاد کرده‌ایم. از html.Div برای ساختاربندی صفحه استفاده شده و dcc.Graph برای نمایش گراف استفاده شده است.

اضافه کردن عناصر تعاملی

در داشبوردهای واقعی، معمولاً نیاز به افزودن فیلترها، کشویی‌ها و سایر عناصر تعاملی است. در ادامه، یک نمونه کد با یک فیلتر اضافه شده نشان داده شده است:

import dash
from dash import dcc, html, Input, Output
import plotly.express as px

app = dash.Dash(__name__)

# داده‌های نمونه
df = px.data.iris()

app.layout = html.Div([
    html.H1("داشبورد اینس"),
    dcc.Dropdown(
        id='species-dropdown',
        options=[{'label': i, 'value': i} for i in df['species'].unique()],
        value=df['species'].iloc[0]
    ),
    dcc.Graph(id='scatter-plot')
])

@app.callback(
    Output('scatter-plot', 'figure'),
    Input('species-dropdown', 'value')
)
def update_graph(selected_species):
    filtered_df = df[df['species'] == selected_species]
    fig = px.scatter(filtered_df, x="sepal_width", y="sepal_length")
    return fig

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

در این کد، یک فیلد انتخابی (Dropdown) برای انتخاب گونه‌های گل اینس اضافه شده است. هنگام انتخاب گونه، گراف به‌روزرسانی می‌شود و نمودار پراکندگی برای گونه انتخابی نمایش داده می‌شود.

توضیحات کد:

• dcc.Dropdown: یک فیلد انتخابی برای گونه‌های مختلف اینس.
• app.callback: تابعی است که وقتی مقدار Dropdown تغییر کند، فراخوانی می‌شود.
• update_graph: تابعی که داده‌ها را بر اساس گونه انتخابی فیلتر کرده و نمودار را بازنشانی می‌کند.

بهینه‌سازی داشبورد

برای ساخت داشبوردهای بهتر، می‌توانید از چندین تکنیک بهینه‌سازی استفاده کنید:

نکات مهم در طراحی داشبورد

• تمامی عناصر باید قابل فهم و مفید باشند.
• استفاده از رنگ‌ها و فونت‌های مناسب برای جذابیت بصری.
• قابلیت پاسخگویی برای دستگاه‌های موبایل و تبلت.

نمونه کامل

در اینجا یک نمونه کامل از داشبورد با چندین گراف و فیلترها:

import dash
from dash import dcc, html, Input, Output
import plotly.express as px

app = dash.Dash(__name__)

df = px.data.iris()

app.layout = html.Div([
    html.H1("داشبورد داده اینس"),
    
    dcc.Dropdown(
        id='xaxis-dropdown',
        options=[{'label': i, 'value': i} for i in ['sepal_width', 'sepal_length', 'petal_width', 'petal_length']],
        value='sepal_width'
    ),
    
    dcc.Dropdown(
        id='yaxis-dropdown',
        options=[{'label': i, 'value': i} for i in ['sepal_width', 'sepal_length', 'petal_width', 'petal_length']],
        value='sepal_length'
    ),

    dcc.Graph(id='scatter-plot'),
    
    html.H2("نمودار جدول داده"),
    html.Table([
        html.Tr([html.Th(col) for col in df.columns])
    ] + [
        html.Tr([html.Td(df.iloc[i][col]) for col in df.columns])
        for i in range(min(len(df), 10))
    ])
])

@app.callback(
    Output('scatter-plot', 'figure'),
    Input('xaxis-dropdown', 'value'),
    Input('yaxis-dropdown', 'value')
)
def update_graph(x_value, y_value):
    fig = px.scatter(df, x=x_value, y=y_value)
    return fig

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

در این نمونه، دو فیلد انتخابی برای محورهای X و Y وجود دارد که به‌روزرسانی گراف را انجام می‌دهند. همچنین یک جدول ساده برای نمایش 10 ردیف اول داده‌ها اضافه شده است.

با Dash، می‌توانید به راحتی و با کارآمدی بالا داشبوردهای تعاملی برای داده‌های خود بسازید. این فریم‌ورک مناسب برای توسعه سریع و قابل نگهداری است. در ادامه، می‌توانید از این راهنمایی‌ها برای افزودن توابع پیشرفته مانند چارت‌های پیچیده، فیلترهای پویا و داده‌های آنلاین استفاده کنید.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال