Bubble Chart (বাবল চার্ট) Chart.js-এর একটি শক্তিশালী টুল, যা এক্স, ওয়াই এবং জেড অক্ষের মধ্যে সম্পর্ক প্রদর্শন করে। এটি একটি স্ক্যাটার প্লট যেখানে প্রতিটি বুদবুদ ডেটার তিনটি ভেরিয়েবলকে প্রতিনিধিত্ব করে—একটি এক্স-অক্ষের মান, একটি ওয়াই-অক্ষের মান এবং একটি তৃতীয় ভেরিয়েবল যেটি বুদবুদটির আকারের মাধ্যমে প্রদর্শিত হয়। এটি জটিল ডেটা বিশ্লেষণের জন্য খুবই কার্যকর, যেখানে আপনি একাধিক ভেরিয়েবলকে তুলনা করতে চান।
Bubble Chart এর বৈশিষ্ট্য
- এক্স, ওয়াই এবং আকার: বাবল চার্ট তিনটি ভেরিয়েবল প্রদর্শন করে—একটি এক্স অক্ষের (X-axis) মান, একটি ওয়াই অক্ষের (Y-axis) মান এবং বুদবুদটির আকার (Z-axis)।
- ডেটার তুলনা: এটি বিভিন্ন ক্যাটাগরির তুলনা করতে সহায়ক, যেমন একাধিক পণ্যের বিক্রয়, অঞ্চল ভিত্তিক ডেটা বিশ্লেষণ বা মেট্রিক্স তুলনা।
- ভিজ্যুয়ালাইজেশন: জটিল ডেটাকে সোজাসুজি এবং ভিজ্যুয়ালি বোঝার জন্য অত্যন্ত সহায়ক।
Bubble Chart তৈরি করার উদাহরণ
ধরা যাক, আমরা একটি ব্যবসায়ের বিভিন্ন পণ্যের বিক্রয়, লাভ এবং স্টক পরিস্থিতি তুলনা করতে চাই। এখানে, বিক্রয় এক্স অক্ষের মান, লাভ ওয়াই অক্ষের মান এবং স্টক সাইজ বুদবুদটির আকারের মাধ্যমে দেখানো হবে।
HTML ফাইল:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bubble Chart Example</title>
</head>
<body>
<h1>Bubble Chart Example: Sales, Profit, and Stock</h1>
<canvas id="myBubbleChart" width="600" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
</body>
</html>
JavaScript ফাইল (Bubble Chart কনফিগারেশন)
script.js:
const ctx = document.getElementById('myBubbleChart').getContext('2d');
// Bubble Chart কনফিগারেশন
const myBubbleChart = new Chart(ctx, {
type: 'bubble', // Chart type: Bubble Chart
data: {
datasets: [{
label: 'Products',
data: [{
x: 10, // X-অক্ষ: Sales in $1000
y: 15, // Y-অক্ষ: Profit in $
r: 20 // Z-অক্ষ: Stock (radius size)
}, {
x: 20,
y: 25,
r: 10
}, {
x: 30,
y: 40,
r: 30
}, {
x: 40,
y: 45,
r: 25
}],
backgroundColor: 'rgba(75, 192, 192, 0.6)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
x: {
min: 0, // Minimum value for X-axis
max: 50, // Maximum value for X-axis
title: {
display: true,
text: 'Sales in $1000'
}
},
y: {
min: 0, // Minimum value for Y-axis
max: 50, // Maximum value for Y-axis
title: {
display: true,
text: 'Profit in $'
}
}
}
}
});
Bubble Chart এর কনফিগারেশন এবং ব্যাখ্যা
type: 'bubble': এই লাইনটি চার্টের ধরন নির্ধারণ করে। এখানে,'bubble'টাইপ ব্যবহার করা হয়েছে, যা বাবল চার্ট তৈরি করবে।data.datasets: এটি একাধিক ডেটাসেটকে সমর্থন করে। এক্ষেত্রে একটি ডেটাসেট ব্যবহার করা হয়েছে, যেখানে প্রতিটি বুদবুদ একটি নির্দিষ্ট পণ্যের বিক্রয়, লাভ এবং স্টক সাইজের প্রতিনিধিত্ব করছে।data: [{ x, y, r }]:x: এক্স অক্ষের মান, যা পণ্যের বিক্রয় প্রতিনিধিত্ব করে।y: ওয়াই অক্ষের মান, যা লাভ বা প্রফিট প্রতিনিধিত্ব করে।r: বুদবুদটির আকার, যা স্টকের পরিমাণ নির্দেশ করে।
backgroundColorএবংborderColor: বুদবুদগুলির রং এবং বর্ডার রং কাস্টমাইজ করার জন্য ব্যবহার করা হয়।scales: এক্স এবং ওয়াই অক্ষের স্কেল কাস্টমাইজ করা হয়েছে যাতে ডেটা সুন্দরভাবে প্রদর্শিত হয়।
Bubble Chart কাস্টমাইজেশন
- বুদবুদ রঙের পরিবর্তন:
backgroundColorএবংborderColorএর মাধ্যমে বুদবুদগুলির রং পরিবর্তন করা যেতে পারে। - অক্ষের স্কেল পরিবর্তন:
xএবংyঅক্ষের জন্যmin,maxএবংtitleসেটিংস ব্যবহার করে স্কেল কাস্টমাইজ করা যায়। - অ্যানিমেশন: বুদবুদগুলির সাথে একটি অ্যানিমেশন যুক্ত করতে
options.animationব্যবহার করা যেতে পারে।
অ্যানিমেশন উদাহরণ:
options: {
animation: {
duration: 1000, // অ্যানিমেশনের সময়কাল
easing: 'easeOutBounce' // অ্যানিমেশন ইফেক্ট
}
}
ব্যবহারিক প্রয়োগ
Bubble Chart ব্যবহার করে আপনি জটিল ডেটাকে সহজভাবে ভিজ্যুয়ালাইজ করতে পারেন। এটি ব্যবসায়ের পরিসংখ্যান, বাজার গবেষণা, বা বিভিন্ন ডেটাসেটের মধ্যে সম্পর্ক বিশ্লেষণের জন্য অত্যন্ত কার্যকর। উদাহরণস্বরূপ:
- ব্যবসায়ের বিক্রয় ও লাভের বিশ্লেষণ: পণ্যের বিক্রয় এবং লাভের মধ্যে সম্পর্ক দেখানো।
- স্টক বিশ্লেষণ: পণ্যের স্টক এবং বিক্রয়ের ভিত্তিতে লাভ বা ক্ষতি বিশ্লেষণ।
সারাংশ
Bubble Chart Chart.js এর একটি শক্তিশালী টুল, যা এক্স, ওয়াই এবং জেড ভেরিয়েবলকে একত্রে ভিজ্যুয়ালাইজ করতে সহায়তা করে। এটি জটিল ডেটাকে তুলনা এবং বিশ্লেষণ করার জন্য অত্যন্ত কার্যকর, বিশেষত যখন একাধিক ডেটা পয়েন্টের মধ্যে সম্পর্ক প্রকাশ করতে হয়।
Read more
