Big Data and Analytics Customizing Geoms (color, size, shape) গাইড ও নোট

গুগল চার্ট (Google Charts) ব্যবহার করে আপনি Geom উপাদানগুলোর (যেমন স্ক্যাটার প্লট, বার চার্ট, লাইন গ্রাফ) রঙ (color), আকার (size), এবং আকার (shape) কাস্টমাইজ করতে পারেন। এই কাস্টমাইজেশন ডেটার ভিজুয়াল উপস্থাপনাকে আরও স্পষ্ট এবং সুন্দর করে তোলে।

এখানে আমরা গুগল চার্টে বিভিন্ন geom (যেমন স্ক্যাটার প্লট, বার চার্ট ইত্যাদি) কাস্টমাইজ করার জন্য রঙ, আকার এবং আকৃতি কাস্টমাইজ করার পদ্ধতি নিয়ে আলোচনা করব।

Google Charts এ Geoms কাস্টমাইজেশন

গুগল চার্টে কাস্টমাইজেশন করার জন্য আপনি JavaScript ব্যবহার করেন, যেখানে বিভিন্ন ধরনের options ফাংশনের মাধ্যমে গ্রাফের ভিজুয়াল উপাদানগুলো কাস্টমাইজ করা হয়। এখানে মূল কাস্টমাইজেশন উপাদানগুলো হল:

1. Color (রঙ) - পয়েন্ট, বার, বা লাইনগুলোর রঙ পরিবর্তন করা।
2. Size (আকার) - ডেটা পয়েন্ট বা বারের আকার পরিবর্তন করা।
3. Shape (আকৃতি) - ডেটা পয়েন্টের আকৃতি পরিবর্তন করা, বিশেষত স্ক্যাটার প্লট বা অন্যান্য গ্রাফে।

1. Color (রঙ) কাস্টমাইজেশন

গুগল চার্টে আপনি series অপশন ব্যবহার করে প্রতিটি সিরিজের জন্য আলাদা রঙ নির্বাচন করতে পারেন।

উদাহরণ: Scatter Plot এর Color কাস্টমাইজেশন

<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([
      ['Weight', 'Mileage'],
      [2.620, 21.0],
      [2.875, 22.8],
      [3.920, 17.0],
      [3.800, 16.5],
      [4.225, 15.0],
      [5.000, 14.0]
    ]);

    var options = {
      title: 'Car Weight vs Mileage',
      hAxis: {title: 'Weight'},
      vAxis: {title: 'Mileage'},
      series: {
        0: {color: '#FF0000'}  // Red color for the first series
      }
    };

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

<div id="chart_div" style="width: 900px; height: 500px;"></div>

এখানে:

• series: {0: {color: '#FF0000'}} - প্রথম সিরিজের জন্য লাল রঙ (red) ব্যবহার করা হয়েছে।

2. Size (আকার) কাস্টমাইজেশন

গুগল চার্টে, বিশেষত স্ক্যাটার প্লট বা বারে আকার কাস্টমাইজ করার জন্য আপনি size প্রপার্টি ব্যবহার করতে পারেন, যা ডেটার ভেরিয়েবলের উপর ভিত্তি করে আকার পরিবর্তন করতে সাহায্য করে।

উদাহরণ: Scatter Plot এর Size কাস্টমাইজেশন

<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([
      ['Weight', 'Mileage', 'Horsepower'],
      [2.620, 21.0, 110],
      [2.875, 22.8, 140],
      [3.920, 17.0, 180],
      [3.800, 16.5, 160],
      [4.225, 15.0, 120],
      [5.000, 14.0, 150]
    ]);

    var options = {
      title: 'Car Weight vs Mileage',
      hAxis: {title: 'Weight'},
      vAxis: {title: 'Mileage'},
      sizeAxis: {minSize: 5, maxSize: 20}  // Size for the bubbles
    };

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

<div id="chart_div" style="width: 900px; height: 500px;"></div>

এখানে:

• sizeAxis: {minSize: 5, maxSize: 20} - পয়েন্টগুলির আকার সাইজ পরিবর্তন করা হয়েছে, যেখানে সাইজের পরিসীমা ৫ থেকে ২০ এর মধ্যে নির্ধারিত হয়েছে।

3. Shape (আকৃতি) কাস্টমাইজেশন

গুগল চার্টে Shape কাস্টমাইজেশন করার জন্য আপনি স্ক্যাটার প্লটের জন্য ডেটার আকৃতি পরিবর্তন করতে পারেন। এটি pointShape প্রপার্টি ব্যবহার করে করা হয়।

উদাহরণ: Scatter Plot এর Shape কাস্টমাইজেশন

<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([
      ['Weight', 'Mileage'],
      [2.620, 21.0],
      [2.875, 22.8],
      [3.920, 17.0],
      [3.800, 16.5],
      [4.225, 15.0],
      [5.000, 14.0]
    ]);

    var options = {
      title: 'Car Weight vs Mileage',
      hAxis: {title: 'Weight'},
      vAxis: {title: 'Mileage'},
      pointShape: 'triangle'  // Triangle shape for the scatter plot points
    };

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

<div id="chart_div" style="width: 900px; height: 500px;"></div>

এখানে:

• pointShape: 'triangle' - স্ক্যাটার প্লটের পয়েন্টগুলোর আকৃতি ট্রায়াঙ্গেল (triangle) হিসাবে পরিবর্তন করা হয়েছে। আপনি অন্যান্য আকৃতিও ব্যবহার করতে পারেন, যেমন 'circle', 'square', 'star', ইত্যাদি।

সারমর্ম

গুগল চার্টে color, size, এবং shape কাস্টমাইজেশন ব্যবহার করে আপনি ডেটার ভিজুয়াল উপাদানগুলোর প্রদর্শন আরও স্পষ্ট এবং আকর্ষণীয় করে তুলতে পারেন। এই কাস্টমাইজেশনগুলি ডেটা সম্পর্কিত আরও তথ্য উপস্থাপন করতে সহায়ক এবং গ্রাফকে আরও পাঠযোগ্য করে তোলে।

গুগল চার্টের series, sizeAxis, এবং pointShape প্রপার্টির মাধ্যমে আপনি স্ক্যাটার প্লট বা অন্যান্য গ্রাফের রঙ, আকার এবং আকৃতি কাস্টমাইজ করতে পারবেন, যা ডেটা বিশ্লেষণকে আরও কার্যকরী এবং দর্শনীয় করে তোলে।