Geo Chart হল Google Charts-এর একটি শক্তিশালী টুল যা ভূগোল ভিত্তিক ডেটা ভিজ্যুয়ালাইজ করার জন্য ব্যবহৃত হয়। এটি ম্যাপের আকারে ডেটাকে উপস্থাপন করে, যেখানে বিভিন্ন অঞ্চলের মধ্যে ডেটার পার্থক্য স্পষ্টভাবে প্রদর্শিত হয়। এই চার্টের সাহায্যে আপনি বিভিন্ন দেশের, রাজ্যের বা শহরের ডেটাকে রঙের মাধ্যমে তুলনা করতে পারেন।
এই টিউটোরিয়ালে, আমরা Custom Geo Data এবং Color Ranges কিভাবে ব্যবহার করা যায় তা বিস্তারিতভাবে দেখবো।
Geo Chart কী?
Geo Chart বিভিন্ন অঞ্চলের ডেটা ভিজ্যুয়ালাইজ করতে সাহায্য করে, যেমন:
- দেশের জনসংখ্যা
- রাজ্যগুলোর আয়
- বিভিন্ন দেশের বিপণন ডেটা
- ভৌগলিক অবস্থান থেকে নির্ধারিত ডেটা
Google Charts এ Geo Chart ব্যবহার করার জন্য আপনাকে Geo Chart Package লোড করতে হবে এবং তার পরে Geo Data ব্যবহার করে চার্ট তৈরি করতে হবে।
Custom Geo Data এবং Color Ranges ব্যবহার করার উদাহরণ
১. Custom Geo Data
আপনি বিভিন্ন অঞ্চলের জন্য কাস্টম ডেটা ব্যবহার করতে পারেন, যেমন বিশ্বের দেশগুলোর জনসংখ্যা বা প্রতিটি দেশের আয়। Google Charts এর GeoChart ডেটাকে JSON বা Array ফরম্যাটে প্রদর্শন করা হয়।
উদাহরণ: Custom Geo Data with Color Ranges
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geo Chart with Custom Geo Data</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['geochart', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Country', 'Population'],
['USA', 331000000],
['China', 1444216107],
['India', 1380004385],
['Brazil', 211000000],
['Russia', 145900000]
]);
var options = {
region: 'world',
colorAxis: {minValue: 0, maxValue: 1500000000, colors: ['#e0f7fa', '#00796b']},
title: 'World Population by Country',
backgroundColor: '#f5f5f5',
datalessRegionColor: '#e0e0e0'
};
var chart = new google.visualization.GeoChart(document.getElementById('geo_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Custom Geo Chart Example</h2>
<div id="geo_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Geo Data: এখানে আমরা বিশ্বের বিভিন্ন দেশের জনসংখ্যার ডেটা ব্যবহার করেছি, যেমন
USA,China,India, ইত্যাদি। - Color Axis:
colorAxisএর মাধ্যমে আমরা color ranges কাস্টমাইজ করেছি।minValueএবংmaxValueদ্বারা জনসংখ্যার ন্যূনতম এবং সর্বাধিক মান নির্ধারণ করা হয়েছে। এর পাশাপাশি,colorsএর মধ্যে দুইটি রঙ দেয়া হয়েছে, যা ছোট সংখ্যাগুলি লাইট টিউকোয়েজ (light teal) এবং বড় সংখ্যাগুলি ডার্ক (dark teal) দেখাবে। - Region:
region: 'world'এর মাধ্যমে আমরা পুরো পৃথিবী দেখাচ্ছি, তবে আপনি যদি কোনো নির্দিষ্ট অঞ্চলের জন্য ম্যাপ দেখতে চান, তবে আপনি 'US', 'IN' ইত্যাদি দেশ কোড ব্যবহার করতে পারেন।
২. Color Ranges ব্যবহার করা
Color Ranges দ্বারা আপনি ভিজ্যুয়াল ডেটাকে বিভিন্ন রঙের মাধ্যমে সহজে বুঝতে সাহায্য করতে পারেন। Google Geo Chart-এ colorAxis ব্যবহার করে আপনি রঙের স্কেল কাস্টমাইজ করতে পারেন, যা ডেটার পার্থক্য স্পষ্টভাবে তুলে ধরে।
উদাহরণ: Color Ranges in Geo Chart
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geo Chart with Color Ranges</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['geochart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Country', 'GDP'],
['USA', 21137518],
['China', 14140163],
['India', 2875],
['Germany', 3845630],
['UK', 2827115],
['France', 2715518],
['Italy', 2112682],
['Japan', 5081770]
]);
var options = {
region: 'world',
colorAxis: {colors: ['#ffebee', '#b71c1c']}, // Light red to dark red color range
title: 'GDP by Country (in billions)',
backgroundColor: '#e5e5e5',
datalessRegionColor: '#f0f0f0'
};
var chart = new google.visualization.GeoChart(document.getElementById('geo_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Geo Chart with Color Ranges</h2>
<div id="geo_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- GDP Data: এখানে আমরা বিভিন্ন দেশের GDP ডেটা ব্যবহার করেছি, যেমন
USA,China,Indiaইত্যাদি। - Color Axis:
colorAxisব্যবহার করে আমরা color ranges নির্ধারণ করেছি। রঙের স্কেলটি হালকা লাল (#ffebee) থেকে গা dark ় লাল (#b71c1c) পর্যন্ত পরিবর্তিত হবে, যেখানে ছোট GDP এর জন্য হালকা লাল এবং বড় GDP এর জন্য গা dark ় লাল রঙ ব্যবহার করা হবে। - Region:
region: 'world'এর মাধ্যমে আমরা বিশ্বের ম্যাপ দেখাচ্ছি।
৩. Geo Chart - Customizing Regions
আপনি Geo Chart এর মাধ্যমে নির্দিষ্ট দেশ বা অঞ্চলও হাইলাইট করতে পারেন। আপনি যদি কোনো নির্দিষ্ট অঞ্চলের ডেটা প্রদর্শন করতে চান তবে আপনি region এবং resolution অপশন ব্যবহার করতে পারেন।
উদাহরণ: Custom Region in Geo Chart
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geo Chart with Custom Region</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['geochart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Country', 'Population'],
['USA', 331000000],
['China', 1444216107],
['India', 1380004385]
]);
var options = {
region: 'US', // Specifying a custom region for the USA
colorAxis: {minValue: 0, maxValue: 1500000000, colors: ['#e0f7fa', '#00796b']},
title: 'Population of the USA',
backgroundColor: '#f5f5f5',
datalessRegionColor: '#e0e0e0'
};
var chart = new google.visualization.GeoChart(document.getElementById('geo_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Geo Chart with Custom Region</h2>
<div id="geo_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Region:
region: 'US'ব্যবহার করে আমরা শুধুমাত্র USA প্রদর্শন করছি। আপনি যদি India বা China নির্বাচন করতে চান, তবে আপনি সেই দেশের কোড ব্যবহার করতে পারেন।
উপসংহার
Google Charts এর Geo Chart ব্যবহার করে আপনি বিশ্বের বিভিন্ন অঞ্চলের ডেটাকে কাস্টমাইজডভাবে প্রদর্শন করতে পারেন। Custom Geo Data এবং Color Ranges ব্যবহার করে আপনি সহজেই ভৌগলিক অঞ্চলের মধ্যে পার্থক্য প্রদর্শন করতে পারবেন, যা ডেটাকে আরও বোধগম্য এবং আকর্ষণীয় করে তোলে।
Read more
