Interactive Dashboards তৈরি এবং Layout Design গাইড ও নোট

Dash হল Plotly-এর একটি ফ্রেমওয়ার্ক যা ব্যবহার করে আপনি ইন্টারেকটিভ ওয়েব ড্যাশবোর্ড তৈরি করতে পারেন। Dash আপনাকে গ্রাফ, চার্ট, স্লাইডার, ড্রপডাউন, টেবিল ইত্যাদি ইন্টারেকটিভ উপাদান (components) ব্যবহার করে ডেটা ভিজুয়ালাইজেশন তৈরি করতে সাহায্য করে। Dash-এর মাধ্যমে আপনি একটি ড্যাশবোর্ড তৈরি করতে পারেন যা ব্যবহারকারী ইনপুটের মাধ্যমে আপডেট হবে।

Dash-এর মূল উপাদান

1. Layout: Dash অ্যাপ্লিকেশনের ভিজ্যুয়াল স্ট্রাকচার বা ড্যাশবোর্ডের উপাদানগুলো এখানে সংযুক্ত করা হয়।
2. Components: Dash এ বিভিন্ন ধরনের ইন্টারেকটিভ UI উপাদান (গ্রাফ, ড্রপডাউন, স্লাইডার, ইনপুট বক্স ইত্যাদি) ব্যবহৃত হয়।
3. Callbacks: এই ফাংশনটি ব্যবহারকারী ইনপুট অনুযায়ী ড্যাশবোর্ডের উপাদানগুলো আপডেট করে।

Dash Layout Design

Dash অ্যাপ্লিকেশন তৈরি করার সময় লেআউট ডিজাইন করা খুবই গুরুত্বপূর্ণ। এটি শুধুমাত্র গ্রাফ বা টেবিল প্রদর্শন করেই থেমে থাকে না, বরং ড্যাশবোর্ডের ইন্টারফেসকেও সুন্দর এবং ব্যবহারকারীর জন্য সহজ করতে সহায়তা করে।

Dash-এর লেআউটটি HTML এবং CSS ব্যবহার করে কাস্টমাইজ করা যায়। Dash এর সাথে HTML Divs (HTML ট্যাগ) ব্যবহার করে আপনি আপনার ড্যাশবোর্ডের বিভিন্ন উপাদানকে সাজাতে পারবেন।

Dash Layout Design উদাহরণ:

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px

# Dash অ্যাপ্লিকেশন তৈরি
app = dash.Dash(__name__)

# উদাহরণ ডেটাসেট
df = px.data.gapminder()

# Layout ডিজাইন করা
app.layout = html.Div([
    # হেডিং
    html.H1("Gapminder Data Dashboard", style={'text-align': 'center', 'color': 'darkblue'}),
    
    # ড্রপডাউন কম্পোনেন্ট
    html.Div([
        html.Label("Select Continent:"),
        dcc.Dropdown(
            id='continent-dropdown',
            options=[{'label': continent, 'value': continent} for continent in df['continent'].unique()],
            value='Asia',
            style={'width': '50%', 'margin': 'auto'}
        )
    ], style={'text-align': 'center', 'padding': '20px'}),
    
    # গ্রাফ
    html.Div([
        dcc.Graph(id='life-exp-vs-gdp')
    ], style={'padding': '10px'}),
    
    # স্লাইডার
    html.Div([
        html.Label("Select Year:"),
        dcc.Slider(
            id='year-slider',
            min=df['year'].min(),
            max=df['year'].max(),
            step=1,
            value=df['year'].max(),
            marks={year: str(year) for year in range(df['year'].min(), df['year'].max()+1, 5)},
        )
    ], style={'padding': '20px', 'width': '50%', 'margin': 'auto'})
])

# Callback ফাংশন
@app.callback(
    dash.dependencies.Output('life-exp-vs-gdp', 'figure'),
    [dash.dependencies.Input('continent-dropdown', 'value'),
     dash.dependencies.Input('year-slider', 'value')]
)
def update_graph(selected_continent, selected_year):
    filtered_df = df[(df['continent'] == selected_continent) & (df['year'] == selected_year)]
    
    fig = px.scatter(filtered_df, x='gdpPercap', y='lifeExp', color='country', size='pop', 
                     log_x=True, title=f"Life Expectancy vs GDP per Capita ({selected_continent}, {selected_year})")
    
    return fig

# অ্যাপ্লিকেশন চালানো
if __name__ == '__main__':
    app.run_server(debug=True)

ব্যাখ্যা:

