Big Data and Analytics Plotly এর জন্য Custom Dashboards তৈরি গাইড ও নোট

Plotly এবং Dash দিয়ে আপনি খুব সহজে এবং ইন্টারেক্টিভ Custom Dashboards তৈরি করতে পারেন, যেখানে ডেটার বিশ্লেষণ, ভিজুয়ালাইজেশন এবং ইন্টারেকটিভ কম্পোনেন্টস (যেমন ড্রপডাউন, স্লাইডার, ইনপুট বক্স) ব্যবহার করে ডেটার পরিবর্তন দেখানো যায়। Dash ফ্রেমওয়ার্ক ব্যবহার করে আপনি একটি পূর্ণাঙ্গ ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন, যা Plotly গ্রাফ এবং বিভিন্ন UI উপাদান দ্বারা পূর্ণ থাকে।

এই টিউটোরিয়ালে আমরা শিখবো কীভাবে Plotly গ্রাফ এবং Dash এর সাহায্যে একটি Custom Dashboard তৈরি করা যায়। Dash ব্যবহার করে আপনি interactive data visualizations তৈরি করতে পারবেন এবং আপনার ব্যবহারকারীদের জন্য প্রয়োজনীয় কন্ট্রোল (যেমন ড্রপডাউন, স্লাইডার, বাটন) সরবরাহ করতে পারবেন।

Dash Framework দিয়ে Custom Dashboard তৈরি করা

Dash এর মাধ্যমে একটি কাস্টম ড্যাশবোর্ড তৈরি করতে সাধারণত ৩টি প্রধান উপাদান থাকে:

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

এখানে আমরা একটি উদাহরণ দেখবো যেখানে Plotly গ্রাফ এবং Dash ফ্রেমওয়ার্ক ব্যবহার করে একটি কাস্টম ড্যাশবোর্ড তৈরি করা হবে।

Dash App তৈরি করার জন্য প্রয়োজনীয় প্যাকেজসমূহ

Dash অ্যাপ তৈরি করতে Dash, Plotly এবং অন্যান্য প্রয়োজনীয় প্যাকেজগুলি ইনস্টল করতে হবে:

pip install dash plotly pandas

Custom Dashboard উদাহরণ

ধরি আপনি একটি GDP vs Life Expectancy ড্যাশবোর্ড তৈরি করতে চান যেখানে ব্যবহারকারী একটি ড্রপডাউন থেকে মহাদেশ নির্বাচন করবেন এবং সেই অনুযায়ী গ্রাফ আপডেট হবে।

Step-by-Step উদাহরণ

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

# Dash অ্যাপ তৈরি
app = dash.Dash(__name__)

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

# Dash Layout তৈরি
app.layout = html.Div([
    # ড্যাশবোর্ডের টাইটেল
    html.H1("GDP vs Life Expectancy Dashboard"),
    
    # ড্রপডাউন কম্পোনেন্ট
    dcc.Dropdown(
        id='continent-dropdown',
        options=[{'label': continent, 'value': continent} for continent in df['continent'].unique()],
        value='Asia',  # ডিফল্ট মান
        style={'width': '50%'}
    ),
    
    # গ্রাফের জন্য Div
    dcc.Graph(id='gdp-vs-lifeexp'),
    
    # স্লাইডার কম্পোনেন্ট
    dcc.Slider(
        id='year-slider',
        min=df['year'].min(),
        max=df['year'].max(),
        value=df['year'].max(),
        marks={year: str(year) for year in range(df['year'].min(), df['year'].max()+1, 5)},
        step=1
    ),
])

# Callback ফাংশন: গ্রাফ আপডেট করার জন্য
@app.callback(
    Output('gdp-vs-lifeexp', 'figure'),
    [Input('continent-dropdown', 'value'),
     Input('year-slider', 'value')]
)
def update_graph(selected_continent, selected_year):
    # ডেটা ফিল্টার করা
    filtered_df = df[(df['continent'] == selected_continent) & (df['year'] == selected_year)]
    
    # Scatter Plot তৈরি
    fig = px.scatter(
        filtered_df,
        x="gdpPercap",
        y="lifeExp",
        color="country",
        size="pop",
        title=f"GDP vs Life Expectancy ({selected_continent} - {selected_year})",
        log_x=True
    )
    
    return fig

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

ব্যাখ্যা:

1. Dash Layout:
   • html.Div: এটি একটি কন্টেইনার যা ড্যাশবোর্ডের উপাদান ধারণ করে।
   • dcc.Dropdown: ড্রপডাউন উইজেট, যা ব্যবহারকারীদের মহাদেশ নির্বাচন করতে সহায়তা করে।
   • dcc.Graph: এখানে গ্রাফ বা চিত্রটি প্রদর্শিত হবে।
   • dcc.Slider: স্লাইডার উইজেট, যা একটি বছর নির্বাচন করার জন্য ব্যবহার হয়।
