Plotly এবং Dash Integration

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

এই দুটি প্ল্যাটফর্ম একত্রে ডেটা ভিজুয়ালাইজেশন এবং ইন্টারেকটিভ উপাদানগুলির জন্য শক্তিশালী সমাধান প্রদান করে। চলুন দেখে নেওয়া যাক Plotly এবং Dash এর ইন্টিগ্রেশন কীভাবে কাজ করে।

Plotly এবং Dash Integration কীভাবে কাজ করে?

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

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

Dash Application এর উদাহরণ

এখানে একটি উদাহরণ দেওয়া হয়েছে যেখানে Plotly গ্রাফ এবং Dash ইন্টারফেস একত্রে ব্যবহৃত হয়েছে।

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

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

# কিছু ডেটা তৈরি করা
df = pd.DataFrame({
    "Fruit": ["Apple", "Banana", "Cherry", "Date"],
    "Amount": [10, 20, 30, 40],
    "Price": [1, 2, 3, 4]
})

# Plotly গ্রাফ তৈরি
fig = px.bar(df, x="Fruit", y="Amount", title="Fruit Sales")

# Dash লেআউট
app.layout = html.Div([
    html.H1("Plotly and Dash Integration"),
    dcc.Graph(figure=fig)
])

# অ্যাপ চালু করা
if __name__ == "__main__":
    app.run_server(debug=True)

এই উদাহরণে:

1. Dash এর মাধ্যমে একটি সিম্পল ওয়েব অ্যাপ তৈরি করা হয়েছে।
2. Plotly Express ব্যবহার করে একটি বার গ্রাফ তৈরি করা হয়েছে।
3. গ্রাফটি Dash অ্যাপ্লিকেশনের মধ্যে dcc.Graph উপাদানের মাধ্যমে প্রদর্শিত হচ্ছে।

আপনি সহজেই Plotly গ্রাফকে Dash অ্যাপ্লিকেশনের ইন্টারফেসে এম্বেড করতে পারেন এবং এতে ইনপুট বা অন্যান্য ইন্টারেকটিভ উপাদান যুক্ত করতে পারেন।

Plotly এবং Dash Integration এর সুবিধা

1. ইন্টারেকটিভ ড্যাশবোর্ড: Plotly গ্রাফ এবং Dash ফ্রেমওয়ার্ক একত্রে ব্যবহার করে ইন্টারেকটিভ ড্যাশবোর্ড তৈরি করা যায়, যেখানে ব্যবহারকারীরা গ্রাফের ডেটা দেখতে, পরিবর্তন করতে বা বিশ্লেষণ করতে পারে।
2. Python ব্যাকএন্ড: Dash হল একটি Python-ভিত্তিক ফ্রেমওয়ার্ক, যা Python কোডের মাধ্যমে ওয়েব অ্যাপ তৈরি করা সম্ভব করে, ফলে ডেটা সায়েন্টিস্টরা নিজেদের পছন্দের লাইব্রেরি ব্যবহার করে দ্রুত ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারে।
3. কাস্টমাইজেশন: Dash এ আপনাকে সম্পূর্ণ কাস্টমাইজেবল উপাদান দেওয়া হয়, যেখানে আপনি HTML, CSS, এবং JavaScript কন্ট্রোল করতে পারেন। আপনি গ্রাফের আকার, রঙ এবং ফন্ট পরিবর্তন করতে পারেন।
4. অ্যাপ্লিকেশন ডেভেলপমেন্টের সহজতা: Dash আপনাকে কোনো ফ্রন্ট-এন্ড কোডিং ছাড়াই ইন্টারেকটিভ অ্যাপ তৈরি করতে সহায়তা করে, কারণ এটি Python এর সাথে নিবিড়ভাবে কাজ করে।

Dash Components

Dash অ্যাপ্লিকেশনে আপনি অনেক ধরনের components ব্যবহার করতে পারেন, যেমন:

• dcc.Graph: Plotly গ্রাফ প্রদর্শনের জন্য।
• dcc.Slider: ইন্টারেকটিভ স্লাইডার।
• dcc.Dropdown: ড্রপডাউন মেনু।
• html.Div: HTML উপাদান গ্রুপিং।

