ভিজ্যুয়ালাইজেশন: জিওম্যাপ

  1. ওভারভিউ
  2. উদাহরণ
  3. লোড হচ্ছে
  4. উপাত্ত বিন্যাস
  5. কনফিগারেশন অপশন
  6. পদ্ধতি
  7. ঘটনা
  8. ডেটা নীতি
  9. মন্তব্য

ওভারভিউ

একটি জিওম্যাপ হল একটি দেশ, মহাদেশ বা অঞ্চলের মানচিত্র, নির্দিষ্ট অঞ্চলের জন্য নির্ধারিত রঙ এবং মান সহ। মানগুলি একটি রঙের স্কেল হিসাবে প্রদর্শিত হয় এবং আপনি অঞ্চলগুলির জন্য ঐচ্ছিক হোভারটেক্সট নির্দিষ্ট করতে পারেন। মানচিত্রটি একটি এমবেডেড ফ্ল্যাশ প্লেয়ার ব্যবহার করে ব্রাউজারে রেন্ডার করা হয়। মনে রাখবেন মানচিত্রটি স্ক্রোলযোগ্য বা টেনে আনা যায় না, তবে জুম করার অনুমতি দেওয়ার জন্য কনফিগার করা যেতে পারে।

উদাহরণ

আমাদের এখানে দুটি উদাহরণ রয়েছে: একটি যা অঞ্চল প্রদর্শন শৈলী ব্যবহার করে এবং আরেকটি যা মার্কার প্রদর্শন শৈলী ব্যবহার করে।

অঞ্চলের উদাহরণ

অঞ্চল শৈলী আপনার বরাদ্দ করা মানগুলির সাথে সম্পর্কিত রঙ দিয়ে সমগ্র অঞ্চলগুলিকে (সাধারণত দেশগুলি) পূরণ করে৷ আপনার options['dataMode'] = 'regions' বরাদ্দ করে অঞ্চল শৈলী নির্দিষ্ট করুন।

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="regions_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', { 'packages':['geomap'], // Note: you will need to get a mapsApiKey for your project. // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings 'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' }); google.charts.setOnLoadCallback(drawMap); function drawMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] ]); var options = {}; options['dataMode'] = 'regions'; var container = document.getElementById('regions_div'); var geomap = new google.visualization.GeoMap(container); geomap.draw(data, options); }; <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="regions_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', { 'packages':['geomap'], // Note: you will need to get a mapsApiKey for your project. // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings 'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' }); google.charts.setOnLoadCallback(drawMap); function drawMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] ]); var options = {}; options['dataMode'] = 'regions'; var container = document.getElementById('regions_div'); var geomap = new google.visualization.GeoMap(container); geomap.draw(data, options); };
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geomap'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};
        options['dataMode'] = 'regions';

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</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': ['geomap']});
   google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['City', 'Popularity'],
        ['New York', 200],
        ['Boston', 300],
        ['Miami', 400],
        ['Chicago', 500],
        ['Los Angeles', 600],
        ['Houston', 700]
      ]);

      var options = {};
      options['region'] = 'US';
      options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
      options['dataMode'] = 'markers';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
    };

  </script>
</head>

<body>
    <div id='map_canvas'></div>
</body>

</html>

লোড হচ্ছে

google.charts.load প্যাকেজের নাম "geomap"

  google.charts.load('current', {'packages': ['geomap']});

জিওম্যাপ ভিজ্যুয়ালাইজেশন ক্লাসের নাম হল google.visualization.GeoMap

  var visualization = new google.visualization.GeoMap(container);

উপাত্ত বিন্যাস