• html.Div: Dash এর লেআউট তৈরি করার জন্য আমরা html.Div ব্যবহার করেছি, যা HTML ট্যাগের মতো একটি কন্টেইনার।
• html.H1: এটি ড্যাশবোর্ডের হেডিং হিসেবে কাজ করে, যা সেন্টারে রাখা হয়েছে এবং স্টাইল দেওয়া হয়েছে।
• dcc.Dropdown: ড্রপডাউন উইজেট ব্যবহার করে ইউজারকে মহাদেশ নির্বাচন করার সুযোগ দেওয়া হয়েছে।
• dcc.Graph: এই কম্পোনেন্টটি গ্রাফ প্রদর্শন করবে যা Plotly এর সাহায্যে তৈরি হবে।
• dcc.Slider: একটি স্লাইডার ব্যবহার করে ইউজারকে বছর নির্বাচন করার সুযোগ দেওয়া হয়েছে।

Dash Callback:

• Callback ব্যবহৃত হয়েছে যাতে ব্যবহারকারী যেকোনো ইনপুট (যেমন ড্রপডাউন বা স্লাইডার) পরিবর্তন করলে সেই অনুযায়ী গ্রাফ আপডেট হয়।

Dash Layout কাস্টমাইজেশন

1. CSS ব্যবহার: Dash অ্যাপ্লিকেশনে স্টাইল কাস্টমাইজ করতে CSS ব্যবহার করা যায়। আপনি Dash-এর style প্যারামিটার বা এক্সটারনাল CSS ফাইল ব্যবহার করতে পারেন।

CSS স্টাইলিং:

html.Div([
    html.H1("Title", style={'color': 'red', 'text-align': 'center'})
], style={'backgroundColor': '#f0f0f0', 'padding': '20px'})

এখানে, style প্যারামিটার দ্বারা সোজাসুজি HTML উপাদানগুলোর স্টাইল পরিবর্তন করা হয়েছে। আপনি এক্সটারনাল CSS ফাইলও লিংক করতে পারেন।

2. Responsive Design: Dash এর মাধ্যমে আপনি একটি responsive design তৈরি করতে পারেন যাতে আপনার অ্যাপটি মোবাইল, ট্যাবলেট এবং ডেস্কটপে সঠিকভাবে কাজ করে।

Responsive Layout:

html.Div([
    html.Div("Content 1", style={'display': 'inline-block', 'width': '45%'}),
    html.Div("Content 2", style={'display': 'inline-block', 'width': '45%'})
], style={'width': '100%', 'text-align': 'center'})

এখানে, আমরা দুটি কন্টেন্ট inline-block ডিসপ্লে করে তাদের সাইজ ৪৫% নির্ধারণ করেছি।

Dash Components

Dash এ বেশ কিছু গুরুত্বপূর্ণ components রয়েছে যা ড্যাশবোর্ডের ইন্টারেকটিভ উপাদান হিসেবে কাজ করে:

1. dcc.Dropdown: ড্রপডাউন উইজেট ব্যবহার করে ইউজারের কাছ থেকে ইনপুট নেওয়া হয়।
2. dcc.Slider: ইউজারের কাছ থেকে একটি রেঞ্জ নির্বাচন করতে স্লাইডার ব্যবহার করা হয়।
3. dcc.Input: একটি সাধারণ ইনপুট বক্স যা ইউজার থেকে টেক্সট গ্রহণ করতে ব্যবহৃত হয়।
4. dcc.RadioItems: একাধিক বিকল্প থেকে একটি নির্বাচন করতে রেডিও বাটন ব্যবহার করা হয়।
5. dcc.Checklist: একাধিক বিকল্প থেকে একাধিক নির্বাচন করার জন্য চেকলিস্ট ব্যবহার করা হয়।
6. dcc.Graph: Plotly গ্রাফ উপস্থাপন করার জন্য ব্যবহৃত হয়।

Dash-এর অন্যান্য বৈশিষ্ট্য:

• Callbacks: Dash অ্যাপে ইন্টারেকটিভিটি যুক্ত করার জন্য callbacks ব্যবহৃত হয়।
• State: ইউজারের ইনপুট এবং ড্যাশবোর্ডের অবস্থান ট্র্যাক করার জন্য State ব্যবহৃত হয়।
• Live Updates: Dash তে লাইভ ডেটা আপডেট করার জন্য Interval কম্পোনেন্ট ব্যবহার করা হয়।

সারাংশ

Plotly এবং Dash ব্যবহার করে আপনি খুব সহজেই ইন্টারেকটিভ ড্যাশবোর্ড তৈরি করতে পারেন যা ডেটা ভিজুয়ালাইজেশন এবং ইউজার ইনপুটের উপর ভিত্তি করে আপডেট হয়। Dash এর layout design এবং components ব্যবহারের মাধ্যমে আপনি একটি শক্তিশালী এবং সুন্দর ড্যাশবোর্ড তৈরি করতে পারবেন। Callbacks এবং CSS দিয়ে আপনি আপনার ড্যাশবোর্ডের ইন্টারেকটিভিটি এবং ইউজার ইন্টারফেস কাস্টমাইজ করতে পারবেন, যা আপনার অ্যাপ্লিকেশনকে আরও কার্যকর এবং ব্যবহারকারী-বান্ধব করে তোলে।