Google Charts আপনাকে geographical data ভিজ্যুয়ালাইজ করতে সহায়ক বিভিন্ন চার্ট প্রকার প্রদান করে। আপনি সহজেই Country-level, Region-level, এবং City-level ডেটা ভিজ্যুয়ালাইজেশন করতে পারেন Google Charts এর GeoChart প্যাকেজের মাধ্যমে। এই টুলটি বিশেষভাবে ব্যবহার করা হয় ভৌগোলিক ডেটা প্রদর্শন করতে, যেমন দেশ, অঞ্চল বা শহরের মধ্যে তুলনা।
এখানে আমরা GeoChart ব্যবহার করে কিভাবে Country-level, Region-level, এবং City-level ডেটা ভিজ্যুয়ালাইজ করা যায়, তা দেখবো।
১. Country-level Data Display (দেশভিত্তিক ডেটা)
GeoChart ব্যবহার করে আপনি বিশ্বের বিভিন্ন দেশের মধ্যে তুলনা করতে পারেন, যেমন প্রতি দেশের জনসংখ্যা বা অর্থনীতি ইত্যাদি।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Country-level Data Display</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(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Population'],
['USA', 331883986],
['Canada', 37742154],
['Germany', 83783942],
['Australia', 25499884],
['Brazil', 211049527],
['India', 1366417754]
]);
var options = {
region: 'world', // 'world' will show the world map
displayMode: 'regions',
resolution: 'countries',
colorAxis: {colors: ['#e0f7fa', '#00695c']} // Color range for population
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Country-level Population Data</h2>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- GeoChart প্যাকেজ লোড করা:
google.charts.load('current', {packages: ['geochart']});এর মাধ্যমে গুগল চার্টের GeoChart প্যাকেজ লোড করা হচ্ছে। - ডেটা তৈরি করা: এখানে আমরা Population ডেটা ব্যবহার করেছি, যেটি USA, Canada, Germany, Australia, Brazil, এবং India দেশগুলোর জন্য।
- বিশ্ব মানচিত্রে প্রদর্শন:
region: 'world'দ্বারা আমরা পৃথিবীর মানচিত্রে ডেটা প্রদর্শন করছি। - ColorAxis: জনসংখ্যা অনুযায়ী রঙের ভিন্নতা প্রদর্শন করতে colorAxis ব্যবহার করা হয়েছে।
২. Region-level Data Display (অঞ্চলভিত্তিক ডেটা)
GeoChart দিয়ে আপনি একটি নির্দিষ্ট অঞ্চলের ডেটা, যেমন USA এর বিভিন্ন রাজ্যের মধ্যে তুলনা করতে পারেন। এখানে আমরা USA এর রাজ্যগুলোকে Population এর ভিত্তিতে প্রদর্শন করব।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Region-level Data Display</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(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['State', 'Population'],
['California', 39512223],
['Texas', 28995881],
['Florida', 21477737],
['New York', 19453561],
['Pennsylvania', 12801989],
['Illinois', 12671821]
]);
var options = {
region: 'US', // USA এর মানচিত্র
displayMode: 'regions',
resolution: 'provinces', // রাজ্যগুলির ভিত্তিতে ডেটা প্রদর্শন
colorAxis: {colors: ['#e0f7fa', '#00695c']}
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>USA States Population</h2>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
region: 'US': USA এর মানচিত্র প্রদর্শন করার জন্য এই অপশন ব্যবহার করা হয়েছে।resolution: 'provinces': রাজ্যগুলোর মধ্যে ডেটা দেখানোর জন্য provinces নির্ধারণ করা হয়েছে।- Population Data: এখানে আমরা USA এর বিভিন্ন রাজ্যের Population ডেটা ব্যবহার করেছি।
৩. City-level Data Display (শহরভিত্তিক ডেটা)
Google Charts আপনাকে City-level ডেটাও প্রদর্শন করতে সাহায্য করে। উদাহরণস্বরূপ, আমরা কিছু বড় শহরের Population ডেটা প্রদর্শন করবো।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>City-level Data Display</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(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Population'],
['New York City', 8419600],
['Los Angeles', 3980400],
['Chicago', 2716000],
['Houston', 2328000],
['Phoenix', 1690000]
]);
var options = {
region: 'US', // USA এর মানচিত্র
displayMode: 'markers', // শহরের অবস্থান দেখাবে
colorAxis: {colors: ['#e0f7fa', '#00695c']}
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>City Population in USA</h2>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
displayMode: 'markers': এই অপশনটি শহরের অবস্থান মানচিত্রে মার্কার হিসেবে প্রদর্শন করবে।region: 'US': USA এর মানচিত্রে শহরের ডেটা প্রদর্শন করা হবে।- City Data: এখানে USA এর ৫টি বড় শহরের জনসংখ্যার ডেটা প্রদর্শন করা হয়েছে।
উপসংহার
Google Charts এর GeoChart প্যাকেজ ব্যবহার করে আপনি Country-level, Region-level, এবং City-level ডেটা ভিজ্যুয়ালাইজ করতে পারেন। এটি বিভিন্ন ভৌগোলিক অঞ্চলে ডেটা উপস্থাপন করতে কার্যকরী, যেমন দেশের জনসংখ্যা, রাজ্য বা শহরের উন্নতি বা অন্যান্য পরিসংখ্যান। GeoChart খুবই ব্যবহারিক এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন টুল, যা আপনি আপনার ওয়েবসাইটে সহজে এক্সপ্লোর করতে পারেন।
Read more