এটি আপনাকে বিভিন্ন ইন্টারফেস তৈরি করতে সহায়তা করে, যেমন ড্রপডাউন মেনু, স্লাইডার, ইন্টারেকটিভ চার্ট, টেবিল ইত্যাদি, যা ব্যবহারকারীর ইন্টারঅ্যাকশনকে আরও সহজ ও আকর্ষণীয় করে তোলে।

Dash এবং Plotly এর মধ্যে পার্থক্য

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

সারাংশ

Plotly এবং Dash একসাথে ব্যবহৃত হলে একটি শক্তিশালী টুল হয়ে দাঁড়ায় ডেটা ভিজুয়ালাইজেশন এবং ইন্টারেকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য। Plotly গ্রাফ তৈরি করতে ব্যবহৃত হয়, এবং Dash এটি ওয়েব অ্যাপ্লিকেশনে রূপান্তর করতে সাহায্য করে। Dash ব্যবহারকারীদের HTML, CSS, এবং JavaScript এর মাধ্যমে কাস্টম ইন্টারফেস তৈরি করার সুবিধা প্রদান করে, এবং এটি Python ডেভেলপারদের জন্য অত্যন্ত সহজ একটি সমাধান।

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

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

Dash ফ্রেমওয়ার্ক তিনটি মূল উপাদানের মাধ্যমে কাজ করে:

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

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

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

Dash Dashboard উদাহরণ

এখানে আমরা Plotly দিয়ে একটি গ্রাফ তৈরি করব এবং Dash দিয়ে একটি ইন্টারেক্টিভ ড্যাশবোর্ড তৈরি করব।

1. Dash এবং Plotly ইনস্টল করা

প্রথমে Dash এবং Plotly ইনস্টল করতে হবে:

pip install dash plotly

2. Dash App তৈরি করা

এখন আমরা একটি Dash অ্যাপ তৈরি করব যেখানে একটি গ্রাফ এবং একটি ড্রপডাউন থাকবে।

import dash
from dash import dcc, html
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("Interactive Dashboard with Dash and Plotly"),
    
    # ড্রপডাউন তৈরি করা
    dcc.Dropdown(
        id='continent-dropdown',
        options=[{'label': continent, 'value': continent} for continent in df['continent'].unique()],
        value='Asia',  # Default value
        style={'width': '50%'}
    ),
    
    # গ্রাফ প্লট করার জন্য Div
    dcc.Graph(id='life-exp-vs-gdp'),
])

# Dash Callback দিয়ে গ্রাফ আপডেট করা
@app.callback(
    dash.dependencies.Output('life-exp-vs-gdp', 'figure'),
    [dash.dependencies.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, title=f"Life Expectancy vs GDP per Capita ({selected_continent})")
    
    return fig

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

ব্যাখ্যা:

• Dash App Layout: এখানে আমরা একটি হেডিং (HTML), একটি ড্রপডাউন (dropdown) এবং একটি গ্রাফ (graph) রেখেছি।
• Dash Callback: @app.callback ডেকোরেটরের মাধ্যমে আমরা ড্রপডাউন থেকে নির্বাচিত মহাদেশের উপর ভিত্তি করে গ্রাফ আপডেট করার জন্য একটি ফাংশন তৈরি করেছি।
• Graph: ড্রপডাউন থেকে নির্বাচিত মহাদেশের ডেটার উপর একটি scatter plot তৈরি করা হয়েছে, যেখানে gdpPercap এবং lifeExp এর মধ্যে সম্পর্ক দেখানো হচ্ছে।

Dash Dashboard কাস্টমাইজ করা

Dash দিয়ে আপনি আপনার ড্যাশবোর্ডের উপাদান কাস্টমাইজ করতে পারেন, যেমন স্টাইলিং, আরো ইন্টারেক্টিভ উপাদান যোগ করা, বা আরও জটিল কলব্যাক ফাংশন তৈরি করা।

১. ইনপুট এবং আউটপুট কাস্টমাইজ করা

আপনি Dash এর মাধ্যমে আরো ইন্টারেক্টিভ উপাদান যোগ করতে পারেন, যেমন Sliders, Input Boxes, Radio Items ইত্যাদি।

app.layout = html.Div([
    html.H1("Interactive Dashboard with Dash and Plotly"),
    
    # স্লাইডার যোগ করা
    dcc.Slider(
        id='year-slider',
        min=df['year'].min(),
        max=df['year'].max(),
        step=1,
        value=df['year'].min(),
        marks={year: str(year) for year in range(df['year'].min(), df['year'].max()+1, 5)}
    ),
    
    # গ্রাফ প্লট করার জন্য Div
    dcc.Graph(id='life-exp-vs-gdp'),
])

@app.callback(
    dash.dependencies.Output('life-exp-vs-gdp', 'figure'),
    [dash.dependencies.Input('year-slider', 'value')]
)
def update_graph(selected_year):
    filtered_df = df[df['year'] == selected_year]
    
    # Scatter Plot তৈরি করা
    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_year})")
    
    return fig