দুটি ঠিকানা বিন্যাস সমর্থিত, যার প্রত্যেকটি আলাদা সংখ্যক কলাম সমর্থন করে এবং প্রতিটি কলামের জন্য বিভিন্ন ডেটা প্রকার। টেবিলের সমস্ত ঠিকানা এক বা অন্য ব্যবহার করা আবশ্যক; আপনি প্রকার মিশ্রিত করতে পারবেন না।

  • বিন্যাস 1: অক্ষাংশ/দ্রাঘিমাংশের অবস্থান। এই বিন্যাসটি তখনই কাজ করে যখন dataMode বিকল্পটি 'মার্কার' হয়। যদি এই বিন্যাসটি ব্যবহার করা হয়, তাহলে আপনাকে Google Map Javascript অন্তর্ভুক্ত করতে হবে না। অবস্থানটি দুটি কলামে প্রবেশ করা হয়েছে, পাশাপাশি দুটি ঐচ্ছিক কলাম:
    1. [ সংখ্যা, প্রয়োজনীয় ] একটি অক্ষাংশ। ধনাত্মক সংখ্যা উত্তর, ঋণাত্মক সংখ্যা দক্ষিণ।
    2. [ সংখ্যা, প্রয়োজনীয় ] একটি দ্রাঘিমাংশ। ধনাত্মক সংখ্যা পূর্ব, ঋণাত্মক সংখ্যা পশ্চিম।
    3. [ সংখ্যা, ঐচ্ছিক ] একটি সংখ্যাসূচক মান প্রদর্শিত হয় যখন ব্যবহারকারী এই অঞ্চলে ঘোরে। কলাম 4 ব্যবহার করা হলে, এই কলামটি প্রয়োজন।
    4. [ স্ট্রিং , ঐচ্ছিক ] অতিরিক্ত স্ট্রিং টেক্সট প্রদর্শিত হয় যখন ব্যবহারকারী এই অঞ্চলে ঘোরায়।
  • বিন্যাস 2: ঠিকানা, দেশের নাম, অঞ্চলের নাম অবস্থান, বা মার্কিন মেট্রোপলিটন এলাকা কোড। এই বিন্যাসটি 'মার্কার' বা 'অঞ্চল'-এ সেট করা dataMode বিকল্পের সাথে কাজ করে। অবস্থানটি একটি কলামে এবং দুটি ঐচ্ছিক কলামে প্রবেশ করানো হয়েছে:
    1. [ স্ট্রিং, প্রয়োজনীয় ] একটি মানচিত্রের অবস্থান। নিম্নলিখিত বিন্যাস গ্রহণ করা হয়:
      • একটি নির্দিষ্ট ঠিকানা (উদাহরণস্বরূপ, "1600 Pennsylvania Ave")।
      • একটি স্ট্রিং হিসাবে একটি দেশের নাম (উদাহরণস্বরূপ, "ইংল্যান্ড"), বা একটি বড় হাতের ISO-3166 কোড বা এর ইংরেজি পাঠ্য সমতুল্য (উদাহরণস্বরূপ, "GB" বা "United Kingdom")।
      • একটি বড় হাতের ISO-3166-2 অঞ্চলের কোড নাম বা এর ইংরেজি পাঠ্য সমতুল্য (উদাহরণস্বরূপ, "US-NJ" বা "New Jersey")। দ্রষ্টব্য : অঞ্চলগুলি শুধুমাত্র তখনই নির্দিষ্ট করা যেতে পারে যখন ডেটামোড বিকল্পটি 'অঞ্চল'-এ সেট করা থাকে।
      • একটি মেট্রোপলিটন এরিয়া কোড । এই তিন-সংখ্যার মেট্রো কোডগুলি বিভিন্ন অঞ্চলকে নির্দিষ্ট করতে ব্যবহৃত হয়; US কোড শুধুমাত্র সমর্থিত. মনে রাখবেন যে এগুলি টেলিফোন এরিয়া কোডগুলির মতো নয় ৷
    2. [ সংখ্যা, ঐচ্ছিক ] একটি সংখ্যাসূচক মান প্রদর্শিত হয় যখন ব্যবহারকারী এই অঞ্চলে ঘোরে। কলাম 3 ব্যবহার করা হলে, এই কলামটি প্রয়োজন।
    3. [ স্ট্রিং , ঐচ্ছিক ] অতিরিক্ত স্ট্রিং টেক্সট প্রদর্শিত হয় যখন ব্যবহারকারী এই অঞ্চলে ঘোরায়।

