Dash হল একটি ওপেন সোর্স ফ্রেমওয়ার্ক যা Plotly দ্বারা তৈরি করা হয়েছে এবং এটি ইন্টারেক্টিভ ওয়েব অ্যাপ্লিকেশন তৈরির জন্য ব্যবহৃত হয়। Dash আপনাকে Plotly graphs ও Python এর কোড দিয়ে পূর্ণাঙ্গ ইন্টারেক্টিভ ড্যাশবোর্ড তৈরি করতে সাহায্য করে। Dash ব্যবহার করে আপনি সহজেই Plotly গ্রাফগুলো ইন্টারেক্টিভভাবে ওয়েব অ্যাপ্লিকেশনে সংযুক্ত করতে পারেন।
এই টিউটোরিয়ালে আমরা দেখবো কিভাবে Plotly graphs Dash অ্যাপ্লিকেশন দিয়ে ইন্টিগ্রেট করা যায়।
Dash এর মৌলিক ধারণা
Dash হলো একটি Python web framework যা মূলত Flask, Plotly, এবং React.js ব্যবহার করে। এটি ব্যবহারকারীদের একটি ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে যেখানে ডেটা ভিজুয়ালাইজেশন (Plotly graphs) এবং ইন্টারেক্টিভ কম্পোনেন্টগুলো (ড্রপডাউন, স্লাইডার, টেবিল ইত্যাদি) একত্রিত করা যায়।
Dash অ্যাপ্লিকেশন মূলত তিনটি অংশ নিয়ে তৈরি:
- Layout: গ্রাফ, ড্রপডাউন, স্লাইডার এবং অন্যান্য কম্পোনেন্টের কনটেইনার।
- Callbacks: ইন্টারেক্টিভিটি যোগ করা। এটি ড্যাশবোর্ডের বিভিন্ন কম্পোনেন্টের মধ্যে ডেটা পাস করে এবং একটি অ্যাকশন বা ইউজার ইন্টারঅ্যাকশনের পর গ্রাফ আপডেট করে।
- 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 প্ল্যাটফর্মটি খুবই শক্তিশালী এবং ব্যবহারকারীদের জন্য ইন্টারেক্টিভ ভিজুয়ালাইজেশন তৈরি করার জন্য একটি দুর্দান্ত টুল।
Read more