এখানে আমরা Slider যোগ করেছি যা ব্যবহারকারীকে একটি নির্দিষ্ট বছরের ডেটা দেখতে সাহায্য করবে। Callback ফাংশনে এই স্লাইডারের মান অনুযায়ী গ্রাফ আপডেট হবে।

২. ড্যাশবোর্ডে গ্রাফ কাস্টমাইজেশন

গ্রাফের স্টাইল এবং লেআউট কাস্টমাইজ করতে update_layout ফাংশন ব্যবহার করা হয়:

fig.update_layout(
    title='Customized Title',
    xaxis_title='GDP per Capita',
    yaxis_title='Life Expectancy',
    font=dict(family='Arial', size=12, color='black')
)

Dash অ্যাপ্লিকেশন ডিপ্লয় করা

যদি আপনি আপনার ড্যাশবোর্ডটি ক্লাউডে ডিপ্লয় করতে চান, আপনি Heroku বা Dash Deployment Server ব্যবহার করতে পারেন।

1. Heroku: Dash অ্যাপ Heroku তে ডিপ্লয় করার জন্য আপনার কোড এবং প্রোজেক্ট ফাইলগুলিকে একটি Git রিপোজিটরিতে পুশ করতে হবে, এবং তারপর Heroku এর মাধ্যমে সেটি ডিপ্লয় করা যাবে।
2. Dash Deployment Server: Dash অফিশিয়াল ডিপ্লয়মেন্ট সার্ভিস ব্যবহার করে আপনি সহজেই Dash অ্যাপস ডিপ্লয় করতে পারেন।

সারাংশ

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

Dash হল একটি ওপেন সোর্স ফ্রেমওয়ার্ক যা Plotly দ্বারা তৈরি করা হয়েছে এবং এটি ইন্টারেক্টিভ ওয়েব অ্যাপ্লিকেশন তৈরির জন্য ব্যবহৃত হয়। Dash আপনাকে Plotly graphs ও Python এর কোড দিয়ে পূর্ণাঙ্গ ইন্টারেক্টিভ ড্যাশবোর্ড তৈরি করতে সাহায্য করে। Dash ব্যবহার করে আপনি সহজেই Plotly গ্রাফগুলো ইন্টারেক্টিভভাবে ওয়েব অ্যাপ্লিকেশনে সংযুক্ত করতে পারেন।

এই টিউটোরিয়ালে আমরা দেখবো কিভাবে Plotly graphs Dash অ্যাপ্লিকেশন দিয়ে ইন্টিগ্রেট করা যায়।

Dash এর মৌলিক ধারণা

Dash হলো একটি Python web framework যা মূলত Flask, Plotly, এবং React.js ব্যবহার করে। এটি ব্যবহারকারীদের একটি ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে যেখানে ডেটা ভিজুয়ালাইজেশন (Plotly graphs) এবং ইন্টারেক্টিভ কম্পোনেন্টগুলো (ড্রপডাউন, স্লাইডার, টেবিল ইত্যাদি) একত্রিত করা যায়।

