গুগল চার্টে Color Scales ব্যবহার করে আপনি ডেটাকে আরও স্পষ্ট এবং সহজে বোধগম্য উপায়ে উপস্থাপন করতে পারেন। Continuous Color Scale এবং Discrete Color Scale হল দুটি জনপ্রিয় কৌশল, যা গ্রাফে বিভিন্ন ভেরিয়েবলের মান অনুযায়ী রঙ নির্ধারণ করে। এগুলি গ্রাফে রঙের মাধ্যমে ডেটার পার্থক্য বা ট্রেন্ড সহজে বিশ্লেষণ করতে সাহায্য করে।
১. Continuous Color Scale (ধারাবাহিক রঙ স্কেল)
Continuous Color Scale ব্যবহৃত হয় যখন আপনার ডেটা ধারাবাহিক বা পরিসংখ্যানিক মানের মধ্যে থাকে (যেমন: সংখ্যা, রেটিং, মাপ)। এই স্কেলে ডেটার মানের উপর ভিত্তি করে একটি নির্দিষ্ট রঙের গ্রেডিয়েন্ট তৈরি হয়, যাতে কম মানের জন্য একটি রঙ এবং বেশি মানের জন্য অন্য রঙ দেখানো হয়।
উদাহরণ: Continuous Color Scale with Google Charts
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'heatmap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y', 'Value'],
[1, 1, 100],
[1, 2, 200],
[1, 3, 300],
[2, 1, 400],
[2, 2, 500],
[2, 3, 600],
[3, 1, 700],
[3, 2, 800],
[3, 3, 900]
]);
var options = {
title: 'Heatmap with Continuous Color Scale',
hAxis: {title: 'X Axis'},
vAxis: {title: 'Y Axis'},
colors: ['#ffffff', '#ff0000'], // Continuous color gradient from white to red
colorAxis: {minValue: 100, maxValue: 900, colors: ['#ffffff', '#ff0000']} // Color scale setup
};
var chart = new google.visualization.HeatMapChart(document.getElementById('heatmap_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="heatmap_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
colorAxisদিয়ে রঙের স্কেল কাস্টমাইজ করা হয়েছে, যেখানেminValueএবংmaxValueএর মধ্যে ডেটার মান অনুযায়ী রঙের গ্রেডিয়েন্ট তৈরি করা হয়েছে।colors: এই অপশনটি ডেটার মানের উপর ভিত্তি করে রঙের গ্রেডিয়েন্ট সেট করেছে (সাদা থেকে লাল পর্যন্ত)।
২. Discrete Color Scale (বৈশিষ্ট্যভিত্তিক রঙ স্কেল)
Discrete Color Scale ব্যবহার করা হয় যখন ডেটা ক্যাটাগরিকাল বা বিচ্ছিন্ন মানের মধ্যে থাকে (যেমন: দেশ, বিভাগ, প্রজাতি ইত্যাদি)। এই স্কেলে, প্রতিটি ক্যাটাগরি বা মানের জন্য একটি নির্দিষ্ট রঙ নির্ধারণ করা হয়।
উদাহরণ: Discrete Color Scale with Google Charts
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'heatmap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y', 'Category'],
[1, 1, 'A'],
[1, 2, 'B'],
[1, 3, 'A'],
[2, 1, 'C'],
[2, 2, 'B'],
[2, 3, 'A'],
[3, 1, 'C'],
[3, 2, 'A'],
[3, 3, 'B']
]);
var options = {
title: 'Heatmap with Discrete Color Scale',
hAxis: {title: 'X Axis'},
vAxis: {title: 'Y Axis'},
colors: ['#ff0000', '#00ff00', '#0000ff'], // Discrete color scale
colorAxis: {values: ['A', 'B', 'C'], colors: ['#ff0000', '#00ff00', '#0000ff']} // Color scale for categories
};
var chart = new google.visualization.HeatMapChart(document.getElementById('heatmap_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="heatmap_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
colorAxis-এর মাধ্যমেvaluesনির্ধারণ করে সুনির্দিষ্ট ক্যাটাগরি (যেমন 'A', 'B', 'C') এর জন্য বিভিন্ন রঙ নির্ধারণ করা হয়েছে।colors: এখানে তিনটি নির্দিষ্ট রঙ সেট করা হয়েছে (লাল, সবুজ, নীল), যা ক্যাটাগরির মান অনুযায়ী প্রদর্শিত হবে।
৩. আরও কাস্টমাইজেশন: রঙের পরিবর্তন এবং স্কেল ম্যানেজমেন্ট
গুগল চার্টে রঙের স্কেল কাস্টমাইজেশন আরও উন্নত করতে, আপনি colorAxis এর মাধ্যমে স্কেলের রেঞ্জ এবং রঙের প্যালেট পরিবর্তন করতে পারেন। এছাড়াও, Gradient এবং Color Mapping ব্যবহার করে আপনি আরও ইন্টারেক্টিভ এবং ভিজ্যুয়ালি আকর্ষণীয় গ্রাফ তৈরি করতে পারেন।
উদাহরণ: Continuous and Discrete Color Scales Together
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'heatmap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y', 'Category', 'Value'],
[1, 1, 'A', 100],
[1, 2, 'B', 200],
[1, 3, 'C', 300],
[2, 1, 'A', 400],
[2, 2, 'B', 500],
[2, 3, 'C', 600],
[3, 1, 'A', 700],
[3, 2, 'B', 800],
[3, 3, 'C', 900]
]);
var options = {
title: 'Heatmap with Continuous and Discrete Color Scales',
hAxis: {title: 'X Axis'},
vAxis: {title: 'Y Axis'},
colorAxis: {
minValue: 100,
maxValue: 900,
colors: ['#ffffff', '#ff0000'] // Continuous scale from white to red
},
colors: ['#ff0000', '#00ff00', '#0000ff'], // Discrete color scale for categories
};
var chart = new google.visualization.HeatMapChart(document.getElementById('heatmap_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="heatmap_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
colorAxis: রঙের স্কেল ধারাবাহিকভাবে সাদা থেকে লাল পর্যন্ত নির্ধারণ করা হয়েছে।colors: ক্যাটাগরি ভিত্তিক রঙের স্কেল (লাল, সবুজ, নীল) নির্ধারণ করা হয়েছে।
সারমর্ম
Continuous Color Scale এবং Discrete Color Scale গুগল চার্টে ডেটার ভিজ্যুয়ালাইজেশনের জন্য শক্তিশালী এবং অত্যন্ত কার্যকরী টুল। Continuous Color Scale ব্যবহার করে আপনি ধারাবাহিক মানের উপর ভিত্তি করে রঙের গ্রেডিয়েন্ট তৈরি করতে পারেন, যেখানে Discrete Color Scale ব্যবহার করে আপনি সুনির্দিষ্ট ক্যাটাগরি বা মানের জন্য রঙ নির্ধারণ করতে পারেন। গুগল চার্টে এই স্কেলগুলো ব্যবহার করে ডেটার সম্পর্ক সহজেই উপস্থাপন করা যায়, যা বিশ্লেষণ এবং সিদ্ধান্ত গ্রহণকে আরো সহজ এবং স্পষ্ট করে তোলে।
Read more