দ্রষ্টব্য: একটি মানচিত্র সর্বাধিক 400টি এন্ট্রি প্রদর্শন করতে পারে; আপনার DataTable বা DataView 400 টির বেশি সারি ধারণ করলে, শুধুমাত্র প্রথম 400টি দেখানো হবে। দ্রুততম মোড হল dataMode='regions' যেখানে ISO কোড হিসাবে নির্দিষ্ট করা হয়েছে, এবং dataMode='markers' ল্যাট/লং এন্টি সহ। সবচেয়ে ধীর গতির মোড হল একটি স্ট্রিং ঠিকানা সহ dataMode='markers' ।

গুরুত্বপূর্ণ: আপনার DataTable অবশ্যই আপনি ব্যবহার করতে চান এমন যেকোনো কলামের আগে প্রতিটি ঐচ্ছিক কলাম অন্তর্ভুক্ত করতে হবে। সুতরাং, উদাহরণস্বরূপ, আপনি যদি একটি ল্যাট/লং টেবিল নির্দিষ্ট করতে চান, এবং শুধুমাত্র কলাম 1, 2 এবং 4 ব্যবহার করতে চান, আপনার DataTable এখনও কলাম 3 সংজ্ঞায়িত করতে হবে (যদিও আপনাকে এটিতে কোনো মান যোগ করতে হবে না) :

dataTable = new google.visualization.DataTable();
dataTable.addRows(1);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'HOVER', 'HoverText');

dataTable.setValue(0,0,47.00);
dataTable.setValue(0,1,-122.00);
dataTable.setValue(0,3,"Hello World!");

কনফিগারেশন অপশন

নাম টাইপ ডিফল্ট বর্ণনা
region স্ট্রিং 'বিশ্ব'

মানচিত্রে প্রদর্শিত এলাকা। (আশেপাশের এলাকাগুলিও প্রদর্শিত হবে।) হয় একটি দেশের কোড (বড় হাতের ISO-3166 ফর্ম্যাটে), অথবা নিম্নলিখিত স্ট্রিংগুলির একটি হতে পারে:

  • world - (পুরো বিশ্ব)
  • us_metro - (মার্কিন যুক্তরাষ্ট্র, মেট্রো এলাকা)
  • 005 - (দক্ষিণ আমেরিকা)
  • 013 - (মধ্য আমেরিকা)
  • 021 - (উত্তর আমেরিকা)
  • 002 - (সমস্ত আফ্রিকা)
  • 017 - (মধ্য আফ্রিকা)
  • 015 - (উত্তর আফ্রিকা)
  • 018 - (দক্ষিণ আফ্রিকা)
  • 030 - (পূর্ব এশিয়া)
  • 034 - (দক্ষিণ এশিয়া)
  • 035 - (এশিয়া/প্রশান্ত মহাসাগরীয় অঞ্চল)
  • 009 - (ওশেনিয়া)
  • 145 - (মধ্যপ্রাচ্য)
  • 143 - (মধ্য এশিয়া)
  • 151 - (উত্তর এশিয়া)
  • 154 - (উত্তর ইউরোপ)
  • 155 - (পশ্চিম ইউরোপ)
  • 039 - (দক্ষিণ ইউরোপ)

জিওম্যাপ স্ক্রোলিং বা টেনে আনার আচরণ সক্ষম করে না এবং শুধুমাত্র সীমিত জুমিং আচরণ। showZoomOut প্রপার্টি সেট করে একটি মৌলিক জুম আউট সক্ষম করা যেতে পারে।

dataMode স্ট্রিং 'অঞ্চল'

মানচিত্রে মানগুলি কীভাবে প্রদর্শন করবেন। দুটি মান সমর্থিত:

  • regions - উপযুক্ত রঙ দিয়ে একটি সম্পূর্ণ অঞ্চলকে রঙ করুন। এই বিকল্পটি অক্ষাংশ/দ্রাঘিমাংশ ঠিকানাগুলির সাথে ব্যবহার করা যাবে না। অঞ্চলের উদাহরণ দেখুন।
  • markers - একটি অঞ্চলের উপর একটি বিন্দু প্রদর্শন করে, রঙ এবং আকার মান নির্দেশ করে। মার্কার উদাহরণ দেখুন।