2. Callbacks:
   • @app.callback: এই ডেকোরেটরের মাধ্যমে আমরা ড্রপডাউন এবং স্লাইডার থেকে ইনপুট নিয়ে গ্রাফ আপডেট করার জন্য একটি ফাংশন তৈরি করেছি।
   • Input: ড্রপডাউন এবং স্লাইডার ইনপুটের জন্য।
   • Output: গ্রাফে প্রদর্শিত হওয়ার জন্য।
3. Plotly Express:
   • px.scatter: Scatter Plot তৈরি করার জন্য Plotly Express ব্যবহার করা হয়েছে যেখানে GDP এবং Life Expectancy এর মধ্যে সম্পর্ক দেখা যাচ্ছে এবং log_x=True ব্যবহার করে X অক্ষের স্কেলকে লগ-স্টাইল করা হয়েছে।

Custom Dashboards এর কাস্টমাইজেশন

Dash এর মাধ্যমে আপনি বিভিন্ন UI Components কাস্টমাইজ করতে পারেন যেমন:

1. Graph Customization:
   • update_layout: গ্রাফের লেআউট কাস্টমাইজ করা (টাইটেল, এক্স ও ওয়াই অক্ষের নাম ইত্যাদি)।
   • marker size, line width, colorscale ইত্যাদি কাস্টমাইজ করা।
2. UI Components Customization:
   • Styling: CSS ব্যবহার করে UI উপাদানগুলোর স্টাইল কাস্টমাইজ করা, যেমন মার্জিন, প্যাডিং, রং, ফন্ট ইত্যাদি।
   • Responsive Design: ড্যাশবোর্ডটিকে বিভিন্ন ডিভাইসে ঠিকভাবে প্রদর্শিত হতে পারে এমনভাবে ডিজাইন করা।

Dash Dashboard Deployment

Dash অ্যাপ্লিকেশন Heroku, AWS, DigitalOcean অথবা Dash Deployment Server এর মাধ্যমে deployment করা যেতে পারে। সাধারণত Dash অ্যাপস Flask ওয়েব সার্ভার ব্যবহার করে রান করে, তাই আপনি খুব সহজেই এই অ্যাপ্লিকেশনটি পাবলিক ওয়েব সার্ভারে ডিপ্লয় করতে পারেন।

1. Heroku Deployment:
   • GitHub Repository তৈরি করুন এবং Dash অ্যাপ আপলোড করুন।
   • Heroku CLI ব্যবহার করে Dash অ্যাপটি ডিপ্লয় করুন।
2. Dash Deployment Server:
   • Dash সরাসরি তাদের own Deployment Server এর মাধ্যমে অ্যাপ ডিপ্লয় করার সুবিধা প্রদান করে, যেখানে আপনি Dash অ্যাপকে ক্লাউডে অ্যাপ্লিকেশন হিসেবে চালাতে পারেন।

সারাংশ

Dash ফ্রেমওয়ার্ক এবং Plotly গ্রাফ ব্যবহার করে আপনি খুব সহজে Custom Dashboards তৈরি করতে পারেন। Dash-এর সাহায্যে ড্যাশবোর্ডের UI উপাদান, interactivity, এবং callbacks কাস্টমাইজ করে আপনার প্রয়োজনে উপযোগী ডেটা ভিজুয়ালাইজেশন অ্যাপ তৈরি করতে পারবেন। Dash ব্যবহার করে আপনি ড্রপডাউন, স্লাইডার, গ্রাফ, টেবিল ইত্যাদি বিভিন্ন ইন্টারেকটিভ উপাদান ব্যবহার করে ব্যবহারকারী-বান্ধব ড্যাশবোর্ড তৈরি করতে পারেন এবং আপনার ওয়েব অ্যাপ্লিকেশনটি সহজেই ডিপ্লয় করতে পারেন।

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 দিয়ে আপনি আপনার ড্যাশবোর্ডের ইন্টারেকটিভিটি এবং ইউজার ইন্টারফেস কাস্টমাইজ করতে পারবেন, যা আপনার অ্যাপ্লিকেশনকে আরও কার্যকর এবং ব্যবহারকারী-বান্ধব করে তোলে।

