Scatter Chart এবং Bubble Chart হলো এমন দুটি চার্ট যা ডেটার মধ্যে সম্পর্ক বা কো-রিলেশন দেখতে সাহায্য করে। Scatter Chart মূলত দুটি ভেরিয়েবলের মধ্যে সম্পর্ক প্রদর্শন করতে ব্যবহৃত হয়, যেখানে Bubble Chart তৃতীয় ভেরিয়েবলের মাধ্যমে ডেটার গভীর বিশ্লেষণ প্রদান করে। এগুলো বিশেষভাবে পরিসংখ্যানিক ডেটা বিশ্লেষণ এবং ডেটার মধ্যে ট্রেন্ড বা সম্পর্ক দেখানোর জন্য ব্যবহৃত হয়।
এখানে আমরা Scatter Chart এবং Bubble Chart এর জন্য কিছু Advanced Options ব্যবহার করার পদ্ধতি দেখব।
১. Scatter Chart তৈরি করা
Scatter Chart মূলত দুটি ভেরিয়েবলের মধ্যে সম্পর্ক দেখাতে ব্যবহৃত হয়। এটি সাধারণত এক্স-অ্যাক্সিস এবং ওয়াই-অ্যাক্সিসের উপর ডেটা পয়েন্ট প্রদর্শন করে, এবং ব্যবহৃত ভেরিয়েবলগুলির মধ্যে কোন সম্পর্ক রয়েছে তা বিশ্লেষণ করতে সাহায্য করে।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Scatter Chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'scatter']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X'); // X-axis
data.addColumn('number', 'Y'); // Y-axis
data.addRows([
[1, 1],
[2, 4],
[3, 9],
[4, 16],
[5, 25],
[6, 36]
]);
var options = {
title: 'Scatter Chart Example',
hAxis: {
title: 'X-axis (Independent Variable)',
minValue: 0,
gridlines: { count: 5 }
},
vAxis: {
title: 'Y-axis (Dependent Variable)',
minValue: 0,
gridlines: { count: 5 }
},
legend: { position: 'none' },
pointSize: 10, // পয়েন্ট সাইজ কাস্টমাইজ করা
trendlines: {
0: {
type: 'linear',
color: 'green',
opacity: 0.3,
lineWidth: 3
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('scatter_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Advanced Scatter Chart Example</h2>
<div id="scatter_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কাস্টমাইজেশন:
- পয়েন্ট সাইজ:
pointSize: 10দ্বারা পয়েন্টের আকার কাস্টমাইজ করা হয়েছে। - ট্রেন্ডলাইন:
trendlinesঅপশন ব্যবহার করে আমরা একটি লিনিয়ার ট্রেন্ডলাইন যোগ করেছি, যা ডেটার মধ্যে সম্পর্ক বা প্রবণতা দেখায়। এটি সব পয়েন্টের জন্য একটি সরল রেখা প্রদর্শন করবে। - অ্যাক্সিস টাইটেল:
hAxisএবংvAxisএর মাধ্যমে এক্স-অ্যাক্সিস এবং ওয়াই-অ্যাক্সিসের টাইটেল ও অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করা হয়েছে।
২. Bubble Chart তৈরি করা
Bubble Chart আরও উন্নত একটি চার্ট যেখানে তিনটি ভেরিয়েবলের তথ্য প্রদান করা হয়। এখানে এক্স এবং ওয়াই অ্যাক্সিসের উপর ডেটা পয়েন্ট থাকে, এবং প্রতিটি পয়েন্টের আকার (Bubble Size) তৃতীয় ভেরিয়েবল দ্বারা নির্ধারিত হয়।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Bubble Chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bubble']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X'); // X-axis
data.addColumn('number', 'Y'); // Y-axis
data.addColumn('number', 'Size'); // Bubble Size
data.addColumn('string', 'Label'); // Bubble Label
data.addRows([
[1, 1, 10, 'A'],
[2, 4, 20, 'B'],
[3, 9, 30, 'C'],
[4, 16, 40, 'D'],
[5, 25, 50, 'E'],
[6, 36, 60, 'F']
]);
var options = {
title: 'Bubble Chart Example',
hAxis: {
title: 'X-axis (Independent Variable)',
minValue: 0
},
vAxis: {
title: 'Y-axis (Dependent Variable)',
minValue: 0
},
bubble: {
opacity: 0.5, // বুদবুদগুলির স্বচ্ছতা
stroke: 'black', // বুদবুদের সীমানা রং
strokeWidth: 2 // বুদবুদের সীমানার প্রস্থ
},
legend: { position: 'none' },
sizeAxis: {
minSize: 5, // বুদবুদের ছোট আকার
maxSize: 20 // বুদবুদের বড় আকার
}
};
var chart = new google.visualization.BubbleChart(document.getElementById('bubble_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Advanced Bubble Chart Example</h2>
<div id="bubble_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কাস্টমাইজেশন:
- বুদবুদ আকার:
sizeAxisএর মাধ্যমে আমরা বুদবুদের আকার কাস্টমাইজ করেছি।minSize: 5এবংmaxSize: 20দ্বারা বুদবুদের আকার সীমাবদ্ধ করা হয়েছে। - বুদবুদের রং এবং সীমানা:
bubbleএর মাধ্যমে বুদবুদের স্বচ্ছতা (opacity) এবং সীমানার রং ও প্রস্থ নির্ধারণ করা হয়েছে। - এক্স ও ওয়াই অ্যাক্সিস:
hAxisএবংvAxisএর মাধ্যমে এক্স এবং ওয়াই অ্যাক্সিসের টাইটেল কাস্টমাইজ করা হয়েছে এবং তাদের মিনিমাম মান নির্ধারণ করা হয়েছে।
উপসংহার
Scatter Chart এবং Bubble Chart উভয়ই শক্তিশালী ডেটা ভিজ্যুয়ালাইজেশন টুল, যা ডেটার মধ্যে সম্পর্ক এবং সম্পর্কের গভীরতা দেখাতে সাহায্য করে। Google Charts দিয়ে আপনি এই চার্টগুলোতে অনেক কাস্টমাইজেশন করতে পারেন, যেমন পয়েন্ট সাইজ, ট্রেন্ডলাইন, বুদবুদ আকার, রং, টেক্সট ইত্যাদি। এই কাস্টমাইজেশনগুলির মাধ্যমে আপনার চার্ট আরো তথ্যপূর্ণ এবং আকর্ষণীয় হতে পারে, যা আপনার ডেটা বিশ্লেষণকে আরও সহজ এবং কার্যকর করে তোলে।
Read more