width স্ট্রিং '556px' ভিজ্যুয়ালাইজেশনের প্রস্থ। যদি কোন ইউনিট দেওয়া না হয়, ডিফল্ট ইউনিট হল পিক্সেল।
height স্ট্রিং '347px' ভিজ্যুয়ালাইজেশনের উচ্চতা। যদি কোন ইউনিট দেওয়া না হয়, ডিফল্ট ইউনিট হল পিক্সেল।
colors 0xRRGGBB বিন্যাসে RGB নম্বরের অ্যারে [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] ভিজ্যুয়ালাইজেশনের মানগুলিতে বরাদ্দ করার জন্য রঙের গ্রেডিয়েন্ট। আপনার কমপক্ষে দুটি মান থাকতে হবে; গ্রেডিয়েন্টে আপনার সমস্ত মান, সাথে গণনা করা মধ্যস্থতামূলক মানগুলি অন্তর্ভুক্ত থাকবে, সবচেয়ে ছোট মান হিসাবে হালকা রঙ এবং সর্বোচ্চ হিসাবে গাঢ় রঙ।
showLegend বুলিয়ান সত্য সত্য হলে, মানচিত্রের জন্য একটি কিংবদন্তি প্রদর্শন করুন।
showZoomOut বুলিয়ান মিথ্যা সত্য হলে, zoomOutLabel বৈশিষ্ট্য দ্বারা নির্দিষ্ট লেবেল সহ একটি বোতাম প্রদর্শন করুন। মনে রাখবেন যে এই বোতামটি ক্লিক করার সময় কিছুই করে না , শুধুমাত্র zoomOut ইভেন্টটি ফেলে দেওয়া ছাড়া৷ জুমিং পরিচালনা করতে, এই ইভেন্টটি ধরুন এবং region বিকল্পটি পরিবর্তন করুন৷ আপনি শুধুমাত্র showZoomOut নির্দিষ্ট করতে পারেন যদি region বিকল্পটি বিশ্ব দৃশ্যের চেয়ে ছোট হয়। আচরণে জুম সক্ষম করার একটি উপায় হল regionClick ইভেন্টের জন্য শোনা, region সম্পত্তিকে উপযুক্ত অঞ্চলে পরিবর্তন করা এবং মানচিত্রটি পুনরায় লোড করা।
zoomOutLabel স্ট্রিং 'ছোট করা' জুম বোতামের জন্য লেবেল।

পদ্ধতি

পদ্ধতি রিটার্ন টাইপ বর্ণনা
draw(data, options) কোনোটিই নয় মানচিত্র আঁকে। অঙ্কন সম্পন্ন হওয়ার আগে ফিরে আসতে পারে ( drawingDone() ইভেন্ট দেখুন)।
getSelection() নির্বাচন উপাদানের অ্যারে স্ট্যান্ডার্ড getSelection() বাস্তবায়ন। নির্বাচিত উপাদান সারি হয়. এই পদ্ধতিটি তখনই কাজ করে যখন dataMode বিকল্পটি 'অঞ্চল' হয়। আপনি শুধুমাত্র একটি নির্ধারিত মান সহ একটি অঞ্চল নির্বাচন করতে পারেন৷
setSelection( selection ) কোনোটিই নয় স্ট্যান্ডার্ড setSelection() বাস্তবায়ন। একটি নির্বাচনকে সারি নির্বাচন হিসাবে বিবেচনা করে এবং একাধিক সারি নির্বাচন সমর্থন করে। শুধুমাত্র নির্ধারিত মান সহ অঞ্চলগুলি নির্বাচন করা যেতে পারে।

ঘটনা

নাম বর্ণনা বৈশিষ্ট্য
error চার্ট রেন্ডার করার চেষ্টা করার সময় একটি ত্রুটি ঘটলে বহিস্কার করা হয়। আইডি, বার্তা
select