Dash অ্যাপ্লিকেশন মূলত তিনটি অংশ নিয়ে তৈরি:

1. Layout: গ্রাফ, ড্রপডাউন, স্লাইডার এবং অন্যান্য কম্পোনেন্টের কনটেইনার।
2. Callbacks: ইন্টারেক্টিভিটি যোগ করা। এটি ড্যাশবোর্ডের বিভিন্ন কম্পোনেন্টের মধ্যে ডেটা পাস করে এবং একটি অ্যাকশন বা ইউজার ইন্টারঅ্যাকশনের পর গ্রাফ আপডেট করে।
3. Server: ওয়েব অ্যাপ্লিকেশন চালানো।

Dash অ্যাপ্লিকেশন তৈরি এবং Plotly Graph Integration

১. Dash ইনস্টল করা

প্রথমে Dash এবং Plotly ইনস্টল করতে হবে। এটি করতে টার্মিনালে নিচের কমান্ডটি ব্যবহার করুন:

pip install dash plotly

২. Dash অ্যাপ্লিকেশন তৈরি এবং Plotly Graph সংযুক্ত করা

নিচে একটি Dash অ্যাপ্লিকেশন তৈরির উদাহরণ দেওয়া হলো, যেখানে Plotly গ্রাফ সংযুক্ত করা হয়েছে।

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

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

# Plotly গ্রাফ তৈরি
df = px.data.gapminder()  # উদাহরণ ডেটাসেট
fig = px.scatter(df, x="gdpPercap", y="lifeExp", color="continent", size="pop", hover_name="country", log_x=True)

# অ্যাপ্লিকেশনের লেআউট
app.layout = html.Div([
    html.H1("Plotly Graph Integration with Dash"),
    dcc.Graph(
        id='scatter-plot',
        figure=fig  # Plotly গ্রাফ সংযুক্ত করা
    )
])

# সার্ভার চালানো
if __name__ == '__main__':
    app.run_server(debug=True)

ব্যাখ্যা:

• Dash অ্যাপ্লিকেশন তৈরি: dash.Dash() এর মাধ্যমে একটি Dash অ্যাপ তৈরি করা হয়েছে।
• Plotly গ্রাফ তৈরি: Plotly এর px.scatter দিয়ে একটি scatter plot তৈরি করা হয়েছে, যা df (gapminder ডেটাসেট) থেকে বিভিন্ন ভেরিয়েবল ব্যবহার করে গ্রাফ তৈরি করেছে।
• Layout: html.Div এবং dcc.Graph ব্যবহার করে ওয়েব পেজের লেআউট তৈরি করা হয়েছে, যেখানে Plotly গ্রাফটি figure আর্গুমেন্টে প্রদান করা হয়েছে।
• Server: app.run_server(debug=True) দিয়ে Dash অ্যাপ্লিকেশন চালানো হয়েছে।

এই কোড রান করলে, ওয়েব ব্রাউজারে Plotly গ্রাফটি দেখতে পারবেন।

Dash Callback এর মাধ্যমে Interactive Plotly Graph

Dash এর শক্তিশালী ফিচার হল Callbacks, যা আপনাকে ইউজার ইন্টারঅ্যাকশন অনুযায়ী গ্রাফ আপডেট করতে দেয়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি Dropdown কম্পোনেন্ট ব্যবহার করে ইউজারের নির্বাচনের ভিত্তিতে Plotly গ্রাফ আপডেট করা হয়েছে।

উদাহরণ: Dropdown এবং Plotly Graph Integration

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()

# অ্যাপ্লিকেশনের লেআউট
app.layout = html.Div([
    html.H1("Interactive Plotly Graph with Dash"),
    
    # Dropdown কম্পোনেন্ট
    dcc.Dropdown(
        id='continent-dropdown',
        options=[{'label': continent, 'value': continent} for continent in df['continent'].unique()],
        value='Asia',  # Default value
        multi=False  # Multiple selection off
    ),
    
    # Plotly গ্রাফ কম্পোনেন্ট
    dcc.Graph(id='scatter-plot')
])

