Scatter Plot (স্ক্যাটার চার্ট) হল একটি গ্রাফ যেখানে এক্স এবং ওয়াই অক্ষের উপর ডেটা পয়েন্টগুলি প্লট করা হয়। এটি দুইটি ভ্যারিয়েবলের মধ্যে সম্পর্ক এবং তাদের মধ্যে যে কোনো প্যাটার্ন বা ট্রেন্ড আছে কিনা তা বিশ্লেষণ করতে ব্যবহৃত হয়।
Chart.js এ Scatter Plot তৈরি করার জন্য সহজেই ডেটা পয়েন্টগুলিকে প্লট করা যায়, যা আপনাকে দুই ভ্যারিয়েবলের সম্পর্ক প্রদর্শন করতে সহায়তা করে। উদাহরণস্বরূপ, আপনি যদি দুটি ভ্যারিয়েবলের (যেমন, তাপমাত্রা এবং আর্দ্রতা) সম্পর্ক বিশ্লেষণ করতে চান, তাহলে Scatter Plot ব্যবহার করতে পারেন।
Scatter Plot এর জন্য Chart.js কনফিগারেশন
প্রথমে, Chart.js এর মাধ্যমে একটি scatter চার্ট তৈরি করতে হবে। এখানে আমরা একটি সাধারণ উদাহরণ দেখাবো, যেখানে এক্স-অক্ষ এবং ওয়াই-অক্ষের মানের ভিত্তিতে ডেটা পয়েন্ট প্লট করা হবে।
উদাহরণ কোড: Scatter Plot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Scatter Plot</title>
</head>
<body>
<h1>Scatter Plot - Two Variables Relationship</h1>
<canvas id="myScatterChart" width="400" height="200"></canvas>
<!-- Chart.js Library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myScatterChart').getContext('2d');
const scatterChart = new Chart(ctx, {
type: 'scatter', // Scatter chart type
data: {
datasets: [{
label: 'Temperature vs Humidity',
data: [
{x: 10, y: 20}, // X and Y coordinates
{x: 20, y: 30},
{x: 30, y: 40},
{x: 40, y: 50},
{x: 50, y: 60},
{x: 60, y: 70},
{x: 70, y: 80},
{x: 80, y: 90}
],
backgroundColor: 'rgba(75, 192, 192, 1)', // Point color
borderColor: 'rgba(75, 192, 192, 1)', // Border color of points
borderWidth: 2 // Border width
}]
},
options: {
responsive: true,
scales: {
x: {
type: 'linear', // X-axis type is linear
position: 'bottom',
title: {
display: true,
text: 'Temperature (°C)' // X-axis label
}
},
y: {
type: 'linear', // Y-axis type is linear
title: {
display: true,
text: 'Humidity (%)' // Y-axis label
}
}
}
}
});
</script>
</body>
</html>
কোড বিশ্লেষণ
- HTML Canvas:
<canvas id="myScatterChart" width="400" height="200"></canvas>– এখানে একটি<canvas>ট্যাগ ব্যবহার করা হয়েছে, যেখানে Scatter Plot চার্ট রেন্ডার হবে। - Chart.js লাইব্রেরি:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>– Chart.js লাইব্রেরি লোড করা হয়েছে। - Scatter Plot কনফিগারেশন:
- type: 'scatter': এটি নির্ধারণ করে যে চার্টটি একটি Scatter Plot হবে।
- data: এখানে
datasetsএর মধ্যে ডেটা পয়েন্টগুলোxএবংyএর মান হিসেবে প্রদান করা হয়েছে। - backgroundColor এবং borderColor: প্রতিটি ডেটা পয়েন্টের জন্য পটভূমি এবং বর্ডার রঙ নির্ধারণ করা হয়েছে।
- scales: এক্স এবং ওয়াই অক্ষের জন্য স্কেল কনফিগারেশন, যেখানে
type: 'linear'ব্যবহার করা হয়েছে, কারণ আমরা দুইটি সিংহভাগ ভ্যারিয়েবলের মধ্যে সম্পর্ক দেখাচ্ছি।
- Axes Titles: এক্স এবং ওয়াই অক্ষের শিরোনাম কাস্টমাইজ করা হয়েছে, যেমন "Temperature (°C)" এবং "Humidity (%)"।
Scatter Plot কাস্টমাইজেশন
Scatter Plot কাস্টমাইজ করতে আপনি কয়েকটি পরিবর্তন করতে পারেন:
- Data Point Customization:
- size: প্রতিটি পয়েন্টের আকার পরিবর্তন করতে পারেন।
- shape: বিভিন্ন আকৃতির পয়েন্ট ব্যবহার করতে পারেন (যেমন গোল, আয়তক্ষেত্র, ট্রায়াঙ্গেল)।
- Gridlines এবং Ticks:
- আপনি এক্স এবং ওয়াই অক্ষের gridlines এবং ticks কাস্টমাইজ করতে পারেন, যাতে ডেটা পয়েন্টগুলির মধ্যে সঠিক সম্পর্ক বোঝা যায়।
- Tooltips:
- tooltip অপশন দিয়ে আপনি প্রতিটি ডেটা পয়েন্টের উপর ক্লিক করলে অতিরিক্ত তথ্য দেখাতে পারেন।
উদাহরণ: Tooltip কাস্টমাইজেশন
options: {
responsive: true,
plugins: {
tooltip: {
callbacks: {
label: function(tooltipItem) {
return `Temperature: ${tooltipItem.raw.x}°C, Humidity: ${tooltipItem.raw.y}%`;
}
}
}
}
}
এখানে, টুলটিপে Temperature এবং Humidity মান কাস্টমাইজ করা হয়েছে।
Scatter Plot এর ব্যবহার
Scatter Plot ব্যবহার করে আপনি বিভিন্ন ক্ষেত্রের মধ্যে সম্পর্ক বিশ্লেষণ করতে পারেন। উদাহরণস্বরূপ:
- বিজ্ঞান ও প্রকৌশল: দুইটি ভ্যারিয়েবলের সম্পর্ক বিশ্লেষণ যেমন তাপমাত্রা ও আর্দ্রতা, চাপ ও গতি ইত্যাদি।
- অর্থনীতি: স্টক মার্কেটের দাম এবং সময়ের মধ্যে সম্পর্ক।
- সমাজবিজ্ঞান: শিক্ষা এবং আয়ের মধ্যে সম্পর্ক।
সারাংশ
Chart.js এর মাধ্যমে Scatter Plot একটি শক্তিশালী এবং সহজ উপায় যা আপনাকে দুটি ভ্যারিয়েবলের সম্পর্ক বিশ্লেষণ করতে সহায়তা করে। আপনি এই চার্টটি ডেটার প্যাটার্ন, ট্রেন্ড, অথবা কোন সম্পর্ক রয়েছে কিনা তা দেখানোর জন্য ব্যবহার করতে পারেন। Scatter Plot কাস্টমাইজেশন দিয়ে আপনি গ্রাফটির দৃষ্টিনন্দনতা এবং কার্যকারিতা উন্নত করতে পারবেন।
Read more