যখন ব্যবহারকারী একটি নির্দিষ্ট মান সহ একটি অঞ্চলে ক্লিক করে তখন বহিস্কার করা হয়৷ কি নির্বাচন করা হয়েছে তা জানতে, getSelection() কল করুন। dataMode বিকল্পটি 'অঞ্চল'-এ সেট করা থাকলেই উপলভ্য।

দ্রষ্টব্য : নির্দিষ্ট সীমাবদ্ধতার কারণে, আপনি যদি আপনার ব্রাউজারে একটি সার্ভার থেকে (যেমন, "http://www") ফাইল হিসাবে পৃষ্ঠাটি অ্যাক্সেস করেন (যেমন, "file://") তবে select ইভেন্টটি নিক্ষেপ করা হয় না (যেমন, "http://www" )

 কোনোটিই নয়
regionClick

একটি অঞ্চলে ক্লিক করা হলে কল করা হয়। 'অঞ্চল' এবং 'মার্কার' dataMode উভয়ের জন্যই কাজ করে। যাইহোক, মার্কার মোডে, 'অঞ্চল' বিকল্পে নির্ধারিত নির্দিষ্ট দেশের জন্য এটি নিক্ষেপ করা হবে না (যদি একটি নির্দিষ্ট দেশ তালিকাভুক্ত হয়)।

দ্রষ্টব্য : নির্দিষ্ট সীমাবদ্ধতার কারণে, আপনি যদি আপনার ব্রাউজারে একটি সার্ভার থেকে (যেমন, "http://www") একটি ফাইল (যেমন, "file://") হিসাবে পৃষ্ঠাটি অ্যাক্সেস করেন তবে regionClick ইভেন্টটি নিক্ষেপ করা হয় না (যেমন, "http://www" )

 একটি একক সম্পত্তি, region সহ একটি বস্তু, যা আইএসও-3166 বিন্যাসে একটি স্ট্রিং যা ক্লিক করা অঞ্চলের বর্ণনা করে।
zoomOut

জুম আউট বোতামটি ক্লিক করলে কল করা হয়। জুমিং পরিচালনা করতে, এই ইভেন্টটি ধরুন এবং region বিকল্পটি পরিবর্তন করুন৷

দ্রষ্টব্য : নির্দিষ্ট সীমাবদ্ধতার কারণে, আপনি যদি আপনার ব্রাউজারে একটি সার্ভার থেকে (যেমন, "http://www") ফাইল হিসাবে (যেমন, "file://") পৃষ্ঠাটি অ্যাক্সেস করেন তবে zoomOut ইভেন্টটি নিক্ষেপ করা হয় না। )

 কোনোটিই নয়
drawingDone জিওম্যাপ আঁকা শেষ হলে কল করা হয়। কোনোটিই নয়

ডেটা নীতি

অবস্থানগুলি Google মানচিত্র দ্বারা জিওকোড করা হয়৷ জিওকোডিংয়ের প্রয়োজন নেই এমন কোনো ডেটা কোনো সার্ভারে পাঠানো হয় না। তাদের ডেটা নীতি সম্পর্কে আরও তথ্যের জন্য দয়া করে Google মানচিত্র পরিষেবার শর্তাবলী দেখুন৷

মন্তব্য

ফ্ল্যাশ নিরাপত্তা সেটিংসের কারণে, ব্রাউজারে একটি ফাইল অবস্থান থেকে অ্যাক্সেস করার সময় এটি (এবং সমস্ত ফ্ল্যাশ-ভিত্তিক ভিজ্যুয়ালাইজেশন) সঠিকভাবে কাজ নাও করতে পারে (যেমন, ফাইল:///c:/webhost/myhost/myviz.html) থেকে একটি ওয়েব সার্ভার URL (যেমন, http://www.myhost.com/myviz.html)। এটি সাধারণত শুধুমাত্র একটি পরীক্ষার সমস্যা। Macromedia ওয়েব সাইটে বর্ণিত হিসাবে আপনি এই সমস্যাটি কাটিয়ে উঠতে পারেন৷