Scatter Chart এবং Bubble Chart দুটি অত্যন্ত কার্যকরী ভিজ্যুয়ালাইজেশন টুল যা ডেটার মধ্যে সম্পর্ক এবং প্রবণতা বিশ্লেষণ করতে সাহায্য করে।
- Scatter Chart সাধারণত দুটি ভেরিয়েবলের মধ্যে সম্পর্ক দেখানোর জন্য ব্যবহৃত হয়।
- Bubble Chart একটি উন্নত ধরনের Scatter Chart, যেখানে তৃতীয় ভেরিয়েবলও (Bubble Size) ডেটার সম্পর্ককে আরও বিশ্লেষণ করে দেখায়।
এখানে আমরা Scatter Chart এবং Bubble Chart তৈরি করার পদ্ধতি দেখবো Google Charts ব্যবহার করে।
১. Scatter Chart তৈরি করা
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>Google Scatter Chart Example</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 (Independent variable)
data.addColumn('number', 'Y'); // Y-axis (Dependent variable)
// Add data points to the chart
data.addRows([
[1, 1],
[2, 4],
[3, 9],
[4, 16],
[5, 25],
[6, 36],
[7, 49],
[8, 64]
]);
var options = {
title: 'Scatter Chart Example',
hAxis: {title: 'X (Independent variable)'},
vAxis: {title: 'Y (Dependent variable)'},
legend: { position: 'none' }
};
var chart = new google.visualization.ScatterChart(document.getElementById('scatter_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Scatter Chart Example</h2>
<div id="scatter_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- ডেটা তৈরি:
google.visualization.DataTable()ব্যবহার করে দুটি কলাম (X এবং Y) তৈরি করা হয়েছে, যেখানে X হলো স্বাধীন ভেরিয়েবল এবং Y হলো নির্ভরশীল ভেরিয়েবল। - ডেটা পয়েন্ট:
data.addRows([...])এর মাধ্যমে আমরা স্যাটেলাইট ভ্যালু যোগ করেছি, যা দুটি ভেরিয়েবলের সম্পর্ক দেখাবে। - অপশন কাস্টমাইজেশন:
hAxisএবংvAxisসেট করা হয়েছে, যা X এবং Y অক্ষের শিরোনাম নির্ধারণ করে।
২. Bubble Chart তৈরি করা
Bubble Chart একটি উন্নত ধরনের Scatter Chart যা তৃতীয় ভেরিয়েবলকে আকার (bubble size) হিসেবে ব্যবহার করে। এটি দুটি ভেরিয়েবলের মধ্যে সম্পর্ক এবং তৃতীয় ভেরিয়েবল হিসাবে সাইজ বিশ্লেষণ করতে সাহায্য করে।
কোড উদাহরণ (Bubble Chart):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Bubble Chart Example</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 (Independent variable)
data.addColumn('number', 'Y'); // Y-axis (Dependent variable)
data.addColumn('number', 'Size'); // Bubble size (Third variable)
// Add data points to the chart
data.addRows([
[1, 1, 3],
[2, 4, 5],
[3, 9, 7],
[4, 16, 10],
[5, 25, 12],
[6, 36, 15],
[7, 49, 18],
[8, 64, 20]
]);
var options = {
title: 'Bubble Chart Example',
hAxis: {title: 'X (Independent variable)'},
vAxis: {title: 'Y (Dependent variable)'},
bubble: {textStyle: {fontSize: 11}},
legend: {position: 'none'}
};
var chart = new google.visualization.BubbleChart(document.getElementById('bubble_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Bubble Chart Example</h2>
<div id="bubble_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- ডেটা তৈরি:
google.visualization.DataTable()ব্যবহার করে তিনটি কলাম (X, Y এবং Size) তৈরি করা হয়েছে।- X হলো স্বাধীন ভেরিয়েবল,
- Y হলো নির্ভরশীল ভেরিয়েবল,
- Size হলো বুদ্বুদ আকার (Bubble size) যা তৃতীয় ভেরিয়েবল হিসেবে ব্যবহৃত হবে।
- ডেটা পয়েন্ট:
data.addRows([...])এর মাধ্যমে আমরা প্রতিটি ডেটা পয়েন্টের জন্য X, Y, এবং সাইজের মান যোগ করেছি। - অপশন কাস্টমাইজেশন:
bubbleঅপশন দিয়ে আমরা বুদ্বুদ এর স্টাইল এবং টেক্সট সাইজ সেট করেছি।
Scatter Chart এবং Bubble Chart এর মধ্যে পার্থক্য
- Scatter Chart: দুটি ভেরিয়েবলের মধ্যে সম্পর্ক বা প্রবণতা বিশ্লেষণ করতে ব্যবহৃত হয়। এটি একটি 2D প্লটে ডেটা পয়েন্ট দেখায় যেখানে দুটি ভেরিয়েবল (X এবং Y) থাকে।
- Bubble Chart: এটি একটি Scatter Chart এর উন্নত রূপ যেখানে তৃতীয় ভেরিয়েবল (Bubble size) যোগ করা হয়। এটি ভিজ্যুয়ালাইজেশনের মাধ্যমে ডেটার আরও গভীর বিশ্লেষণ করতে সহায়ক।
উপসংহার
Scatter Chart এবং Bubble Chart দুটি অত্যন্ত কার্যকরী টুল ডেটা বিশ্লেষণ এবং সম্পর্ক বোঝার জন্য। Google Charts ব্যবহার করে সহজেই এই চার্টগুলো তৈরি করা যায় এবং তা ব্যবহারকারীদের জন্য আরও সহজে ডেটা উপস্থাপন করতে সহায়তা করে। Bubble Chart আরও একটি ভেরিয়েবল যোগ করে ডেটার গভীর বিশ্লেষণ সম্ভব করে তোলে।
Scatter Chart (স্ক্যাটার চার্ট) একটি শক্তিশালী ভিজ্যুয়ালাইজেশন টুল, যা দুটি ভেরিয়েবলের মধ্যে সম্পর্ক বা ডেটা পয়েন্টের বিতরণ প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত correlation, trends, এবং distribution বিশ্লেষণ করার জন্য ব্যবহৃত হয়, যেমন একটি নির্দিষ্ট সময়ে বিভিন্ন ডেটা পয়েন্টের অবস্থান বা একটি ভেরিয়েবলের পরিবর্তনের সাথে সম্পর্কিত অন্য ভেরিয়েবলের পরিবর্তন।
Google Charts এ Scatter Chart তৈরি করা খুব সহজ এবং এটি ডেটার মধ্যে সম্পর্ক দেখাতে কার্যকর।
Scatter Chart এর জন্য Data Setup
Scatter Chart তৈরি করতে, আপনাকে দুটি ভেরিয়েবলের জন্য ডেটা সেট করতে হবে। এখানে, আমরা X-axis এবং Y-axis এর জন্য ডেটা পয়েন্ট নির্ধারণ করব।
উদাহরণ: Basic Scatter Chart Data Setup
google.charts.load('current', {packages: ['corechart', 'scatter']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y'],
[1, 3],
[2, 6],
[3, 7],
[4, 8],
[5, 9]
]);
var options = {
title: 'Basic Scatter Chart',
hAxis: {
title: 'X-Axis'
},
vAxis: {
title: 'Y-Axis'
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('scatter_chart'));
chart.draw(data, options);
}
ব্যাখ্যা:
- Data Setup: এখানে X এবং Y এর জন্য ডেটা পয়েন্ট প্রদান করা হয়েছে। প্রতিটি পয়েন্ট (X, Y) অক্ষের উপর প্লট হবে।
- arrayToDataTable(): এই ফাংশনটি ডেটাকে গুগল চার্টের জন্য প্রস্তুত করে।
Scatter Chart কাস্টমাইজেশন
Google Charts এ Scatter Chart কাস্টমাইজ করার অনেক উপায় রয়েছে, যেমন পয়েন্টের রঙ, আকার, অক্ষের শিরোনাম, চার্টের শিরোনাম ইত্যাদি। নিচে কিছু কাস্টমাইজেশন অপশন দেওয়া হলো:
১. Chart Title (চার্টের শিরোনাম)
চার্টের শিরোনাম কাস্টমাইজ করা যায়।
var options = {
title: 'Scatter Chart Example',
hAxis: {title: 'X-Axis'},
vAxis: {title: 'Y-Axis'}
};
২. Gridlines (গ্রিডলাইন)
Scatter Chart এর গ্রিডলাইন কাস্টমাইজ করা যায়, যা চার্টের পয়েন্টগুলো সঠিকভাবে তুলনা করতে সাহায্য করে।
var options = {
hAxis: {
gridlines: {color: '#f1f1f1', count: 4} // গ্রিডলাইন রঙ এবং সংখ্যা
},
vAxis: {
gridlines: {color: '#f1f1f1', count: 5}
}
};
৩. Point Colors (পয়েন্টের রঙ)
Scatter Chart এর পয়েন্টগুলোর রঙ কাস্টমাইজ করা যায়।
var options = {
pointSize: 10, // পয়েন্টের আকার
colors: ['#ff6347'] // পয়েন্টের রঙ (যেমন টমেটো রেড)
};
৪. Point Shape (পয়েন্টের আকৃতি)
পয়েন্টের আকৃতি পরিবর্তন করা যায় (যেমন, সার্কেল, স্কোয়ার, ট্রায়াঙ্গল ইত্যাদি)।
var options = {
pointShape: 'triangle' // পয়েন্টের আকৃতি ট্রায়াঙ্গল হবে
};
৫. Trendline (ট্রেন্ডলাইন)
Scatter Chart এ একটি ট্রেন্ডলাইন যোগ করা যায়, যা ডেটার প্রবণতা দেখায়।
var options = {
trendlines: {
0: {
type: 'linear',
color: 'green',
lineWidth: 3
}
}
};
পূর্ণাঙ্গ উদাহরণ: Scatter Chart with Customization
এখানে একটি সম্পূর্ণ উদাহরণ দেখানো হলো, যেখানে Scatter Chart এর বিভিন্ন কাস্টমাইজেশন অপশন প্রয়োগ করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customized 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 = google.visualization.arrayToDataTable([
['X', 'Y'],
[1, 3],
[2, 6],
[3, 7],
[4, 8],
[5, 9]
]);
var options = {
title: 'Customized Scatter Chart',
hAxis: {
title: 'X-Axis',
gridlines: {color: '#f1f1f1', count: 4} // X-axis গ্রিডলাইন কাস্টমাইজ
},
vAxis: {
title: 'Y-Axis',
gridlines: {color: '#f1f1f1', count: 5} // Y-axis গ্রিডলাইন কাস্টমাইজ
},
pointSize: 10, // পয়েন্টের আকার
colors: ['#ff6347'], // পয়েন্টের রঙ
trendlines: {
0: {
type: 'linear',
color: 'green',
lineWidth: 3
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('scatter_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Customized Scatter Chart</h2>
<div id="scatter_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- Gridlines: এক্স এবং ওয়াই অক্ষের গ্রিডলাইন কাস্টমাইজ করা হয়েছে।
- Point Size: পয়েন্টের আকার 10 পিক্সেল করা হয়েছে।
- Colors: পয়েন্টের রঙ টমেটো রেড করা হয়েছে।
- Trendline: ডেটার প্রবণতা দেখানোর জন্য লিনিয়ার ট্রেন্ডলাইন যোগ করা হয়েছে।
উপসংহার
Scatter Chart একটি গুরুত্বপূর্ণ ভিজ্যুয়ালাইজেশন টুল, যা ডেটার মধ্যে সম্পর্ক, প্রবণতা এবং বিতরণ প্রদর্শন করতে সাহায্য করে। Google Charts এর মাধ্যমে আপনি Scatter Chart তৈরি করতে পারবেন এবং বিভিন্ন কাস্টমাইজেশন অপশন ব্যবহার করে আপনার চার্টটিকে আরও কার্যকর এবং সুন্দর করে তুলতে পারবেন।
Bubble Chart একটি শক্তিশালী ডেটা ভিজ্যুয়ালাইজেশন টুল যা তিনটি ভেরিয়েবলের মধ্যে সম্পর্ক এবং ডেটার গতি, আকার বা অবস্থান দেখানোর জন্য ব্যবহৃত হয়। এটি সাধারণত সেলস ডেটা, মার্কেটিং ক্যাম্পেইন, বা কোনো প্রকার ডেটা বিশ্লেষণের জন্য ব্যবহৃত হয় যেখানে তিনটি ভেরিয়েবলের মধ্যে সম্পর্ক দেখা প্রয়োজন।
Bubble Chart প্রতিটি বুদ্বুদকে একটি X অক্ষ, Y অক্ষ এবং Bubble Size দ্বারা নির্ধারণ করে।
১. Google Charts দিয়ে Bubble Chart তৈরি করা
Bubble Chart তৈরি করতে আপনাকে প্রথমে Google Charts লাইব্রেরি লোড করতে হবে এবং তারপর ডেটাকে একটি টেবিল ফরম্যাটে প্রস্তুত করতে হবে, যেখানে তিনটি ভেরিয়েবল (এক্স, ওয়াই, সাইজ) থাকবে।
HTML এবং JavaScript কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Bubble Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Google Charts লোড করা
google.charts.load('current', {packages: ['corechart', 'bubble']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
// Bubble Chart তৈরি করার ফাংশন
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addColumn('number', 'Size');
data.addColumn('string', 'Category');
// ডেটা প্রস্তুত করা
data.addRows([
[80, 167, 120, 'Category 1'],
[79, 136, 130, 'Category 2'],
[78, 154, 140, 'Category 3'],
[81, 151, 150, 'Category 4'],
[82, 145, 160, 'Category 5'],
[77, 129, 170, 'Category 6'],
[85, 150, 180, 'Category 7']
]);
var options = {
title: 'Bubble Chart Example',
hAxis: {title: 'X Axis (Value)'},
vAxis: {title: 'Y Axis (Value)'},
bubble: {textStyle: {fontSize: 11}},
legend: { position: 'none' },
tooltip: { isHtml: true }
};
var chart = new google.visualization.BubbleChart(document.getElementById('bubble_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Bubble Chart Example</h2>
<div id="bubble_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা
Google Charts লাইব্রেরি লোড করা: প্রথমে আমরা Google Charts লাইব্রেরি লোড করি, এবং এখানে corechart এবং bubble প্যাকেজ লোড করেছি, যা Bubble Chart তৈরি করতে সাহায্য করবে।
google.charts.load('current', {packages: ['corechart', 'bubble']});ডেটা প্রস্তুত করা:
google.visualization.DataTable()এর মাধ্যমে একটি ডেটা টেবিল তৈরি করা হয়, যেখানে তিনটি কলাম থাকে:- X (এক্স অক্ষের মান)
- Y (ওয়াই অক্ষের মান)
- Size (বুদ্বুদগুলোর আকার)
- Category (ক্যাটেগরি বা বিভাগ)
data.addColumn('number', 'X'); data.addColumn('number', 'Y'); data.addColumn('number', 'Size'); data.addColumn('string', 'Category');ডেটা যোগ করা: এখানে আমরা কিছু উদাহরণ ডেটা যোগ করেছি, যেখানে প্রত্যেকটি বুদ্বুদ তার X, Y এবং Size ভ্যালু নিয়ে তৈরি হয়েছে।
data.addRows([ [80, 167, 120, 'Category 1'], [79, 136, 130, 'Category 2'], [78, 154, 140, 'Category 3'], [81, 151, 150, 'Category 4'], [82, 145, 160, 'Category 5'], [77, 129, 170, 'Category 6'], [85, 150, 180, 'Category 7'] ]);চার্ট অপশন সেট করা: এখানে চার্টের শিরোনাম, অক্ষের টাইটেল, টুলটিপ এবং অন্যান্য কাস্টমাইজেশন করা হয়েছে।
var options = { title: 'Bubble Chart Example', hAxis: {title: 'X Axis (Value)'}, vAxis: {title: 'Y Axis (Value)'}, bubble: {textStyle: {fontSize: 11}}, legend: { position: 'none' }, tooltip: { isHtml: true } };চার্ট তৈরি করা এবং প্রদর্শন:
google.visualization.BubbleChart()ফাংশন দিয়ে চার্ট তৈরি করা হয় এবং এটি HTML ডকুমেন্টে প্রদর্শিত হয়।var chart = new google.visualization.BubbleChart(document.getElementById('bubble_chart')); chart.draw(data, options);
২. Bubble Chart কাস্টমাইজেশন
Google Bubble Chart এর মাধ্যমে আপনি আরো অনেক কাস্টমাইজেশন করতে পারেন:
বুদ্বুদ রঙ পরিবর্তন: আপনি বুদ্বুদগুলোর রঙ কাস্টমাইজ করতে পারেন:
bubble: { opacity: 0.5, stroke: 'green', fill: 'red' }- বুদ্বুদ আকার কাস্টমাইজেশন: আকারের জন্য, আপনি Size এর মান ব্যবহার করতে পারেন এবং সেটিকে আপনার পছন্দ
Google Charts ব্যবহার করে আপনি Bubble Chart, Scatter Chart, Line Chart সহ বিভিন্ন ধরনের চার্টের ডেটা পয়েন্টের সাইজ এবং রঙ কাস্টমাইজ করতে পারেন। এটি আপনাকে ডেটাকে আরও আকর্ষণীয়ভাবে এবং বোধগম্যভাবে উপস্থাপন করতে সহায়তা করে।
এখানে আমরা দেখবো কিভাবে Bubble Chart এর ডেটা পয়েন্টের Size এবং Color কাস্টমাইজ করা যায়।
১. Bubble Chart এর Data Point Size এবং Color কাস্টমাইজ করা
Bubble Chart এর মাধ্যমে আপনি প্রতিটি বুদ্বুদের আকার এবং রঙ কাস্টমাইজ করতে পারেন, যা ডেটার বিশদ বিশ্লেষণ ও উপস্থাপনকে আরও কার্যকরী করে তোলে।
HTML এবং JavaScript কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Bubble Chart with Custom Size and Color</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Google Charts লোড করা
google.charts.load('current', {packages: ['corechart', 'bubble']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
// Bubble Chart তৈরি করার ফাংশন
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addColumn('number', 'Size');
data.addColumn('string', 'Category');
// ডেটা প্রস্তুত করা
data.addRows([
[80, 167, 120, 'Category 1'],
[79, 136, 130, 'Category 2'],
[78, 154, 140, 'Category 3'],
[81, 151, 150, 'Category 4'],
[82, 145, 160, 'Category 5'],
[77, 129, 170, 'Category 6'],
[85, 150, 180, 'Category 7']
]);
var options = {
title: 'Bubble Chart with Custom Size and Color',
hAxis: {title: 'X Axis (Value)'},
vAxis: {title: 'Y Axis (Value)'},
bubble: {
textStyle: {fontSize: 11},
stroke: 'black', // বুদ্বুদগুলোর স্ট্রোক কালার কাস্টমাইজ
},
legend: { position: 'none' },
tooltip: { isHtml: true },
colorAxis: {
colors: ['#FF5733', '#33FF57', '#3357FF'] // রঙ কাস্টমাইজেশন
}
};
var chart = new google.visualization.BubbleChart(document.getElementById('bubble_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Bubble Chart with Custom Size and Color</h2>
<div id="bubble_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা
Google Charts লাইব্রেরি লোড করা:
google.charts.load('current', {packages: ['corechart', 'bubble']});এখানে আমরা corechart এবং bubble প্যাকেজ লোড করছি, যা Bubble Chart তৈরি করতে সহায়ক।
ডেটা টেবিল তৈরি করা:
data.addColumn('number', 'X'); data.addColumn('number', 'Y'); data.addColumn('number', 'Size'); data.addColumn('string', 'Category');এখানে আমরা ডেটা যোগ করার জন্য চারটি কলাম যুক্ত করেছি:
- X: এক্স অক্ষের মান
- Y: ওয়াই অক্ষের মান
- Size: বুদ্বুদের আকার
- Category: প্রতিটি বুদ্বুদটির জন্য একটি ক্যাটেগরি (শ্রেণী)
- বুদ্বুদগুলোর আকার কাস্টমাইজ করা:
- Size কলামে প্রতিটি বুদ্বুদের আকার দেয়া হয়েছে, যেগুলি X এবং Y ভ্যালুর সাথে সম্পর্কিত।
- আপনি Size এর মান বৃদ্ধি বা হ্রাস করতে পারেন, এটি বুদ্বুদের আকারের সাথে সম্পর্কিত হবে।
বুদ্বুদগুলোর রঙ কাস্টমাইজ করা:
colorAxis: { colors: ['#FF5733', '#33FF57', '#3357FF'] // রঙ কাস্টমাইজেশন }এখানে colorAxis ব্যবহার করে আমরা বিভিন্ন রঙ নির্ধারণ করেছি। আপনি এখান থেকে আপনার পছন্দমত রঙ সেট করতে পারেন। এটি বুদ্বুদগুলোর জন্য একটি গ্রেডিয়েন্ট রঙ নির্ধারণ করবে।
স্ট্রোক কালার কাস্টমাইজ করা:
bubble: { textStyle: {fontSize: 11}, stroke: 'black', // বুদ্বুদগুলোর স্ট্রোক কালার কাস্টমাইজ }এই অপশনের মাধ্যমে আপনি বুদ্বুদগুলোর চারপাশে একটি স্ট্রোক (আউটলাইন) যোগ করতে পারেন এবং তার রঙ কাস্টমাইজ করতে পারেন।
২. Bubble Chart এর Customization
এছাড়া, আপনি Bubble Chart এর আরও অনেক কাস্টমাইজেশন করতে পারেন, যেমন:
Text Style: বুদ্বুদগুলোর টেক্সটের ফন্ট সাইজ, স্টাইল, অথবা বোল্ড/ইটালিক স্টাইল পরিবর্তন করা।
bubble: { textStyle: {fontSize: 14, color: 'black', bold: true} }Tooltip Customization: আপনি টুলটিপ কাস্টমাইজ করতে পারেন, যাতে আপনি বুদ্বুদ ক্লিক করলে আরও বিস্তারিত তথ্য দেখতে পারেন।
tooltip: { isHtml: true, trigger: 'selection' }Bubbles with Different Opacity: আপনি বুদ্বুদগুলির স্বচ্ছতা বা opacity নির্ধারণ করতে পারেন।
colorAxis: { opacity: 0.7 }
উপসংহার
Google Charts এর মাধ্যমে Bubble Chart তৈরি করা এবং এর ডেটা পয়েন্টের সাইজ ও রঙ কাস্টমাইজ করা একটি শক্তিশালী পদ্ধতি ডেটা ভিজ্যুয়ালাইজেশনের জন্য। এটি ডেটার মধ্যে সম্পর্ক ও পার্থক্যগুলো সহজভাবে এবং আকর্ষণীয়ভাবে উপস্থাপন করতে সাহায্য করে। এই কাস্টমাইজেশনগুলো আপনার ডেটার বিশ্লেষণ আরও স্পষ্ট এবং ব্যবহারকারী-বান্ধব করে তোলে।
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