# Callback function - Dropdown এর মান পরিবর্তিত হলে গ্রাফ আপডেট হবে
@app.callback(
    Output('scatter-plot', 'figure'),
    [Input('continent-dropdown', 'value')]
)
def update_graph(selected_continent):
    filtered_df = df[df['continent'] == selected_continent]  # ইউজারের নির্বাচিত মহাদেশ অনুযায়ী ফিল্টার করা
    fig = px.scatter(filtered_df, x="gdpPercap", y="lifeExp", color="continent", size="pop", hover_name="country", log_x=True)
    return fig

# সার্ভার চালানো
if __name__ == '__main__':
    app.run_server(debug=True)

ব্যাখ্যা:

• Dropdown: একটি ড্রপডাউন কম্পোনেন্ট তৈরি করা হয়েছে যা মহাদেশের নাম প্রদান করবে (এখানে Asia, Europe, ইত্যাদি)।
• Callback: @app.callback ডেকোরেটর ব্যবহার করে আমরা Input (ড্রপডাউন নির্বাচন) এবং Output (গ্রাফের আপডেট) সংযোগ করেছি। যখন ড্রপডাউনের মান পরিবর্তিত হবে, তখন গ্রাফটি আপডেট হবে।
• Filtered Data: ইউজারের নির্বাচিত মহাদেশের ভিত্তিতে ডেটা ফিল্টার করা হচ্ছে এবং সেই অনুযায়ী নতুন Plotly গ্রাফ তৈরি হচ্ছে।

Dash অ্যাপ্লিকেশনে আরও ইন্টারেক্টিভ কম্পোনেন্ট যোগ করা

Dash তে আপনি আরো অনেক ইন্টারেক্টিভ কম্পোনেন্ট যেমন Sliders, Date Pickers, Buttons ইত্যাদি ব্যবহার করতে পারেন। এগুলোর মাধ্যমে ব্যবহারকারী ডেটার উপর নিয়ন্ত্রণ রাখতে পারেন এবং ড্যাশবোর্ডকে আরও ইন্টারেক্টিভ ও ডাইনামিক করে তুলতে পারেন।

উদাহরণ: Slider দিয়ে গ্রাফ পরিবর্তন

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()

# অ্যাপ্লিকেশনের লেআউট
app.layout = html.Div([
    html.H1("Interactive Plotly Graph with Dash - Slider Example"),
    
    # Slider কম্পোনেন্ট
    dcc.Slider(
        id='year-slider',
        min=df['year'].min(),
        max=df['year'].max(),
        step=1,
        value=df['year'].min(),
        marks={year: str(year) for year in df['year'].unique()},
    ),
    
    # Plotly গ্রাফ কম্পোনেন্ট
    dcc.Graph(id='scatter-plot')
])

# Callback function - Slider এর মান পরিবর্তিত হলে গ্রাফ আপডেট হবে
@app.callback(
    Output('scatter-plot', 'figure'),
    [Input('year-slider', 'value')]
)
def update_graph(selected_year):
    filtered_df = df[df['year'] == selected_year]  # ইউজারের নির্বাচিত বছর অনুযায়ী ফিল্টার করা
    fig = px.scatter(filtered_df, x="gdpPercap", y="lifeExp", color="continent", size="pop", hover_name="country", log_x=True)
    return fig

# সার্ভার চালানো
if __name__ == '__main__':
    app.run_server(debug=True)

ব্যাখ্যা:

• Slider: একটি স্লাইডার কম্পোনেন্ট যোগ করা হয়েছে, যা বছরের মধ্যে স্লাইড করার মাধ্যমে গ্রাফের ডেটা পরিবর্তন করবে।
• Callback: স্লাইডারের মান অনুযায়ী গ্রাফের ডেটা আপডেট হবে।

সারাংশ

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

Plotly-তে Callback Functions ব্যবহার করে আপনি real-time data interaction তৈরি করতে পারেন। Callback functions ব্যবহার করার মাধ্যমে আপনি ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে ডেটার ভিজুয়ালাইজেশন পরিবর্তন করতে পারবেন। এটি সাধারণত Dash ফ্রেমওয়ার্কের মাধ্যমে করা হয়, যা Plotly এর একটি শক্তিশালী টুল। Dash প্ল্যাটফর্ম ব্যবহার করে আপনি ইন্টারেকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন, যেখানে ব্যবহারকারী বিভিন্ন ইনপুট ফিল্ডের মাধ্যমে ডেটার ভিজুয়ালাইজেশন কাস্টমাইজ করতে পারে।