Multiple Plots এবং Data Widgets এর ইন্টিগ্রেশন Plotly তে একটি শক্তিশালী পদ্ধতি যা আপনাকে একটি ড্যাশবোর্ড বা ইন্টারেকটিভ ডেটা ভিজুয়ালাইজেশন তৈরি করতে সহায়তা করে। আপনি Multiple Plots (একাধিক গ্রাফ) এবং Data Widgets (যেমন ড্রপডাউন, স্লাইডার, টেক্সট ইনপুট, ইত্যাদি) ব্যবহার করে একটি ইন্টারেকটিভ ড্যাশবোর্ড তৈরি করতে পারেন, যেখানে ব্যবহারকারী গ্রাফের ডেটা বা ভিজুয়ালাইজেশন পরিবর্তন করতে পারে।

এখানে, আমরা দেখবো কীভাবে Multiple Plots এবং Data Widgets একসাথে ব্যবহার করা যায় এবং তাদের মধ্যে Dash ফ্রেমওয়ার্ক ব্যবহার করে ইন্টারেকটিভ সংযোগ স্থাপন করা যায়।

Multiple Plots তৈরি করা

Plotly তে একাধিক গ্রাফ (Multiple Plots) তৈরি করা এবং একে অপরের সাথে যুক্ত করা খুব সহজ। সাধারণত Subplots বা একাধিক Figures ব্যবহার করে এটি করা হয়। প্রতিটি প্লটের জন্য আলাদা ট্রেস (trace) বা ডেটা নির্ধারণ করা হয় এবং একসাথে একটি পৃষ্ঠায় প্রদর্শন করা হয়।

Multiple Plots উদাহরণ

import plotly.graph_objects as go
from plotly.subplots import make_subplots

# Subplot তৈরি করা
fig = make_subplots(rows=1, cols=2)

# প্রথম প্লটে Scatter Plot যোগ করা
fig.add_trace(go.Scatter(x=[1, 2, 3], y=[10, 11, 12], mode='markers', name='Scatter Plot'), row=1, col=1)

# দ্বিতীয় প্লটে Bar Plot যোগ করা
fig.add_trace(go.Bar(x=['A', 'B', 'C'], y=[10, 20, 30], name='Bar Plot'), row=1, col=2)

# গ্রাফ প্রদর্শন
fig.show()

এখানে:

• make_subplots ব্যবহার করে আমরা একসাথে একাধিক গ্রাফ (Subplots) তৈরি করেছি। প্রথমে Scatter Plot এবং তারপর Bar Plot তৈরি করা হয়েছে।

Data Widgets Integration

Data Widgets হল বিভিন্ন ধরনের ইন্টারেকটিভ UI উপাদান, যেমন Dropdown, Slider, Radio Button, এবং Input Box, যা ব্যবহারকারীকে গ্রাফের সাথে ইন্টারঅ্যাক্ট করতে সহায়তা করে। Dash ফ্রেমওয়ার্কের মাধ্যমে এসব widgets কে Plotly গ্রাফের সাথে ইন্টিগ্রেট করা হয়।

Data Widgets উদাহরণ

এখানে একটি Dash অ্যাপ্লিকেশন তৈরি করা হচ্ছে যেখানে ড্রপডাউন এবং স্লাইডারের মাধ্যমে গ্রাফের ডেটা পরিবর্তন করা যাবে।

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
import pandas as pd

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

# উদাহরণ ডেটাসেট
df = pd.DataFrame({
    'x': [1, 2, 3, 4, 5],
    'y': [10, 11, 12, 13, 14],
    'category': ['A', 'B', 'C', 'D', 'E']
})

# Layout তৈরি করা
app.layout = html.Div([
    # ড্রপডাউন কম্পোনেন্ট
    dcc.Dropdown(
        id='category-dropdown',
        options=[{'label': i, 'value': i} for i in df['category']],
        value='A',  # ডিফল্ট মান
    ),
    
    # স্লাইডার কম্পোনেন্ট
    dcc.Slider(
        id='value-slider',
        min=1,
        max=10,
        value=5,
        marks={i: str(i) for i in range(1, 11)},
    ),
    
    # গ্রাফ
    dcc.Graph(id='line-graph'),
])

# Callback ফাংশন
@app.callback(
    Output('line-graph', 'figure'),
    [Input('category-dropdown', 'value'),
     Input('value-slider', 'value')]
)
def update_graph(selected_category, slider_value):
    # ডেটা ফিল্টার করা
    filtered_df = df[df['category'] == selected_category]
    
    # স্লাইডারের মান পরিবর্তনের উপর ভিত্তি করে গ্রাফ আপডেট করা
    fig = go.Figure(
        data=[go.Scatter(x=filtered_df['x'], y=filtered_df['y']*slider_value, mode='lines+markers')],
        layout=go.Layout(title=f"Category: {selected_category} | Slider Value: {slider_value}")
    )
    
    return fig

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

এখানে:

• Dropdown: ব্যবহারকারী একটি ক্যাটেগরি নির্বাচন করতে পারে, যা গ্রাফের তথ্য পরিবর্তন করবে।
• Slider: স্লাইডারের মাধ্যমে গ্রাফের Y-ভ্যালু পরিবর্তিত হবে।
• Callback: @app.callback এর মাধ্যমে ড্রপডাউন এবং স্লাইডারের ইনপুটের উপর ভিত্তি করে গ্রাফ আপডেট করা হয়।

Multiple Plots এবং Data Widgets এর Integration

Plotly এবং Dash ব্যবহার করে Multiple Plots এবং Data Widgets একত্রে ইন্টিগ্রেট করা হলে, আপনি একটি ড্যাশবোর্ডে একাধিক গ্রাফ এবং ইন্টারেকটিভ কন্ট্রোল তৈরি করতে পারেন। উদাহরণস্বরূপ, আমরা একাধিক গ্রাফ এবং বিভিন্ন widgets (যেমন ড্রপডাউন, স্লাইডার, এবং টেক্সট ইনপুট) যুক্ত করতে পারি।

উদাহরণ: Multiple Plots এবং Data Widgets এর Integration

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
import pandas as pd

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

# উদাহরণ ডেটাসেট
df = pd.DataFrame({
    'x': [1, 2, 3, 4, 5],
    'y1': [10, 11, 12, 13, 14],
    'y2': [14, 13, 12, 11, 10],
    'category': ['A', 'B', 'C', 'D', 'E']
})

# Layout তৈরি করা
app.layout = html.Div([
    # ড্রপডাউন কম্পোনেন্ট
    dcc.Dropdown(
        id='category-dropdown',
        options=[{'label': i, 'value': i} for i in df['category']],
        value='A',
    ),
    
    # স্লাইডার কম্পোনেন্ট
    dcc.Slider(
        id='value-slider',
        min=1,
        max=10,
        value=5,
        marks={i: str(i) for i in range(1, 11)},
    ),
    
    # গ্রাফ
    dcc.Graph(id='line-graph'),
    dcc.Graph(id='bar-graph'),
])

# Callback ফাংশন
@app.callback(
    [Output('line-graph', 'figure'),
     Output('bar-graph', 'figure')],
    [Input('category-dropdown', 'value'),
     Input('value-slider', 'value')]
)
def update_graph(selected_category, slider_value):
    # ডেটা ফিল্টার করা
    filtered_df = df[df['category'] == selected_category]
    
    # Line plot তৈরি
    line_fig = go.Figure(
        data=[go.Scatter(x=filtered_df['x'], y=filtered_df['y1']*slider_value, mode='lines+markers')],
        layout=go.Layout(title=f"Line Graph: {selected_category} | Slider Value: {slider_value}")
    )
    
    # Bar plot তৈরি
    bar_fig = go.Figure(
        data=[go.Bar(x=filtered_df['x'], y=filtered_df['y2']*slider_value)],
        layout=go.Layout(title=f"Bar Graph: {selected_category} | Slider Value: {slider_value}")
    )
    
    return line_fig, bar_fig

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

এখানে:

• Multiple Plots: একসাথে দুইটি গ্রাফ (Line Plot এবং Bar Plot) প্রদর্শিত হচ্ছে, এবং দুটি গ্রাফই ড্রপডাউন এবং স্লাইডারের মাধ্যমে আপডেট হচ্ছে।
• Data Widgets: ড্রপডাউন এবং স্লাইডারের মাধ্যমে ব্যবহারকারী গ্রাফের উপস্থাপন পরিবর্তন করতে পারেন।

সারাংশ

Multiple Plots এবং Data Widgets এর ইন্টিগ্রেশন Plotly এবং Dash-এ আপনার ড্যাশবোর্ড বা ইন্টারেকটিভ ডেটা ভিজুয়ালাইজেশনকে আরও কার্যকরী এবং ব্যবহারকারী-বান্ধব করে তোলে। আপনি একাধিক গ্রাফ এবং বিভিন্ন UI উপাদান একসাথে ব্যবহার করে একটি ইন্টারেকটিভ ড্যাশবোর্ড তৈরি করতে পারেন, যা ব্যবহারকারীর ইনপুটের ভিত্তিতে ডেটার বিভিন্ন ভিজুয়াল রিপ্রেজেন্টেশন প্রদর্শন করে। Dash এর মাধ্যমে Callbacks ব্যবহার করে এই সকল উপাদানগুলির মধ্যে সংযোগ স্থাপন এবং আপডেট করা সম্ভব।

