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 ইভেন্ট ব্যবহার করে আপনি ক্লিক করার পর বিভিন্ন কাস্টম রেসপন্স এবং ইন্টারঅ্যাকশন তৈরি করতে পারবেন, যেমন নতুন গ্রাফ, তথ্য প্রদর্শন, বা ডায়ালগ বক্স।
Read more