Dash ফ্রেমওয়ার্কের মাধ্যমে Callback Functions ব্যবহার

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

Dash ইনস্টলেশন

pip install dash

Callback Functions এর মাধ্যমে Real-time Data Interaction

Dash-এ callback functions ব্যবহার করে বিভিন্ন ইনপুট এবং আউটপুটের মধ্যে ইন্টারেকশন তৈরি করা হয়। এটি মূলত Input এবং Output ডেকোরেটরের মাধ্যমে কাজ করে। Dash অ্যাপ্লিকেশন কেবলমাত্র যখন ইনপুট পরিবর্তিত হয়, তখন আউটপুট আপডেট হয়।

Dash Callback Function এর উদাহরণ

এখানে একটি Dash অ্যাপ্লিকেশন তৈরি করা হয়েছে যা ব্যবহারকারীর ইনপুটের মাধ্যমে একটি গ্রাফ আপডেট করবে। ব্যবহারকারী slider এর মাধ্যমে ডেটার রেঞ্জ পরিবর্তন করতে পারবে এবং সেই অনুযায়ী গ্রাফ আপডেট হবে।

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__)

# উদাহরণ ডেটাসেট (Plotly-র ভিতর থেকে)
df = px.data.gapminder()

# অ্যাপ্লিকেশন লেআউট
app.layout = html.Div([
    html.H1("Interactive Scatter Plot"),
    
    # Slider: ডেটা পয়েন্টের বছর নির্বাচন করা
    dcc.Slider(
        id='year-slider',
        min=df['year'].min(),
        max=df['year'].max(),
        step=5,
        marks={year: str(year) for year in range(int(df['year'].min()), int(df['year'].max())+1, 5)},
        value=df['year'].min()
    ),
    
    # গ্রাফ দেখানোর জন্য
    dcc.Graph(id='scatter-plot')
])

# Callback Function: ইনপুট হিসেবে বছর নিয়ে আউটপুট হিসেবে গ্রাফ আপডেট করা
@app.callback(
    Output('scatter-plot', 'figure'),
    [Input('year-slider', 'value')]
)
def update_figure(selected_year):
    # নির্বাচিত বছর অনুযায়ী ডেটা ফিল্টার করা
    filtered_df = df[df['year'] == selected_year]
    
    # Scatter Plot তৈরি করা
    fig = px.scatter(filtered_df, x="gdpPercap", y="lifeExp", color="continent", size="pop",
                     hover_name="country", log_x=True, title=f"Year: {selected_year}")
    return fig

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

এখানে:

• dcc.Slider: এই উপাদানটি ব্যবহারকারীকে বছর নির্বাচন করতে দেয়।
• Callback function: ব্যবহারকারী year-slider এর মাধ্যমে একটি বছর নির্বাচন করলে, সেই বছর অনুযায়ী ডেটা ফিল্টার হয়ে Scatter Plot আপডেট হবে।
• Input: Input('year-slider', 'value') ব্যবহারকারীর নির্বাচিত বছর।
• Output: Output('scatter-plot', 'figure') গ্রাফের আউটপুট।

এভাবে, ব্যবহারকারীর নির্বাচনের উপর ভিত্তি করে গ্রাফের ভ্যালু আপডেট হবে এবং এটি একটি real-time interaction তৈরি করবে।

Callback Functions দিয়ে আরো ইন্টারেকটিভ ফিচার

• Multiple Inputs and Outputs: একাধিক ইনপুট এবং আউটপুটও সমর্থিত, যেখানে একাধিক ইনপুটের ভিত্তিতে একাধিক আউটপুট আপডেট করা যায়।
• Multiple Callback Functions: আপনি একাধিক callback function দিয়ে একাধিক উপাদানকে ইন্টারেক্টিভ করতে পারেন।
• Dynamic Updates: Dash-এ গ্রাফ, টেবিল, বা অন্য যে কোনও উপাদানকে একে অপরের সাথে ইন্টারেক্টিভভাবে আপডেট করা যায়।