User Input এবং Interaction দ্বারা Data Visualization তৈরি করার মাধ্যমে আপনি ইন্টারেকটিভ এবং ডায়নামিক গ্রাফ তৈরি করতে পারেন, যা ব্যবহারকারীদের ডেটা বিশ্লেষণ করতে সহায়তা করে। Plotly এবং Dash ফ্রেমওয়ার্ক ব্যবহার করে আপনি বিভিন্ন ধরণের UI Components (যেমন ড্রপডাউন, স্লাইডার, ইনপুট বক্স) ব্যবহার করে ব্যবহারকারীর ইনপুট গ্রহণ করতে পারেন এবং সেই অনুযায়ী গ্রাফের আপডেট করতে পারেন।

এখানে, আমরা দেখবো কীভাবে User Input (যেমন ড্রপডাউন, স্লাইডার, টেক্সট ইনপুট) দিয়ে ইন্টারঅ্যাকটিভ Data Visualization তৈরি করা যায়।

Dash ব্যবহার করে User Input এবং Interaction

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

Dash Layout এবং Components

1. Dropdown: ব্যবহারকারীকে একটি বা একাধিক বিকল্প নির্বাচন করার সুযোগ দেয়।
2. Slider: ব্যবহারকারীকে একটি রেঞ্জ নির্বাচন করতে দেয়।
3. Input: ব্যবহারকারীকে টেক্সট ইনপুট দেওয়ার সুযোগ দেয়।
4. Graph: Plotly এর গ্রাফ উপাদান ব্যবহার করে ডেটার ভিজুয়াল প্রদর্শন করা হয়।
5. Button: ব্যবহারকারীকে একটি কাজ সম্পাদন করার জন্য বোতাম প্রদান করা।

Dash দিয়ে Interactive Data Visualization উদাহরণ

এখানে আমরা একটি Dropdown এবং Slider ব্যবহার করে Plotly গ্রাফ ইন্টারেক্টিভভাবে আপডেট করব। ব্যবহারকারী একটি মহাদেশ এবং একটি বছরের নির্বাচন করবেন, এবং সেই অনুযায়ী গ্রাফ আপডেট হবে।

উদাহরণ: Dash দিয়ে User Interaction এর মাধ্যমে Data Visualization

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

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

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

# Layout তৈরি করা
app.layout = html.Div([
    html.H1("Interactive Data Visualization with User Input"),
    
    # Dropdown কম্পোনেন্ট: মহাদেশ নির্বাচন
    dcc.Dropdown(
        id='continent-dropdown',
        options=[{'label': continent, 'value': continent} for continent in df['continent'].unique()],
        value='Asia',  # ডিফল্ট মহাদেশ
        style={'width': '50%'}
    ),
    
    # Slider কম্পোনেন্ট: বছর নির্বাচন
    dcc.Slider(
        id='year-slider',
        min=df['year'].min(),
        max=df['year'].max(),
        value=df['year'].max(),
        marks={year: str(year) for year in range(df['year'].min(), df['year'].max() + 1, 5)},
        step=1
    ),
    
    # গ্রাফ প্লট করার জন্য Div
    dcc.Graph(id='life-exp-vs-gdp'),
])

# Callback ফাংশন: ইউজারের ইনপুট অনুযায়ী গ্রাফ আপডেট করা
@app.callback(
    Output('life-exp-vs-gdp', 'figure'),
    [Input('continent-dropdown', 'value'),
     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)

ব্যাখ্যা:

1. Layout:
   • html.H1: একটি হেডিং (Title) তৈরি করা হয়েছে।
   • dcc.Dropdown: ড্রপডাউন দিয়ে ইউজারকে মহাদেশ নির্বাচন করার সুযোগ দেওয়া হয়েছে।
   • dcc.Slider: স্লাইডারের মাধ্যমে ইউজারকে একটি বছর নির্বাচন করতে দেয়া হয়েছে।
   • dcc.Graph: এখানে গ্রাফ প্রদর্শিত হবে, যা ইউজারের ইনপুটের ভিত্তিতে আপডেট হবে।
2. Callback:
   • @app.callback: এই ডেকোরেটরের মাধ্যমে, ইউজারের ইনপুট গ্রহণ করা হয় এবং গ্রাফের আপডেট করা হয়।
   • Input: continent-dropdown এবং year-slider থেকে ইউজারের ইনপুট নেওয়া হচ্ছে।
   • Output: গ্রাফের figure আপডেট হচ্ছে যা ইউজারের ইনপুটের ভিত্তিতে নতুন ডেটা দিয়ে তৈরি হচ্ছে।

১. Input Components: Dropdown, Slider, RadioItems

Dash এ বিভিন্ন ধরনের Input Components ব্যবহার করা যায় যেমন:

1. Dropdown: এক বা একাধিক বিকল্প নির্বাচন করার জন্য।
2. Slider: একটি নির্দিষ্ট রেঞ্জ থেকে মান নির্বাচন করার জন্য।
3. RadioItems: একাধিক বিকল্প থেকে একটি নির্বাচন করার জন্য।
4. Input: টেক্সট ইনপুট নেয়ার জন্য।

উদাহরণ: RadioItems এবং Input ব্যবহার

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
import pandas as pd

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

# ডেটাসেট
df = px.data.gapminder()

# Layout
app.layout = html.Div([
    html.H1("Interactive Dashboard with RadioItems and Input"),
    
    # RadioItems ব্যবহার করা
    dcc.RadioItems(
        id='continent-radio',
        options=[{'label': 'Africa', 'value': 'Africa'},
                 {'label': 'Americas', 'value': 'Americas'},
                 {'label': 'Asia', 'value': 'Asia'},
                 {'label': 'Europe', 'value': 'Europe'},
                 {'label': 'Oceania', 'value': 'Oceania'}],
        value='Asia'
    ),
    
    # Input: ইউজারের ইনপুট নেয়ার জন্য
    dcc.Input(id='year-input', type='number', value=2007),
    
    # গ্রাফ
    dcc.Graph(id='scatter-plot'),
])

# Callback ফাংশন
@app.callback(
    Output('scatter-plot', 'figure'),
    [Input('continent-radio', 'value'),
     Input('year-input', 'value')]
)
def update_graph(selected_continent, selected_year):
    # ডেটা ফিল্টার করা
    filtered_df = df[(df['continent'] == selected_continent) & (df['year'] == selected_year)]
    
    # Scatter plot তৈরি
    fig = go.Figure(go.Scatter(x=filtered_df['gdpPercap'], y=filtered_df['lifeExp'], mode='markers'))
    return fig

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

এখানে RadioItems এবং Input ব্যবহার করা হয়েছে যাতে ইউজার মহাদেশ এবং বছর নির্বাচন করতে পারে এবং গ্রাফ পরিবর্তিত হবে।

২. Handling Multiple Inputs

Dash আপনাকে Multiple Inputs পরিচালনা করতে সাহায্য করে, যেমন একাধিক Dropdown বা Slider। এর মাধ্যমে ইউজার বিভিন্ন কন্ট্রোল দিয়ে গ্রাফের ডেটা কাস্টমাইজ করতে পারেন।

উদাহরণ: Multiple Inputs Handling

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

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

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

# Layout
app.layout = html.Div([
    html.H1("Interactive Data Visualization with Multiple Inputs"),
    
    # Dropdowns: মহাদেশ এবং দেশের নির্বাচন
    dcc.Dropdown(id='continent-dropdown', options=[{'label': continent, 'value': continent} for continent in df['continent'].unique()], value='Asia'),
    dcc.Dropdown(id='country-dropdown'),
    
    # গ্রাফ
    dcc.Graph(id='life-exp-vs-gdp'),
])

# Callback: দুইটি ইনপুটের মাধ্যমে ডেটা আপডেট করা
@app.callback(
    Output('country-dropdown', 'options'),
    [Input('continent-dropdown', 'value')]
)
def set_country_options(selected_continent):
    countries = df[df['continent'] == selected_continent]['country'].unique()
    return [{'label': country, 'value': country} for country in countries]

@app.callback(
    Output('life-exp-vs-gdp', 'figure'),
    [Input('continent-dropdown', 'value'),
     Input('country-dropdown', 'value')]
)
def update_graph(selected_continent, selected_country):
    filtered_df = df[(df['continent'] == selected_continent) & (df['country'] == selected_country)]
    fig = px.scatter(filtered_df, x='gdpPercap', y='lifeExp', color='country', title=f"{selected_country} - {selected_continent}")
    return fig

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

এখানে, প্রথম Dropdown এ মহাদেশ এবং দ্বিতীয় Dropdown এ দেশের পছন্দ অনুযায়ী গ্রাফ পরিবর্তিত হচ্ছে।

সারাংশ

Plotly এবং Dash ফ্রেমওয়ার্ক ব্যবহার করে আপনি সহজেই User Input এবং Interaction এর মাধ্যমে ইন্টারেকটিভ Data Visualization তৈরি করতে পারেন। Dash তে Dropdown, Slider, Input, এবং RadioItems সহ বিভিন্ন কম্পোনেন্ট ব্যবহার করে ব্যবহারকারীকে ইনপুট দেয়ার সুযোগ দেয়া হয়, এবং সেই ইনপুট অনুযায়ী গ্রাফ আপডেট হয়। Dash ব্যবহার করে ডেটার বিশ্লেষণ ও ভিজুয়ালাইজেশন আরও সহজ এবং ইন্টারেকটিভ করা যায়।

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

এখানে আমরা dynamic এবং responsive ড্যাশবোর্ড ডিজাইন করার জন্য বিভিন্ন কৌশল আলোচনা করবো।

১. Dynamic Dashboard Design

একটি dynamic dashboard হল এমন একটি ড্যাশবোর্ড যা ইউজারের ইনপুটের উপর ভিত্তি করে বিভিন্ন উপাদান বা ডেটা আপডেট করে। Dash ফ্রেমওয়ার্কে Callbacks এবং Interactive Components ব্যবহার করে আপনি একটি ডাইনামিক ড্যাশবোর্ড তৈরি করতে পারেন। এই উপাদানগুলি ইন্টারেক্টিভ এবং রিয়েল-টাইম ডেটার জন্য কাজ করে।

১.১. Callbacks for Dynamic Interaction

Dash এর Callback ব্যবহার করে আপনি গ্রাফ, ড্রপডাউন, স্লাইডার ইত্যাদি ইন্টারেক্টিভ উপাদান আপডেট করতে পারেন। যখন ইউজার ড্রপডাউন বা স্লাইডার পরিবর্তন করে, তখন গ্রাফ বা অন্যান্য উপাদান রেন্ডার হয়।

উদাহরণ: Dynamic Scatter Plot with Dropdown

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

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

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

# Layout তৈরি করা
app.layout = html.Div([
    html.H1("Dynamic Dashboard"),
    
    # Dropdown কম্পোনেন্ট
    dcc.Dropdown(
        id='continent-dropdown',
        options=[{'label': continent, 'value': continent} for continent in df['continent'].unique()],
        value='Asia',  # Default value
        style={'width': '50%'}
    ),
    
    # গ্রাফ
    dcc.Graph(id='scatter-plot')
])

# Callback ফাংশন
@app.callback(
    Output('scatter-plot', 'figure'),
    [Input('continent-dropdown', 'value')]
)
def update_graph(selected_continent):
    filtered_df = df[df['continent'] == selected_continent]
    
    # Scatter plot তৈরি
    fig = px.scatter(filtered_df, x="gdpPercap", y="lifeExp", color="country", size="pop", log_x=True)
    
    return fig

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

এখানে, Dropdown ব্যবহার করে মহাদেশ নির্বাচন করা হচ্ছে এবং ইউজার যখন একটি মহাদেশ নির্বাচন করবে, তখন সেই মহাদেশের ডেটা গ্রাফে দেখানো হবে। এটি একটি ডাইনামিক ড্যাশবোর্ডের উদাহরণ।

২. Responsive Dashboard Design

একটি responsive dashboard হল এমন একটি ড্যাশবোর্ড যা বিভিন্ন ডিভাইস (যেমন মোবাইল, ট্যাবলেট, বা ডেস্কটপ) এবং স্ক্রীন সাইজ অনুযায়ী স্বয়ংক্রিয়ভাবে কনফিগার হয়। Dash ব্যবহার করে আপনি CSS এবং Layout কাস্টমাইজেশন দ্বারা এই রেসপন্সিভ ডিজাইন তৈরি করতে পারেন।

২.১. Responsive Layout using Dash

Dash-এ responsive design তৈরি করতে, আপনি CSS ব্যবহার করতে পারেন যা আপনার ড্যাশবোর্ডের উপাদানগুলো স্ক্রীন সাইজ অনুযায়ী অটো-অ্যাডজাস্ট করবে। Dash এর html.Div এর মাধ্যমে আমরা Flexbox বা Grid Layout ব্যবহার করে একটি রেসপন্সিভ লেআউট তৈরি করতে পারি।

উদাহরণ: Responsive Layout

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

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

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

# Layout তৈরি
app.layout = html.Div([
    html.H1("Responsive Dashboard", style={'textAlign': 'center'}),
    
    html.Div([
        # Dropdown কম্পোনেন্ট
        dcc.Dropdown(
            id='continent-dropdown',
            options=[{'label': continent, 'value': continent} for continent in df['continent'].unique()],
            value='Asia',
            style={'width': '50%', 'display': 'inline-block'}
        ),
        
        # গ্রাফ
        dcc.Graph(id='scatter-plot', style={'width': '100%'})
    ], style={'display': 'flex', 'flexDirection': 'row', 'justifyContent': 'center'})
])

# Callback ফাংশন
@app.callback(
    Output('scatter-plot', 'figure'),
    [Input('continent-dropdown', 'value')]
)
def update_graph(selected_continent):
    filtered_df = df[df['continent'] == selected_continent]
    
    # Scatter plot তৈরি
    fig = px.scatter(filtered_df, x="gdpPercap", y="lifeExp", color="country", size="pop", log_x=True)
    
    return fig

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

এখানে, Flexbox এর মাধ্যমে আমরা Dropdown এবং Graph-কে সুন্দরভাবে আলাইন করেছি, যাতে এটি ছোট স্ক্রীনেও সঠিকভাবে প্রদর্শিত হয়। style={'display': 'inline-block'} এবং style={'display': 'flex'} ব্যবহার করে আপনি অ্যাপের লেআউটকে রেসপন্সিভ এবং অটো-অ্যাডজাস্টেবল করতে পারেন।

২.২. CSS Media Queries for Responsiveness

Dash অ্যাপে CSS media queries ব্যবহার করে বিভিন্ন স্ক্রীনে গ্রাফের আকার কাস্টমাইজ করতে পারেন। এতে করে, আপনার ড্যাশবোর্ড ছোট স্ক্রীনে সঠিকভাবে ফিট হবে এবং বড় স্ক্রীনে আরও বিস্তৃত হয়ে থাকবে।

উদাহরণ: CSS Media Query ব্যবহার করা

# app.layout কোডের মধ্যে CSS যোগ করা:
app.layout = html.Div([
    html.H1("Responsive Dashboard", style={'textAlign': 'center'}),
    
    html.Div([
        # Dropdown এবং Graph
    ], style={'display': 'flex', 'flexDirection': 'row', 'justifyContent': 'center'})
], style={'padding': '10px', 'width': '100%'})

# CSS স্টাইলিং:
app.css.append_css({
    'external_url': 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'
})

এখানে CSS media queries ব্যবহার করে আপনি Dash অ্যাপের উপাদানগুলো স্ক্রীন সাইজ অনুযায়ী কাস্টমাইজ করতে পারেন, যেমন:

/* মোবাইল স্ক্রীনের জন্য */
@media only screen and (max-width: 600px) {
    .graph-container {
        width: 100%;
    }
}

/* ডেস্কটপ স্ক্রীনের জন্য */
@media only screen and (min-width: 601px) {
    .graph-container {
        width: 80%;
    }
}

এই CSS কোডটি আপনার অ্যাপকে মোবাইল এবং ডেস্কটপ স্ক্রীনে রেসপন্সিভ করবে।

৩. Dynamic and Responsive Dashboards for Real-time Data

Real-time ডেটা সহ ড্যাশবোর্ড ডিজাইন করার সময়, আপনাকে ডেটার আপডেট এবং ইউজারের ইন্টারঅ্যাকশনের উপর ভিত্তি করে অ্যাপ্লিকেশনকে রিয়েল-টাইমে রেন্ডার করতে হবে। Dash ফ্রেমওয়ার্কে Interval কম্পোনেন্ট এবং Callbacks ব্যবহৃত হয় যাতে ডেটার পরিবর্তন বা আপডেট গ্রাফে রিয়েল-টাইমে দেখানো যায়।

উদাহরণ: Real-time Data with Dynamic Dashboard

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import random

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

# Layout
app.layout = html.Div([
    html.H1("Real-time Dynamic Dashboard"),
    dcc.Graph(id='live-update-graph'),
    dcc.Interval(id='interval-component', interval=1000, n_intervals=0)  # প্রতি সেকেন্ডে ডেটা আপডেট
])

# Callback ফাংশন
@app.callback(
    Output('live-update-graph', 'figure'),
    [Input('interval-component', 'n_intervals')]
)
def update_graph(n):
    # ডেটা রিয়েল-টাইমে আপডেট করা
    x = list(range(n+1))
    y = [random.randint(1, 100) for _ in range(n+1)]
    
    # গ্রাফ তৈরি
    fig = go.Figure(data=[go.Scatter(x=x, y=y, mode='lines+markers')])
    return fig

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

এখানে, প্রতি সেকেন্ডে একটি random সংখ্যা আপডেট হচ্ছে এবং গ্রাফে প্রদর্শিত হচ্ছে।

সারাংশ

Dynamic এবং Responsive Dashboards তৈরি করতে Plotly এবং Dash একটি শক্তিশালী সমাধান। Dynamic Dashboard তৈরি করার জন্য Callbacks এবং Interactive Components ব্যবহার করা হয়, যা ইউজারের ইনপুট অনুযায়ী গ্রাফ বা অন্যান্য উপাদান আপডেট করে। Responsive Design তৈরি করার জন্য আপনি CSS এবং Flexbox/Grid Layout ব্যবহার করতে পারেন, যাতে আপনার ড্যাশবোর্ড বিভিন্ন ডিভাইসে স্বয়ংক্রিয়ভাবে মানানসই হয়। Real-time data visualization করতে আপনি Interval কম্পোনেন্ট ব্যবহার করতে পারেন, যাতে ডেটা লাইভ রেন্ডার হয়।