Hierarchical Data Visualization (Org Chart, TreeMap)

Hierarchical Data Visualization (হায়ারার্কিকাল ডাটা ভিজ্যুয়ালাইজেশন) হলো ডেটা প্রদর্শনের একটি পদ্ধতি যেখানে ডেটার সম্পর্ক এবং স্তরের ওপর ভিত্তি করে বিভিন্ন চার্ট তৈরি করা হয়। এটি সাধারণত অভ্যন্তরীণ সম্পর্ক এবং হায়ারার্কিকাল স্ট্রাকচার যেমন অর্গ চার্ট (Org Chart) এবং ট্রি ম্যাপ (TreeMap) তৈরির জন্য ব্যবহৃত হয়।

GWT (Google Web Toolkit) এবং Google Charts এর মাধ্যমে সহজেই Hierarchical Data ভিজ্যুয়ালাইজেশন করা সম্ভব। এই টিউটোরিয়ালে আমরা দেখব কিভাবে GWT ব্যবহার করে Org Chart এবং TreeMap তৈরি করা যায় এবং হায়ারার্কিকাল ডেটা ভিজ্যুয়ালাইজেশন প্রয়োগ করা যায়।

Org Chart তৈরি করা

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

Org Chart তৈরি করার ধাপসমূহ

১. Google Charts API লোড করা

প্রথমে, Google Charts API লোড করতে হবে এবং Org Chart প্যাকেজ যোগ করতে হবে।

public class OrgChartExample {
    public native void loadGoogleCharts() /*-{
        $wnd.google.charts.load('current', {
            packages: ['orgchart']
        });
    }-*/;
}

এখানে orgchart প্যাকেজ লোড করা হয়েছে, যা Org Chart তৈরির জন্য প্রয়োজন।

২. Org Chart তৈরি করা

public class OrgChartExample {
    public native void drawOrgChart() /*-{
        var data = new $wnd.google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        data.addRows([
            ['Mike', '', 'The CEO'],
            ['Jim', 'Mike', 'VP of Marketing'],
            ['Alice', 'Mike', 'VP of Engineering'],
            ['Bob', 'Jim', 'Marketing Manager'],
            ['Carol', 'Alice', 'Engineering Manager']
        ]);

        var chart = new $wnd.google.visualization.OrgChart($doc.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true});
    }-*/;
}

ব্যাখ্যা:

• এখানে DataTable তৈরি করা হয়েছে তিনটি কলাম নিয়ে: Name, Manager, এবং ToolTip।
• addRows() ফাংশন দিয়ে ডেটা যোগ করা হয়েছে, যেখানে প্রথম কলাম সদস্যের নাম, দ্বিতীয় কলাম তাদের ম্যানেজারের নাম এবং তৃতীয় কলাম টুলটিপ তথ্য।
• OrgChart ব্যবহৃত হচ্ছে, যা অর্গ চার্ট ড্র করে।

৩. UI-তে Org Chart প্রদর্শন করা

public class OrgChartUI extends Composite {
    private FlowPanel panel;

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

    public native void drawOrgChart() /*-{
        // Org Chart কোড এখানে ব্যবহার করুন
    }-*/;
}

এখানে FlowPanel ব্যবহার করা হয়েছে, যাতে Org Chart UI-তে প্রদর্শিত হয়।

TreeMap তৈরি করা

TreeMap একটি হায়ারার্কিকাল ডাটা ভিজ্যুয়ালাইজেশন টুল, যা একটি চার্টে ডেটার বিভিন্ন স্তর প্রদর্শন করতে সহায়ক। এটি ডেটার পার্থক্য এবং সম্পর্কের ভিত্তিতে ভিজ্যুয়াল উপস্থাপনা তৈরি করে, সাধারণত ক্ষেত্রবিশেষে বড় ডেটা সেটের বিশ্লেষণে ব্যবহৃত হয়।

TreeMap তৈরি করার ধাপসমূহ

১. Google Charts API লোড করা

Google Charts API লোড করতে এবং TreeMap প্যাকেজ যোগ করতে হবে:

public class TreeMapExample {
    public native void loadGoogleCharts() /*-{
        $wnd.google.charts.load('current', {
            packages: ['treemap']
        });
    }-*/;
}

এখানে treemap প্যাকেজ লোড করা হয়েছে, যা TreeMap তৈরি করতে ব্যবহৃত হবে।

২. TreeMap তৈরি করা

public class TreeMapExample {
    public native void drawTreeMap() /*-{
        var data = new $wnd.google.visualization.DataTable();
        data.addColumn('string', 'ID');
        data.addColumn('string', 'Parent');
        data.addColumn('number', 'Size');
        data.addColumn('string', 'Color');

        data.addRows([
            ['A', null, 100, 'red'],
            ['B', 'A', 60, 'blue'],
            ['C', 'A', 40, 'green'],
            ['D', 'B', 20, 'yellow'],
            ['E', 'B', 40, 'orange']
        ]);

        var options = {
            width: 600,
            height: 400,
            minColor: '#ff0000',
            midColor: '#ffff00',
            maxColor: '#00ff00'
        };

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

ব্যাখ্যা:

• DataTable তৈরি করা হয়েছে চারটি কলাম নিয়ে: ID, Parent, Size, এবং Color।
• addRows() দিয়ে বিভিন্ন নোড এবং তাদের আকার (size) এবং রঙ নির্ধারণ করা হয়েছে।
• TreeMap ড্র করার জন্য TreeMap চার্ট ব্যবহার করা হয়েছে, যেখানে options ব্যবহার করে চার্টের আকার এবং রঙ কাস্টমাইজ করা হয়েছে।

৩. UI-তে TreeMap প্রদর্শন করা

public class TreeMapUI extends Composite {
    private FlowPanel panel;

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

    public native void drawTreeMap() /*-{
        // TreeMap কোড এখানে ব্যবহার করুন
    }-*/;
}

এখানে FlowPanel ব্যবহার করা হয়েছে, যাতে TreeMap UI-তে প্রদর্শিত হয়।

সারাংশ

Hierarchical Data Visualization Google Charts এর মাধ্যমে GWT অ্যাপ্লিকেশনগুলিতে খুব সহজে কাস্টমাইজ এবং প্রদর্শন করা যেতে পারে। Org Chart এবং TreeMap এর মাধ্যমে ডেটার হায়ারার্কিকাল সম্পর্ক এবং স্তর প্রদর্শন করা যায়। Org Chart ব্যবহৃত হয় সাধারণত প্রতিষ্ঠানের স্ট্রাকচার বা সম্পর্ক দেখানোর জন্য, এবং TreeMap ব্যবহৃত হয় বড় ডেটা সেটের সম্পর্ক এবং বিশ্লেষণ প্রদর্শনের জন্য। GWT এবং Google Charts ব্যবহার করে আপনি এই চার্টগুলো ইন্টারেকটিভ এবং কাস্টমাইজ করে ব্যবহারকারীদের জন্য আরও কার্যকরী এবং দৃশ্যমান করতে পারেন।