সারাংশ

Dash এর মাধ্যমে callback functions ব্যবহার করে আপনি real-time data interaction তৈরি করতে পারেন, যা ব্যবহারকারীকে ইন্টারেক্টিভ ওয়েব অ্যাপ্লিকেশনে ডেটার ভিজুয়ালাইজেশন কাস্টমাইজ করার সুযোগ দেয়। এই ফিচারের মাধ্যমে আপনি গ্রাফ, চার্ট, বা অন্যান্য উপাদানকে ডাইনামিকভাবে আপডেট করতে পারবেন এবং ব্যবহারকারীর ইনপুটের ভিত্তিতে ডেটা পরিবর্তন করতে সক্ষম হবেন। Dash ফ্রেমওয়ার্ক ব্যবহার করে ইন্টারেকটিভ অ্যাপ্লিকেশন তৈরি করা সহজ এবং কার্যকর।

Dash হল Plotly দ্বারা তৈরি একটি Python ফ্রেমওয়ার্ক, যা ইন্টারেকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। Dash ব্যবহার করে আপনি Plotly গ্রাফের সাথে কাস্টম লেআউট এবং ইন্টারেকটিভ উপাদান (components) যুক্ত করতে পারেন, যেমন ড্রপডাউন, স্লাইডার, বোতাম এবং আরও অনেক কিছু। Dash এর সাহায্যে আপনি সহজেই web-based dashboards এবং data visualization apps তৈরি করতে পারেন।

Dash এর উপাদান

Dash অ্যাপ্লিকেশন সাধারণত দুটি অংশে বিভক্ত থাকে:

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

Dash Layout এবং Components এর উদাহরণ

নিচে একটি Dash অ্যাপ্লিকেশন তৈরির উদাহরণ দেওয়া হলো যেখানে একটি Scatter Plot ব্যবহার করা হয়েছে, এবং একটি Dropdown এবং Slider দিয়ে ইন্টারেকটিভ কন্ট্রোল যুক্ত করা হয়েছে।

উদাহরণ: Dash অ্যাপ্লিকেশন তৈরি করা

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

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

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

# Layout তৈরি করা
app.layout = html.Div([
    # টাইটেল
    html.H1("Gapminder Data Visualization"),
    
    # ড্রপডাউন কম্পোনেন্ট
    dcc.Dropdown(
        id='continent-dropdown',
        options=[
            {'label': 'Africa', 'value': 'Africa'},
            {'label': 'Americas', 'value': 'Americas'},
            {'label': 'Asia', 'value': 'Asia'},
            {'label': 'Europe', 'value': 'Europe'},
            {'label': 'Oceania', 'value': 'Oceania'}
        ],
        value='Asia'  # ডিফল্ট মান
    ),
    
    # স্লাইডার কম্পোনেন্ট
    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(int(df['year'].min()), int(df['year'].max())+1, 5)},
        step=1
    ),
    
    # গ্রাফ
    dcc.Graph(id='scatter-plot')
])

