Plotly তে গ্রাফ এবং চার্টে ইন্টারেক্টিভ ফিচার যোগ করা অনেক সহজ। ইন্টারেকটিভ ফিচারগুলোর মাধ্যমে ব্যবহারকারীরা গ্রাফের সাথে সরাসরি ইন্টারঅ্যাক্ট করতে পারে, যেমন: ডাটা পয়েন্টের উপর মাউস হভার করা, জুম ইন বা আউট করা, অথবা টুলটিপ প্রদর্শন করা। এই ইন্টারেকটিভ ফিচারগুলো ব্যবহারকারীকে আরও গভীরভাবে ডেটা বিশ্লেষণ করতে সহায়তা করে।
১. Hover (হোভার)
Hover ফিচারটি ব্যবহারকারীদের গ্রাফের উপরে মাউস রাখলে অতিরিক্ত তথ্য প্রদর্শন করতে সক্ষম করে। Plotly তে এটি hoverinfo প্যারামিটার দিয়ে কাস্টমাইজ করা যায়।
import plotly.graph_objects as go
# ডেটা সেট
x_data = [1, 2, 3, 4, 5]
y_data = [10, 11, 12, 13, 14]
# প্লট তৈরি
fig = go.Figure(data=[go.Scatter(x=x_data, y=y_data, mode='markers',
hoverinfo='x+y+text',
text=['A', 'B', 'C', 'D', 'E'])])
fig.show()
এই উদাহরণে, যখন আপনি প্রতিটি ডেটা পয়েন্টের উপরে মাউস রাখবেন, তখন আপনি x এবং y মান সহ "A", "B", "C", "D", "E" টেক্সট দেখতে পাবেন।
২. Zooming (জুমিং)
Plotly তে গ্রাফের উপর জুম ইন বা আউট করার ফিচার ডিফল্টভাবে সক্রিয় থাকে। ব্যবহারকারী গ্রাফের অংশে ক্লিক করে বা ড্র্যাগ করে জুম ইন করতে পারেন। আপনি এই ফিচারটি কাস্টমাইজও করতে পারেন, যেমন শুধুমাত্র এক্স বা ওয়াই অক্ষরের জন্য জুম সক্রিয় করা।
fig.update_layout(
xaxis=dict(
rangeslider=dict(visible=True) # এক্স অক্ষরে রেঞ্জ স্লাইডার যোগ করা
)
)
এটি x অক্ষরের জন্য একটি রেঞ্জ স্লাইডার যুক্ত করবে, যার মাধ্যমে ব্যবহারকারী x অক্ষরের সীমা পরিবর্তন করতে পারবেন।
৩. Annotations (এনোটেশন)
Plotly তে গ্রাফে বিশেষ তথ্য যোগ করতে এনোটেশন ব্যবহার করা হয়। এটি গ্রাফের নির্দিষ্ট পয়েন্ট বা অঞ্চলে ব্যবহারকারীকে কাস্টম তথ্য দেখানোর জন্য উপকারী।
fig.update_layout(
annotations=[
dict(
x=3,
y=12,
xref='x',
yref='y',
text='Peak',
showarrow=True,
arrowhead=2,
ax=0,
ay=-40
)
]
)
এটি (3, 12) পয়েন্টে একটি টেক্সট "Peak" সহ একটি তীর (arrow) প্রদর্শন করবে।
৪. Buttons for Interaction (ইন্টারঅ্যাকশনের জন্য বাটন)
Plotly তে গ্রাফের উপর বিভিন্ন ইন্টারঅ্যাকশন পরিচালনা করার জন্য বাটন যোগ করা যেতে পারে, যেমন গ্রাফের ধরন পরিবর্তন করা বা অন্য কোনো ফিল্টার প্রয়োগ করা।
fig.update_layout(
updatemenus=[dict(
type="buttons",
x=0.1,
xanchor="left",
y=1.15,
yanchor="top",
buttons=[dict(label="Show Scatter", method="relayout", args=[{"mode":"markers"}]),
dict(label="Show Line", method="relayout", args=[{"mode":"lines"}])
]
)]
)
এটি একটি বাটন যোগ করবে যা ব্যবহারকারীকে "Show Scatter" বা "Show Line" নির্বাচন করার মাধ্যমে গ্রাফের ধরন পরিবর্তন করার সুবিধা দেবে।
৫. Range Sliders (রেঞ্জ স্লাইডার)
Plotly তে রেঞ্জ স্লাইডার ব্যবহারকারীদের গ্রাফের এক্স বা ওয়াই অক্ষরের ভ্যালু পরিবর্তন করতে সাহায্য করে, যাতে তারা নির্দিষ্ট অংশে ডেটা বিশ্লেষণ করতে পারেন।
fig.update_layout(
xaxis=dict(
rangeslider=dict(visible=True), # রেঞ্জ স্লাইডার যোগ করা
type="linear"
)
)
এই কোডটি x অক্ষরে একটি রেঞ্জ স্লাইডার যোগ করবে, যার মাধ্যমে ব্যবহারকারী ডেটার একটি নির্দিষ্ট রেঞ্জ দেখতে পারবেন।
৬. Interactivity with Dashboards (ড্যাশবোর্ডের সাথে ইন্টারঅ্যাকশন)
Plotly এর Dash ফ্রেমওয়ার্ক ব্যবহার করে আপনি ইন্টারেকটিভ ড্যাশবোর্ড তৈরি করতে পারেন, যেখানে ব্যবহারকারীরা বিভিন্ন কন্ট্রোলের মাধ্যমে গ্রাফের ভিউ পরিবর্তন করতে পারেন, যেমন ড্রপডাউন মেনু, স্লাইডার, বা ইনপুট বক্স।
import dash
from dash import dcc, html
import plotly.graph_objects as go
# Dash অ্যাপ্লিকেশন তৈরি
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Graph(
id='interactive-plot',
figure=fig
),
dcc.Slider(
id='slider',
min=0,
max=5,
step=1,
value=2,
marks={i: str(i) for i in range(6)}
)
])
if __name__ == '__main__':
app.run_server(debug=True)
এটি Dash ব্যবহার করে একটি স্লাইডার এবং গ্রাফ তৈরি করবে, যেখানে স্লাইডার পরিবর্তন করলে গ্রাফের ডেটা আপডেট হবে।
সারাংশ
Plotly তে ইন্টারেকটিভ ফিচার যোগ করা খুবই সহজ এবং এর মাধ্যমে আপনি আপনার গ্রাফ বা ড্যাশবোর্ডকে আরও ব্যবহারকারী-বান্ধব এবং আকর্ষণীয় করতে পারেন। হোভার, জুমিং, এনোটেশন, বাটন, রেঞ্জ স্লাইডার এবং ড্যাশবোর্ডের মাধ্যমে প্লটের ইন্টারেকশনকে আরও শক্তিশালী করা সম্ভব, যা ব্যবহারকারীদের ডেটার সাথে সহজে এবং কার্যকরীভাবে ইন্টারঅ্যাক্ট করতে সহায়তা করে।
Plotly দিয়ে তৈরি করা গ্রাফগুলো ইন্টারেকটিভ থাকে, যার ফলে ব্যবহারকারীরা সহজেই Zoom, Pan, এবং Hover ফিচার ব্যবহার করতে পারেন। এই ফিচারগুলো ডেটা বিশ্লেষণের জন্য অত্যন্ত কার্যকরী, কারণ এগুলোর মাধ্যমে ব্যবহারকারীরা গ্রাফের ভিন্ন ভিন্ন অংশের বিস্তারিত দেখার সুযোগ পায় এবং ডেটার সাথে ইন্টারেক্ট করতে পারে। চলুন, এই ফিচারগুলো কীভাবে ব্যবহার করা যায়, তা বিস্তারিতভাবে আলোচনা করি।
Zoom Feature (জুম ফিচার)
Plotly-তে Zoom ফিচার ব্যবহারকারীদের গ্রাফের একটি নির্দিষ্ট অংশের ওপর জুম ইন অথবা জুম আউট করার সুবিধা দেয়। এটি ডেটার বিস্তারিত বিশ্লেষণে সাহায্য করে, যেখানে ব্যবহারকারী গ্রাফের এক্স-অক্ষ বা ওয়াই-অক্ষকে চুম্বকীয়ভাবে জুম ইন বা আউট করতে পারে।
উদাহরণ:
Plotly তে গ্রাফের Zoom ফিচার স্বয়ংক্রিয়ভাবে কাজ করে, অর্থাৎ আপনি গ্রাফের ওপর মাউস দিয়ে স্ক্রল করলে গ্রাফের আকার পরিবর্তন হবে। এই ফিচারটি ব্যবহারের জন্য আপনাকে কোনো অতিরিক্ত কোড লেখার প্রয়োজন হয় না।
import plotly.express as px
# Gapminder ডেটাসেট ব্যবহার করা
df = px.data.gapminder()
# Scatter Plot তৈরি করা
fig = px.scatter(df, x='gdpPercap', y='lifeExp', color='continent', size='pop', log_x=True, title="GDP vs Life Expectancy")
# গ্রাফ প্রদর্শন
fig.show()
এখানে, ব্যবহারকারী গ্রাফে মাউস স্ক্রল করে এক্স-অক্ষ বা ওয়াই-অক্ষের ওপর জুম ইন বা আউট করতে পারবেন।
Pan Feature (প্যান ফিচার)
Pan ফিচারটি গ্রাফের ভিউকে সরানোর জন্য ব্যবহৃত হয়, অর্থাৎ ব্যবহারকারী গ্রাফের একটি অংশের ওপর প্যান (চালনা) করতে পারেন, যাতে অন্য অংশগুলো দেখা যায়। এটি গ্রাফের ভিউ পরিবর্তন করতে সাহায্য করে এবং ব্যবহারকারীকে গ্রাফের নির্দিষ্ট অংশগুলোর ওপর নজর দিতে সুযোগ দেয়।
উদাহরণ:
Pan ফিচারটি Plotly তে স্বয়ংক্রিয়ভাবে চালু থাকে, এবং মাউস দিয়ে গ্রাফের উপর ক্লিক করে প্যান করা সম্ভব। যেমন, আপনি গ্রাফের উপর ক্লিক করে মাউসটিকে ড্র্যাগ করলে গ্রাফটি সরিয়ে নিতে পারবেন।
import plotly.express as px
# Gapminder ডেটাসেট ব্যবহার করা
df = px.data.gapminder()
# Scatter Plot তৈরি করা
fig = px.scatter(df, x='gdpPercap', y='lifeExp', color='continent', size='pop', log_x=True, title="GDP vs Life Expectancy")
# গ্রাফ প্রদর্শন
fig.show()
এখানে, আপনি মাউস দিয়ে গ্রাফের উপর ক্লিক করে এটি প্যান করতে পারবেন। এটি গ্রাফের একটি নির্দিষ্ট অংশ দেখতে সাহায্য করে।
Hover Feature (হোভার ফিচার)
Hover ফিচারটি ব্যবহারকারীকে গ্রাফের উপর মাউস নিয়ে যাওয়ার মাধ্যমে ডেটা পয়েন্টের বিস্তারিত তথ্য দেখতে সাহায্য করে। যখন আপনি একটি পয়েন্টের ওপর মাউসের কার্সর রাখবেন, তখন সেই পয়েন্টের সাথে সম্পর্কিত ডেটা দেখাবে।
উদাহরণ:
import plotly.express as px
# Gapminder ডেটাসেট ব্যবহার করা
df = px.data.gapminder()
# Scatter Plot তৈরি করা এবং Hover ফিচার যুক্ত করা
fig = px.scatter(df, x='gdpPercap', y='lifeExp', color='continent', size='pop', title="GDP vs Life Expectancy")
# গ্রাফ প্রদর্শন
fig.show()
এখানে, গ্রাফের প্রতিটি ডেটা পয়েন্টের উপর কার্সর রাখলে, আপনি ঐ পয়েন্টের বিস্তারিত তথ্য দেখতে পারবেন, যেমন: দেশের নাম, GDP, Life Expectancy, জনসংখ্যা ইত্যাদি।
Zoom, Pan, এবং Hover এর কম্বিনেশন
Plotly তে Zoom, Pan, এবং Hover ফিচারগুলো একসঙ্গে ব্যবহার করা যায়। উদাহরণস্বরূপ, একটি Scatter Plot তৈরির মাধ্যমে আপনি সহজেই জুম, প্যান এবং হোভার ফিচার ব্যবহার করতে পারবেন:
import plotly.express as px
# Gapminder ডেটাসেট ব্যবহার করা
df = px.data.gapminder()
# Scatter Plot তৈরি করা
fig = px.scatter(df, x='gdpPercap', y='lifeExp', color='continent', size='pop', title="GDP vs Life Expectancy")
# গ্রাফ প্রদর্শন
fig.show()
এখানে:
- Zoom ফিচার: এক্স-অক্ষ এবং ওয়াই-অক্ষের ওপর স্ক্রল করে জুম ইন বা আউট করা যাবে।
- Pan ফিচার: গ্রাফের ওপর ক্লিক করে এটি প্যান করা যাবে।
- Hover ফিচার: পয়েন্টের উপর কার্সর রেখে ডেটা পয়েন্টের বিস্তারিত দেখতে পারবেন।
সারাংশ
Plotly এর Zoom, Pan, এবং Hover ফিচারগুলি ডেটা ভিজুয়ালাইজেশনকে আরও ইন্টারেকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে। এই ফিচারগুলো ব্যবহারের মাধ্যমে ব্যবহারকারীরা গ্রাফের সাথে ইন্টারঅ্যাক্ট করতে পারেন এবং ডেটার আরও বিস্তারিত দিক জানতে পারেন। Plotly তে এই ফিচারগুলো স্বয়ংক্রিয়ভাবে উপলব্ধ থাকে এবং এগুলি কার্যকরভাবে ডেটা বিশ্লেষণের প্রক্রিয়াকে আরও সহজ করে তোলে।
Data Drill-down হল একটি ইন্টারেকটিভ ফিচার যা ব্যবহারকারীদের গ্রাফের উপর ক্লিক করে আরও বিস্তারিত বা নিম্নস্তরের ডেটা দেখতে সহায়তা করে। Plotly এই ধরনের ইন্টারেক্টিভ ডেটা ভিজুয়ালাইজেশন তৈরি করার জন্য বেশ উপকারী টুল। এই ধরনের ড্রিল-ডাউন ফিচার সাধারণত গ্রাফের পয়েন্টে ক্লিক করার মাধ্যমে প্রদর্শিত হয় এবং এটি আরও ডিটেইলড তথ্য প্রদান করে।
এখানে, আমরা Plotly ব্যবহার করে কিভাবে Data Drill-down ফিচার যোগ করা যায়, সে সম্পর্কে আলোচনা করবো।
Data Drill-down Features যোগ করার পদ্ধতি
Plotly এ Data Drill-down যোগ করতে সাধারণত callback functions এবং Dash ফ্রেমওয়ার্ক ব্যবহার করা হয়। Dash হলো Plotly এর একটি ফ্রেমওয়ার্ক যা ডেটা ইন্টারেকশন এবং ড্যাশবোর্ড তৈরি করার জন্য ব্যবহৃত হয়। নিচে Dash ব্যবহার করে Data Drill-down ফিচার তৈরি করার পদ্ধতি তুলে ধরা হয়েছে।
Dash-এ Data Drill-down তৈরি করা
১. Dash এবং Plotly ইনস্টল করা
প্রথমে Dash এবং Plotly ইনস্টল করতে হবে। যদি এগুলি ইনস্টল না থাকে, তাহলে নিচের কমান্ড ব্যবহার করে এগুলো ইনস্টল করা যাবে:
pip install dash plotly
২. Dash অ্যাপ তৈরি করা
এখানে আমরা একটি সিম্পল গ্রাফ তৈরি করবো এবং সেটি ক্লিক করার মাধ্যমে ড্রিল-ডাউন করতে পারবো।
কোড উদাহরণ:
import dash
from dash import dcc, html
import plotly.express as px
from dash.dependencies import Input, Output
# Dash অ্যাপ তৈরি করা
app = dash.Dash(__name__)
# উদাহরণ ডেটাসেট
data = px.data.gapminder()
# গ্রাফ তৈরি করা
fig = px.scatter(data, x="gdpPercap", y="lifeExp", color="continent", hover_name="country", size="pop")
# অ্যাপ লেআউট তৈরি করা
app.layout = html.Div([
dcc.Graph(id='main-graph', figure=fig),
html.Div(id='drilldown-output') # ড্রিলডাউন তথ্য দেখানোর জন্য একটি div
])
# Callback function দিয়ে Data Drill-down ফিচার যোগ করা
@app.callback(
Output('drilldown-output', 'children'),
Input('main-graph', 'clickData')
)
def display_click_data(clickData):
if clickData is None:
return "কোনো পয়েন্ট নির্বাচন করা হয়নি।"
# ক্লিক করা ডেটার তথ্য প্রদর্শন
country = clickData['points'][0]['hovertext']
gdp = clickData['points'][0]['x']
life_exp = clickData['points'][0]['y']
pop = clickData['points'][0]['marker.size']
return f"আপনি '{country}' নির্বাচন করেছেন। GDP: {gdp}, Life Expectancy: {life_exp}, Population: {pop}"
# অ্যাপ চালানো
if __name__ == '__main__':
app.run_server(debug=True)
ব্যাখ্যা:
- Dash অ্যাপ: প্রথমে Dash অ্যাপ তৈরি করা হয়েছে এবং এটি Plotly গ্রাফের সাথে ইন্টিগ্রেট করা হয়েছে।
clickData:dcc.Graphকম্পোনেন্টেclickDataইনপুট ব্যবহার করা হয়েছে, যা গ্রাফের কোনো পয়েন্টে ক্লিক করলে সেই পয়েন্টের ডেটা সংগ্রহ করে।display_click_data: এই callback function এর মাধ্যমে ক্লিক করা পয়েন্টের সাথে সম্পর্কিত ডেটা (যেমন, দেশের নাম, GDP, জীবন প্রত্যাশা, জনসংখ্যা) ড্রিলডাউন হিসেবে প্রদর্শন করা হয়েছে।hovertext: Tooltip-এ যেসব তথ্য দেখানো হয়, সেগুলোhovertextদিয়ে পাওয়া যায় এবং তা Drill-down এর জন্য ব্যবহার করা হয়।
Dash অ্যাপের কার্যকারিতা
এভাবে, যখন ব্যবহারকারী Scatter Plot-এ কোনো পয়েন্টে ক্লিক করবেন, তখন সেই পয়েন্টের বিস্তারিত তথ্য (যেমন, দেশের নাম, GDP, জীবন প্রত্যাশা, এবং জনসংখ্যা) নিচে একটি Div-এ প্রদর্শিত হবে। এটি একটি সাধারণ Data Drill-down ফিচার, যা আপনাকে গ্রাফের ইন্টারেকশন এবং ডেটা বিশ্লেষণে সহায়তা করে।
Drill-down ফিচারের উন্নত ব্যবহার
Dash-এ Drill-down ফিচার আরও উন্নত করা যেতে পারে। উদাহরণস্বরূপ:
- Multiple Layers of Drill-down: প্রথম স্তরের ডেটা ক্লিক করে দ্বিতীয় স্তরের ডেটা দেখানো যেতে পারে।
- Dropdowns: Dropdown মেনু ব্যবহার করে ব্যবহারকারীকে আরও নির্দিষ্ট ডেটা দেখানোর সুযোগ দেওয়া যায়।
- Zoom-in & Filter: গ্রাফের মধ্যে জুম ইন করে আরও সুনির্দিষ্ট ডেটা বিশ্লেষণ করা যেতে পারে।
সারাংশ
Plotly এবং Dash ব্যবহার করে সহজেই Data Drill-down ফিচার তৈরি করা সম্ভব। Dash একটি শক্তিশালী ফ্রেমওয়ার্ক যা ইন্টারেক্টিভ ড্যাশবোর্ড এবং ভিজুয়ালাইজেশন তৈরি করতে সাহায্য করে, এবং এর মাধ্যমে ডেটা ক্লিক করে আরও বিস্তারিত বিশ্লেষণ করা যায়। Drill-down ফিচার ব্যবহারের মাধ্যমে ব্যবহারকারীকে গ্রাফের আরও গভীর তথ্য জানানো যায়, যা ডেটা বিশ্লেষণ এবং প্রেজেন্টেশনে নতুন মাত্রা যোগ করে।
Plotly ব্যবহার করে আপনি ইন্টারেকটিভ গ্রাফ তৈরি করতে পারেন এবং Click Events এর মাধ্যমে ডেটার সাথে ইন্টারেক্ট করতে পারেন। গ্রাফে ক্লিক করার পর কাস্টম ইন্টারঅ্যাকশন পরিচালনা করা Plotly এর শক্তিশালী ফিচার, যা ডেটা ভিজুয়ালাইজেশন এবং ইউজার অভিজ্ঞতাকে আরও উন্নত করে। এখানে আমরা Click Events এবং Custom Interactions এর উদাহরণ দেখবো।
Click Event এবং Custom Interactions
Plotly গ্রাফে Click Events পরিচালনা করতে plotly_click ইভেন্ট ব্যবহার করা হয়। এটি ব্যবহারকারীর ক্লিকের জন্য কাস্টম রেসপন্স তৈরি করতে সহায়তা করে। ব্যবহারকারী যখন গ্রাফের কোনো পয়েন্টে ক্লিক করবে, তখন আপনি সেই পয়েন্টের উপর ভিত্তি করে বিভিন্ন ইন্টারঅ্যাকশন বা রেসপন্স তৈরি করতে পারেন।
Click Event হ্যান্ডলিং উদাহরণ (Python)
Python-এ Plotly গ্রাফে ক্লিক ইভেন্ট হ্যান্ডল করার জন্য, আপনি সাধারণত dash ফ্রেমওয়ার্ক ব্যবহার করবেন। Dash একটি Plotly-এর উপরের একটি ফ্রেমওয়ার্ক যা গ্রাফে ইন্টারঅ্যাকশন এবং কাস্টম ইভেন্ট পরিচালনা করতে সহায়তা করে।
Dash এ Click Event উদাহরণ:
import dash
from dash import dcc, html
import plotly.graph_objects as go
from dash.dependencies import Input, Output
# Dash অ্যাপ তৈরি
app = dash.Dash(__name__)
# ডেটা তৈরি করা
x = [1, 2, 3, 4, 5]
y = [10, 11, 12, 13, 14]
# অ্যাপ লেআউট
app.layout = html.Div([
dcc.Graph(id='scatter-plot',
figure={
'data': [{'x': x, 'y': y, 'type': 'scatter', 'mode': 'markers'}],
'layout': {'title': 'Click on a Point'}
}),
html.Div(id='click-output')
])
# Click Event হ্যান্ডলিং
@app.callback(
Output('click-output', 'children'),
[Input('scatter-plot', 'clickData')]
)
def display_click_data(clickData):
if clickData is None:
return 'Click on a point to display its data.'
# ক্লিক করা পয়েন্টের ডেটা প্রদর্শন
point = clickData['points'][0]
x_value = point['x']
y_value = point['y']
return f'You clicked on point (x: {x_value}, y: {y_value})'
# অ্যাপ রান করা
if __name__ == '__main__':
app.run_server(debug=True)
ব্যাখ্যা:
dcc.Graph: Dash এর মাধ্যমে Plotly গ্রাফ তৈরি করা হচ্ছে।clickData: এটি গ্রাফে ক্লিক করার পর ইভেন্ট ডেটা আনে।display_click_data: এটি ক্লিকের পর ডেটা দেখানোর জন্য একটি callback ফাংশন যাclickDataইনপুট নেয় এবং এর মাধ্যমে ক্লিক করা পয়েন্টের এক্স এবং ওয়াই ভ্যালু প্রদর্শন করে।
JavaScript এ Click Events এবং Custom Interactions
JavaScript এ Plotly ব্যবহার করে Click Events হ্যান্ডল করা খুবই সহজ। plotly_click ইভেন্টের মাধ্যমে আপনি ব্যবহারকারীর ক্লিকের পর কাস্টম ইন্টারঅ্যাকশন করতে পারেন।
JavaScript উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Plotly Click Event</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="plotly-chart"></div>
<div id="click-info"></div>
<script>
// ডেটা তৈরি করা
var trace1 = {
x: [1, 2, 3, 4, 5],
y: [10, 11, 12, 13, 14],
mode: 'markers',
type: 'scatter'
};
var data = [trace1];
// গ্রাফ তৈরি করা
var layout = {
title: 'Click on a Point'
};
Plotly.newPlot('plotly-chart', data, layout);
// Click Event হ্যান্ডলিং
var chart = document.getElementById('plotly-chart');
chart.on('plotly_click', function(eventData) {
var x_value = eventData.points[0].x;
var y_value = eventData.points[0].y;
document.getElementById('click-info').innerHTML =
'You clicked on point (x: ' + x_value + ', y: ' + y_value + ')';
});
</script>
</body>
</html>
ব্যাখ্যা:
plotly_click: এটি ইভেন্ট লিসেনার যা গ্রাফে ক্লিক করার পর ট্রিগার হয়।eventData.points[0].xএবংeventData.points[0].y: এটি ক্লিক করা পয়েন্টের এক্স এবং ওয়াই ভ্যালু আনে।document.getElementById('click-info').innerHTML: এখানে ক্লিক করা পয়েন্টের ডেটা HTML ডিভে প্রদর্শন করা হচ্ছে।
Plotly Click Event-এর সাথে Custom Interactions
Custom Interactions দিয়ে আপনি ক্লিক করার পর নতুন গ্রাফ, টেবিল, বা ডেটা উপস্থাপন করতে পারেন। উদাহরণস্বরূপ, ক্লিক করার পর একটি নতুন গ্রাফ অথবা একটি ডায়ালগ বক্স প্রদর্শন করা যেতে পারে।
Python (Dash) Example: Click করার পর একটি নতুন গ্রাফ তৈরি
import dash
from dash import dcc, html
import plotly.graph_objects as go
from dash.dependencies import Input, Output
# Dash অ্যাপ তৈরি
app = dash.Dash(__name__)
# ডেটা তৈরি
x = [1, 2, 3, 4, 5]
y = [10, 11, 12, 13, 14]
# অ্যাপ লেআউট
app.layout = html.Div([
dcc.Graph(id='scatter-plot',
figure={
'data': [{'x': x, 'y': y, 'type': 'scatter', 'mode': 'markers'}],
'layout': {'title': 'Click on a Point'}
}),
html.Div(id='click-output'),
dcc.Graph(id='new-plot')
])
# Click Event হ্যান্ডলিং
@app.callback(
[Output('click-output', 'children'),
Output('new-plot', 'figure')],
[Input('scatter-plot', 'clickData')]
)
def display_click_data(clickData):
if clickData is None:
return 'Click on a point to display its data.', {}
# ক্লিক করা পয়েন্টের ডেটা
point = clickData['points'][0]
x_value = point['x']
y_value = point['y']
# নতুন গ্রাফ তৈরি
new_x = [x_value]
new_y = [y_value]
new_figure = {
'data': [{'x': new_x, 'y': new_y, 'type': 'scatter', 'mode': 'markers'}],
'layout': {'title': 'New Plot after Click'}
}
return f'You clicked on point (x: {x_value}, y: {y_value})', new_figure
# অ্যাপ রান করা
if __name__ == '__main__':
app.run_server(debug=True)
ব্যাখ্যা:
Output('new-plot', 'figure'): এখানে, ক্লিক করার পর নতুন গ্রাফ প্রদর্শিত হচ্ছে যেখানে শুধু ক্লিক করা পয়েন্টের তথ্য থাকবে।new_figure: নতুন গ্রাফের ডেটা এবং লেআউট তৈরি করা হচ্ছে।
সারাংশ
Plotly তে Click Events এবং Custom Interactions ব্যবহার করে আপনি গ্রাফের সঙ্গে ব্যবহারকারীদের ইন্টারেক্টিভ অভিজ্ঞতা তৈরি করতে পারেন। Dash ব্যবহার করে Python-এ, এবং JavaScript-এ সরাসরি plotly_click ইভেন্ট ব্যবহার করে আপনি ক্লিক করার পর বিভিন্ন কাস্টম রেসপন্স এবং ইন্টারঅ্যাকশন তৈরি করতে পারবেন, যেমন নতুন গ্রাফ, তথ্য প্রদর্শন, বা ডায়ালগ বক্স।
Plotly তে Slider এবং Dropdown Menu যোগ করা খুবই সহজ এবং এটি ইন্টারেকটিভ ডেটা ভিজুয়ালাইজেশন তৈরি করতে সাহায্য করে। এই উপাদানগুলো ব্যবহারকারীদের গ্রাফের বিভিন্ন অংশের সাথে ইন্টারেকশন করার সুযোগ দেয়। নিচে কিভাবে Slider এবং Dropdown Menu যোগ করা যায় তার বিস্তারিত ব্যাখ্যা দেওয়া হলো।
Slider যোগ করা
Plotly তে Slider যোগ করতে, আপনি sliders ব্যবহার করতে পারেন যা ব্যবহারকারীদের গ্রাফের বিভিন্ন উপাদান পরিবর্তন করতে সহায়তা করে। সাধারণত, এটি এক্স বা ওয়াই ভ্যালু পরিবর্তন করতে ব্যবহৃত হয়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে Slider এর মাধ্যমে এক্স-অক্ষের মান পরিবর্তন করা যাবে।
উদাহরণ: Slider দিয়ে ডেটার পরিবর্তন
import plotly.graph_objects as go
from plotly.subplots import make_subplots
# ডেটা তৈরি
x = [1, 2, 3, 4, 5]
y = [10, 11, 12, 13, 14]
# গ্রাফ তৈরি
fig = make_subplots(rows=1, cols=1)
# প্রথম ট্রেস
fig.add_trace(go.Scatter(x=x, y=y, mode='lines', name='ডেটা ১'))
# Slider যোগ করা
fig.update_layout(
sliders=[{
'active': 0,
'currentvalue': {
'visible': True,
'prefix': 'ভ্যালু: ',
'xanchor': 'center'
},
'pad': {'b': 10}
}]
)
# গ্রাফ প্রদর্শন
fig.show()
এখানে, sliders প্যারামিটার ব্যবহার করে আপনি গ্রাফে একটি স্লাইডার যুক্ত করেছেন। ব্যবহারকারীরা এই স্লাইডার দিয়ে গ্রাফের ডেটার মান পরিবর্তন করতে পারবেন।
Dropdown Menu যোগ করা
Plotly তে Dropdown Menu যোগ করা অনেক সহজ। এটি ব্যবহারকারীদের বিভিন্ন অপশন বা ভ্যালুর মধ্যে থেকে একটি নির্বাচন করতে দেয়। সাধারণত, এটি গ্রাফের বিভিন্ন ট্রেস বা ভ্যারিয়েবল সিলেক্ট করার জন্য ব্যবহৃত হয়।
উদাহরণ: Dropdown Menu দিয়ে ট্রেস পরিবর্তন
import plotly.graph_objects as go
# ডেটা তৈরি
x = [1, 2, 3, 4, 5]
y1 = [10, 11, 12, 13, 14]
y2 = [15, 16, 17, 18, 19]
# গ্রাফ তৈরি
fig = go.Figure()
# প্রথম ট্রেস
fig.add_trace(go.Scatter(x=x, y=y1, mode='lines', name='ডেটা ১'))
# দ্বিতীয় ট্রেস
fig.add_trace(go.Scatter(x=x, y=y2, mode='lines', name='ডেটা ২'))
# Dropdown Menu যোগ করা
fig.update_layout(
updatemenus=[
{
'buttons': [
{
'label': 'ডেটা ১',
'method': 'update',
'args': [{'visible': [True, False]}, {'title': 'ডেটা ১'}]
},
{
'label': 'ডেটা ২',
'method': 'update',
'args': [{'visible': [False, True]}, {'title': 'ডেটা ২'}]
},
{
'label': 'দুটি ডেটা',
'method': 'update',
'args': [{'visible': [True, True]}, {'title': 'দুটি ডেটা'}]
}
],
'direction': 'down',
'showactive': True,
}
]
)
# গ্রাফ প্রদর্শন
fig.show()
এখানে, একটি Dropdown Menu যোগ করা হয়েছে, যা ব্যবহারকারীদের দুটি ডেটা সিরিজ (ডেটা ১ এবং ডেটা ২) থেকে একটি নির্বাচন করতে দেয়। updatemenus প্যারামিটার দিয়ে ড্রপডাউন মেনু এবং তার বাটন কনফিগার করা হয়েছে। যখন একজন ব্যবহারকারী কোনো অপশন নির্বাচন করবে, তখন গ্রাফ আপডেট হবে এবং নির্বাচিত ডেটা সিরিজটি দেখানো হবে।
Slider এবং Dropdown Menu এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | Slider | Dropdown Menu |
|---|---|---|
| কাজের ধরন | গ্রাফের একটি ভ্যালু পরিবর্তন করা | একাধিক অপশন থেকে একটি নির্বাচন করা |
| ইউজার ইন্টারঅ্যাকশন | একটি স্লাইডারের মাধ্যমে মান পরিবর্তন করা | একটি ড্রপডাউন মেনু থেকে অপশন নির্বাচন করা |
| প্রয়োগ | গ্রাফের ভ্যালু পরিবর্তন বা স্কেলিং করা | বিভিন্ন ট্রেস বা ভ্যারিয়েবল সিলেক্ট করা |
| ব্যবহার | পরিবর্তনশীল বা ডাইনামিক ডেটার জন্য | গ্রাফের ভিউ বা ডেটার সিরিজ পরিবর্তন করার জন্য |
সারাংশ
Plotly তে Slider এবং Dropdown Menu দুটি ইন্টারেকটিভ উপাদান গ্রাফে যুক্ত করা সম্ভব। Slider ব্যবহারকারীদের মান পরিবর্তন করতে সাহায্য করে, যেমন গ্রাফের স্কেল বা ডেটা পয়েন্টের মান পরিবর্তন। অন্যদিকে, Dropdown Menu ব্যবহারকারীদের একাধিক অপশন থেকে নির্বাচন করতে দেয়, যেমন বিভিন্ন ট্রেস বা ডেটাসেটের মধ্যে সুইচ করা। এই দুটি উপাদান গ্রাফের ইন্টারেকটিভিটি এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।
Read more
