Scatter Chart: দুই ভ্যারিয়েবলের সম্পর্ক প্রদর্শন

Scatter Chart (স্ক্যাটার চার্ট) হল একটি ধরনের ডাটা ভিজ্যুয়ালাইজেশন যা দুই ভ্যারিয়েবলের মধ্যে সম্পর্ক প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত ডাটা পয়েন্টগুলোকে দুইটি অক্ষের (X এবং Y) মাধ্যমে প্লট করে, যা সম্পর্ক এবং প্রবণতা দেখাতে সহায়তা করে।

GWT (Google Web Toolkit) এবং Google Charts API এর মাধ্যমে আমরা সহজেই Scatter Chart তৈরি করতে পারি, যা দুই ভ্যারিয়েবলের মধ্যে সম্পর্ক বা সম্পর্কের কোনো ধরন দেখায়।

Scatter Chart তৈরি করার জন্য GWT এবং Google Charts ব্যবহার

এখন আমরা দেখব কিভাবে GWT এর সাথে Google Charts ব্যবহার করে একটি Scatter Chart তৈরি করা যায়, যেখানে দুটি ভ্যারিয়েবলের মধ্যে সম্পর্ক প্রদর্শন করা হবে।

১. Google Charts API লোড করা

প্রথমে Google Charts API লোড করতে হবে, যাতে আমরা Scatter Chart তৈরি করতে পারি। GWT এর মাধ্যমে JavaScript Native Interface (JSNI) ব্যবহার করে এই API লোড করা হয়।

কোড উদাহরণ:

public class ScatterChartExample {
    public native void drawScatterChart() /*-{
        google.charts.load('current', {
            packages: ['corechart', 'scatter']
        });
        google.charts.setOnLoadCallback(function () {
            var data = google.visualization.arrayToDataTable([
                ['X', 'Y'],
                [1, 3],
                [2, 4],
                [3, 6],
                [4, 8],
                [5, 10],
                [6, 12]
            ]);

            var options = {
                title: 'Scatter Chart Example',
                hAxis: { title: 'X Axis' },
                vAxis: { title: 'Y Axis' },
                legend: 'none'
            };

            var chart = new $wnd.google.visualization.ScatterChart($doc.getElementById('scatter_chart_div'));
            chart.draw(data, options);
        });
    }-*/;
}

ব্যাখ্যা:

• google.charts.load(): এটি Google Charts API লোড করে, যেখানে scatter প্যাকেজটি অন্তর্ভুক্ত করা হয়েছে যাতে Scatter Chart তৈরি করা যায়।
• google.visualization.arrayToDataTable(): এটি ডাটা সেট তৈরি করে, যেখানে X এবং Y ভ্যারিয়েবলের মান দেওয়া হয়েছে।
• options: এখানে Chart এর শিরোনাম, অক্ষের শিরোনাম এবং অন্যান্য কাস্টমাইজেশন অপশন দেয়া হয়েছে।
• $wnd.google.visualization.ScatterChart: এটি Scatter Chart তৈরি করতে ব্যবহৃত ফাংশন। scatter_chart_div হল div এলিমেন্ট যেখানে চার্টটি রেন্ডার হবে।

২. HTML ডিভ তৈরি করা

এখন, আপনি একটি div এলিমেন্ট তৈরি করবেন, যেখানে Scatter Chart প্রদর্শিত হবে। এটি GWT এর HTML widget বা FlowPanel এর মাধ্যমে করা যায়।

কোড উদাহরণ:

public class ChartUI extends Composite {
    private FlowPanel panel;

    public ChartUI() {
        panel = new FlowPanel();
        panel.add(new HTML("<div id='scatter_chart_div' style='width: 900px; height: 500px;'></div>"));
        initWidget(panel);
        drawScatterChart();
    }

    public void drawScatterChart() {
        // Scatter chart drawing code will be inserted here (as shown in previous step)
    }
}

এখানে, FlowPanel বা HTML widget ব্যবহার করে একটি div তৈরি করা হয়েছে, যার ID scatter_chart_div এবং এটি চার্টের জন্য নির্ধারিত জায়গা।

Scatter Chart কাস্টমাইজেশন

Scatter Chart এর বিভিন্ন অপশন কাস্টমাইজ করা যেতে পারে, যেমন:

১. অক্ষের শিরোনাম (Axis Titles)

প্রতিটি অক্ষের জন্য আপনি শিরোনাম নির্ধারণ করতে পারেন।

var options = {
    hAxis: { title: 'X Axis' },
    vAxis: { title: 'Y Axis' }
};

২. Chart Title (চার্ট শিরোনাম)

চার্টের উপরে শিরোনাম যোগ করতে পারেন।

var options = {
    title: 'Scatter Chart Example'
};

৩. Legend (লেজেন্ড)

লেজেন্ড অপশনটি ব্যবহার করে আপনি চার্টের ডাটা সিরিজের নাম প্রদর্শন করতে পারেন।

var options = {
    legend: 'none'
};

৪. Point Size (পয়েন্ট সাইজ)

ডাটা পয়েন্টের আকার কাস্টমাইজ করতে পারেন।

var options = {
    pointSize: 10
};

Scatter Chart ব্যবহার করার উপকারিতা

১. দুই ভ্যারিয়েবলের সম্পর্ক বিশ্লেষণ

Scatter Chart দুটি ভ্যারিয়েবলের মধ্যে সম্পর্ক বা ট্রেন্ড দেখানোর জন্য উপযুক্ত। এটি সহজেই সম্পর্কের ধরন যেমন লিনিয়ার, নন-লিনিয়ার বা কোনো স্পেসিফিক প্যাটার্ন প্রদর্শন করে।

২. ডাটা ট্রেন্ড শনাক্তকরণ

এটি ব্যবহার করে আপনি ডাটা পয়েন্টগুলির মধ্যে কোন ট্রেন্ড রয়েছে কিনা তা শনাক্ত করতে পারেন, যেমন ক্রমবর্ধমান বা হ্রাসমান সম্পর্ক।

৩. ইন্টারেকটিভ ভিজ্যুয়ালাইজেশন

Google Charts Scatter Chart ইন্টারেকটিভ ফিচার সমর্থন করে, যার মাধ্যমে ব্যবহারকারী চার্টের পয়েন্টের উপর ক্লিক বা হোভার করে আরো বিস্তারিত তথ্য দেখতে পারে।

সারাংশ

GWT Google Charts এর মাধ্যমে আপনি সহজেই Scatter Chart তৈরি করতে পারেন, যা দুটি ভ্যারিয়েবলের মধ্যে সম্পর্ক প্রদর্শন করে। GWT এর সাথে Google Charts API ব্যবহার করে আপনি ডাটা পয়েন্টগুলির মধ্যে সম্পর্ক বিশ্লেষণ করতে পারবেন এবং ডাটা ভিজ্যুয়ালাইজেশনকে আরও কার্যকরী ও আকর্ষণীয় করে তুলতে পারবেন।