# Callback ফাংশন
@app.callback(
    Output('scatter-plot', '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", hover_name="country", log_x=True, title=f"{selected_continent} - {selected_year}")
    
    return fig

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

ব্যাখ্যা:

1. Layout:
   • html.Div: Dash অ্যাপ্লিকেশনের মূল কন্টেইনার। এখানে আমরা ড্রপডাউন, স্লাইডার, এবং গ্রাফ উপাদানগুলো রাখতে পারি।
   • html.H1: টাইটেল প্রদর্শন করা।
   • dcc.Dropdown: একটি ড্রপডাউন উইজেট, যার মাধ্যমে ইউজার মহাদেশ নির্বাচন করতে পারেন।
   • dcc.Slider: একটি স্লাইডার উইজেট, যার মাধ্যমে ইউজার বছর নির্বাচন করতে পারেন।
   • dcc.Graph: এখানে গ্রাফ বা চিত্র প্রদর্শিত হবে।
2. Components:
   • Dropdown: dcc.Dropdown ব্যবহার করে আমরা ইউজারের জন্য একটি ড্রপডাউন তৈরি করেছি, যার মাধ্যমে তারা মহাদেশ নির্বাচন করতে পারে।
   • Slider: dcc.Slider ব্যবহার করে আমরা ইউজারকে বছরের স্লাইডার দিয়ে নির্বাচন করার সুযোগ দিয়েছি।
   • Graph: dcc.Graph ব্যবহার করে আমরা গ্রাফ প্রদর্শন করি যা Plotly গ্রাফের সাহায্যে ইন্টারেকটিভ।
3. Callback:
   • @app.callback: এই ফাংশনটি Dash অ্যাপ্লিকেশনে ইন্টারেক্টিভিটি যোগ করে। এটি ইউজারের ইনপুটের ভিত্তিতে গ্রাফকে রেন্ডার করে। এখানে দুটি ইনপুট (Dropdown এবং Slider) এবং একটি আউটপুট (Graph) রয়েছে।
   • Input: ইউজারের নির্বাচিত মান নেয়।
   • Output: গ্রাফের ফিগার আপডেট করে।

Dash এর অন্যান্য Components

Dash আরও অনেক ইন্টারেকটিভ কম্পোনেন্ট প্রদান করে যা আপনার অ্যাপ্লিকেশনের লেআউটকে আরও উন্নত এবং ইউজার-বান্ধব করে তুলতে সাহায্য করে। এর মধ্যে রয়েছে:

• dcc.Graph: প্লটলি গ্রাফ এবং চিত্র প্রদর্শন করতে ব্যবহৃত হয়।
• dcc.Dropdown: একটি ড্রপডাউন উইজেট যা ইউজারের পছন্দ নির্বাচনের জন্য ব্যবহৃত হয়।
• dcc.Slider: স্লাইডার উইজেট যা একটি রেঞ্জ থেকে মান নির্বাচন করতে ব্যবহৃত হয়।
• dcc.Input: ইনপুট ফিল্ড যেখানে ইউজার টেক্সট বা নম্বর ইনপুট করতে পারে।
• dcc.Checklist: একাধিক বিকল্প নির্বাচন করার জন্য একটি চেকলিস্ট।
• dcc.RadioItems: একাধিক বিকল্প থেকে একটি নির্বাচন করার জন্য রেডিও বোতাম।
• html.Div: HTML ট্যাগের মতো সাধারণ কন্টেইনার যা লেআউট ডিজাইন করতে ব্যবহৃত হয়।

Dash এর জন্য লেআউট কাস্টমাইজেশন

Dash এর মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের লেআউট সহজেই কাস্টমাইজ করতে পারেন। আপনি CSS ব্যবহার করে অ্যাপের ডিজাইন এবং লেআউট স্টাইল করতে পারেন, যেমন:

• কলাম, গ্রিড, মার্জিন, প্যাডিং, ফন্ট স্টাইল ইত্যাদি কাস্টমাইজ করা।
• Responsive Design তৈরি করা, যাতে অ্যাপটি বিভিন্ন ডিভাইসে সঠিকভাবে প্রদর্শিত হয়।

সারাংশ

Plotly তে Dash একটি শক্তিশালী ফ্রেমওয়ার্ক যা আপনাকে ইন্টারেকটিভ ওয়েব অ্যাপ্লিকেশন এবং ডেটা ভিজুয়ালাইজেশন তৈরি করতে সাহায্য করে। Dash এর মাধ্যমে আপনি Plotly গ্রাফের সাথে লেআউট এবং বিভিন্ন ইন্টারেকটিভ কম্পোনেন্ট (যেমন Dropdown, Slider, Button, Graph) যোগ করতে পারেন, যা আপনার অ্যাপ্লিকেশনকে আরও ইউজার-বান্ধব এবং ডাইনামিক করে তোলে। Dash ব্যবহার করে আপনি খুব সহজেই ড্যাশবোর্ড এবং ডেটা-ভিত্তিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন।