TreeMap এবং Sankey Diagram হল ভিজ্যুয়ালাইজেশন টুলস যা ডেটা সম্পর্ক, শ্রেণীবদ্ধকরণ এবং প্রবাহ দেখতে সাহায্য করে। এই দুটি চার্টই গুগল চার্টে সহজে তৈরি করা যায় এবং সেগুলি ব্যবহার করে আপনি ডেটার মধ্যে সম্পর্ক এবং প্রবাহ বুঝতে পারেন।
এই টিউটোরিয়ালে, আমরা TreeMap এবং Sankey Diagrams তৈরি করার পদ্ধতি এবং তাদের কাস্টমাইজেশন দেখব।
১. TreeMap তৈরি করা
TreeMap একটি হায়ারার্কিক্যাল (hierarchical) ডেটা ভিজ্যুয়ালাইজেশন টুল, যা ডেটাকে একটি বক্সের মাধ্যমে প্রদর্শন করে। প্রতিটি বক্সের আকার তার মানের প্রতিনিধিত্ব করে এবং এটি একটি গাছের মতো হায়ারার্কি তৈরি করে।
কোড উদাহরণ (TreeMap):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google TreeMap Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['treemap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Parent', 'Value'],
['A', null, 100],
['B', 'A', 60],
['C', 'A', 40],
['D', 'B', 30],
['E', 'B', 30],
['F', 'C', 40]
]);
var options = {
minColor: '#f00', // Minimum color
midColor: '#ff0', // Mid color
maxColor: '#0f0', // Maximum color
headerHeight: 20, // Header height
fontColor: 'black', // Font color
fontSize: 12, // Font size
showScale: true // Show scale on the side
};
var chart = new google.visualization.TreeMap(document.getElementById('treemap_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google TreeMap Example</h2>
<div id="treemap_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- ডেটা:
google.visualization.arrayToDataTable()দিয়ে ট্রি ম্যাপের জন্য ডেটা তৈরি করা হয়েছে। এই ডেটাতে ID, Parent, এবং Value কলাম রয়েছে। এটি গাছের মতো হায়ারার্কি তৈরি করে। - অপশন কাস্টমাইজেশন:
minColor,midColor,maxColorদিয়ে বক্সগুলির জন্য রং কাস্টমাইজ করা হয়েছে।headerHeight,fontColor, এবংfontSizeদ্বারা টেক্সটের স্টাইল এবং সাইজ কাস্টমাইজ করা হয়েছে। - showScale: স্কেলের দেখানোর অপশনটি
trueসেট করা হয়েছে, যাতে স্কেল সাইডে দেখানো যায়।
২. Sankey Diagram তৈরি করা
Sankey Diagram একটি গ্রাফিকাল রিপ্রেজেন্টেশন, যা ডেটার প্রবাহ এবং সম্পর্ক দেখানোর জন্য ব্যবহৃত হয়। এটি একটি ডায়াগ্রাম যেখানে বিভিন্ন অংশের আকার এবং প্রবাহের দিক পরিবর্তিত হয়। সাধারণত এটি শক্তির প্রবাহ, আর্থিক প্রক্রিয়া বা অন্যান্য পরিবাহন বিশ্লেষণে ব্যবহৃত হয়।
কোড উদাহরণ (Sankey Diagram):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Sankey Diagram Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['sankey']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Amount');
data.addRows([
['Germany', 'United States', 100],
['Brazil', 'United States', 200],
['United States', 'France', 50],
['United States', 'United Kingdom', 150],
['Canada', 'United States', 80],
]);
var options = {
width: 600,
height: 400,
sankey: {
node: {
width: 20,
nodePadding: 10
},
link: {
colorMode: 'gradient',
colors: ['#e1f5fe', '#bbdefb', '#90caf9', '#64b5f6']
}
}
};
var chart = new google.visualization.Sankey(document.getElementById('sankey_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Sankey Diagram Example</h2>
<div id="sankey_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- ডেটা:
data.addRows([...])দিয়ে আমরা একটি Sankey ডায়াগ্রামে প্রবাহ দেখাচ্ছি। এখানে, "From" এবং "To" কলামটি প্রদর্শন করে যে কোনো উৎস থেকে কোন গন্তব্যে অর্থ প্রবাহিত হচ্ছে। - অপশন কাস্টমাইজেশন:
- node:
widthএবংnodePaddingদ্বারা নোডের প্রস্থ এবং দূরত্ব কাস্টমাইজ করা হয়েছে। - link:
colorMode: 'gradient'দ্বারা গ্রেডিয়েন্ট রঙ ব্যবহার করা হয়েছে, এবংcolorsব্যবহার করে বিভিন্ন গ্রেডিয়েন্ট রং নির্ধারণ করা হয়েছে। - dimensions: চার্টের width এবং height কাস্টমাইজ করা হয়েছে।
- node:
TreeMap এবং Sankey Diagrams এর ব্যবহার
- TreeMap:
- ডেটার হায়ারার্কি এবং প্রাপ্যতা বুঝতে সহায়ক।
- এটি বিভাগ বা শ্রেণীর মধ্যে তুলনা করতে সাহায্য করে।
- ব্যবসায়িক প্রতিবেদনের জন্য উপযুক্ত, যেমন বিক্রয় বিশ্লেষণ বা সম্পদ ব্যবস্থাপনা।
- Sankey Diagram:
- প্রবাহ এবং সম্পর্ক চিহ্নিত করতে সাহায্য করে।
- শক্তি, তহবিল, বা অন্যান্য পরিবাহন বিশ্লেষণের জন্য উপযুক্ত।
- ব্যবসায়িক সিদ্ধান্ত বা বিতরণ প্রক্রিয়া বুঝতে সাহায্য করে।
উপসংহার
TreeMap এবং Sankey Diagrams দুটি গুগল চার্টের শক্তিশালী ভিজ্যুয়ালাইজেশন টুল যা ডেটার সম্পর্ক এবং প্রবাহকে সহজে এবং কার্যকরভাবে প্রদর্শন করে। Google Charts ব্যবহার করে আপনি সহজেই এই চার্টগুলো তৈরি করতে পারেন এবং এগুলির সাহায্যে ডেটাকে আরও বোধগম্য ও তথ্যপূর্ণভাবে উপস্থাপন করতে পারবেন।
TreeMap একটি ভিজ্যুয়াল টুল যা হায়ারার্কিকাল ডেটা উপস্থাপন করতে ব্যবহৃত হয়। এটি ডেটাকে আয়তাকার সেলগুলিতে বিভক্ত করে, যেখানে প্রতিটি সেলটি একটি নোড বা ডেটা পয়েন্টের প্রতিনিধিত্ব করে। বড় সেলগুলি বেশি গুরুত্বপূর্ণ বা বড় মানের ডেটা দেখায়, এবং ছোট সেলগুলি কম গুরুত্বপূর্ণ বা ছোট মানের ডেটা দেখায়। TreeMap ব্যবহার করে আপনি সহজেই ডেটার মধ্যে সম্পর্ক এবং হায়ারার্কি বিশ্লেষণ করতে পারেন।
গুগল চার্টে TreeMap চার্টটি খুবই শক্তিশালী একটি টুল, যা বড় ডেটাসেটের হায়ারার্কি এবং সম্পর্ক দেখানোর জন্য ব্যবহৃত হয়।
TreeMap কীভাবে কাজ করে?
TreeMap চার্টটি একটি গাছের মতো ডেটা শাখার মধ্যে সম্পর্ক তৈরি করে। প্রতিটি শাখার নিচে আরও ছোট ছোট শাখা থাকতে পারে এবং প্রতিটি শাখার আকার বা রঙ ডেটার মান বা অন্যান্য বৈশিষ্ট্য অনুযায়ী পরিবর্তিত হয়।
TreeMap সাধারণত নিম্নলিখিত ডেটা প্রকাশ করতে ব্যবহৃত হয়:
- ব্যবসায়িক ডেটার শ্রেণীবিভাগ (যেমন: কোম্পানি, বিভাগ, পণ্য ইত্যাদি)
- বিভিন্ন বিভাগের মধ্যে আয় বা লাভের তুলনা
- কোনো ডেটা হায়ারার্কির ভিতরে প্রতিটি স্তরের পরিসংখ্যান
Google Charts-এ TreeMap তৈরি করার উদাহরণ
নিচে একটি TreeMap চার্ট তৈরি করার উদাহরণ দেওয়া হলো, যা একটি কোম্পানির বিভিন্ন বিভাগের ডেটা দেখাবে:
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TreeMap Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['treemap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('string', 'Parent');
data.addColumn('number', 'Value');
data.addColumn('string', 'Color');
data.addRows([
['Root', null, 0, null],
['Electronics', 'Root', 0, 'green'],
['Mobile', 'Electronics', 15, 'lightgreen'],
['Laptops', 'Electronics', 25, 'green'],
['Appliances', 'Root', 0, 'blue'],
['Washing Machine', 'Appliances', 10, 'lightblue'],
['Refrigerator', 'Appliances', 20, 'blue'],
['Furniture', 'Root', 0, 'orange'],
['Sofa', 'Furniture', 5, 'yellow'],
['Table', 'Furniture', 10, 'orange']
]);
var options = {
minColor: '#FF0000',
midColor: '#FFFF00',
maxColor: '#00FF00',
headerHeight: 15,
fontColor: 'black',
fontSize: 14,
showScale: true
};
var chart = new google.visualization.TreeMap(document.getElementById('treemap_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>TreeMap Chart Example</h2>
<div id="treemap_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা
- ডেটা তৈরি:
google.visualization.DataTable()দিয়ে একটি ডেটা টেবিল তৈরি করা হয়েছে। এখানে প্রথম কলামে বিভিন্ন ক্যাটেগরি (যেমন Electronics, Furniture, Appliances ইত্যাদি), দ্বিতীয় কলামে তাদের প্যারেন্ট ক্যাটেগরি (যেমন Root), তৃতীয় কলামে তাদের মান (Value) এবং চতুর্থ কলামে রঙ (Color) নির্ধারণ করা হয়েছে।
- শৈলী কাস্টমাইজেশন:
minColor,midColor, এবংmaxColorএর মাধ্যমে TreeMap এর রঙ কাস্টমাইজ করা হয়েছে। এখানে লাল, হলুদ, এবং সবুজ রং নির্ধারণ করা হয়েছে, যা ডেটার মানের উপর ভিত্তি করে রং পরিবর্তন করবে।headerHeight,fontColor, এবংfontSizeদিয়ে চার্টের শিরোনামের শৈলী এবং ফন্ট কাস্টমাইজ করা হয়েছে।showScaleঅপশনটি সেট করা হয়েছে, যাতে রঙের স্কেল প্রদর্শিত হয়।
- TreeMap তৈরি:
google.visualization.TreeMapফাংশনটি ব্যবহার করেtreemap_divID সহ একটিdivএলিমেন্টে TreeMap চার্টটি তৈরি এবং প্রদর্শন করা হয়েছে।
TreeMap এর উপকারিতা
- হায়ারার্কিকাল ডেটা ভিজ্যুয়ালাইজেশন: এটি ডেটার মধ্যে সম্পর্ক এবং হায়ারার্কি বুঝতে সাহায্য করে।
- ডেটা বিশ্লেষণ: ব্যবহারকারীরা সহজেই বড় ডেটাসেটের মধ্যে সম্পর্ক এবং প্রবণতা বিশ্লেষণ করতে পারে।
- বিভাগগুলির তুলনা: এটি বিভিন্ন বিভাগ বা শ্রেণীর মধ্যে তুলনা করতে কার্যকর।
- স্পেস ব্যবহার: TreeMap কম জায়গায় অধিক ডেটা প্রদর্শন করে, যা এটি স্কেলেবেল এবং স্পেস-এফফিশিয়েন্ট করে তোলে।
উপসংহার
Google Charts এর TreeMap একটি শক্তিশালী টুল, যা ডেটার হায়ারার্কি এবং সম্পর্ক বিশ্লেষণ করতে সাহায্য করে। এটি ভিজ্যুয়ালভাবে বড় ডেটাসেটের মধ্যে বিভিন্ন বিভাগ এবং তাদের অংশের তুলনা করতে সহায়ক, যা সহজে ব্যবহারকারীকে সিদ্ধান্ত নিতে সাহায্য করে। এই চার্টটি আপনার ডেটাকে সহজ এবং আকর্ষণীয়ভাবে উপস্থাপন করতে পারে।
TreeMap Chart একটি চমৎকার ডেটা ভিজ্যুয়ালাইজেশন টুল যা হায়ারার্কিকাল ডেটাকে প্রদর্শন করতে ব্যবহৃত হয়। এটি বিশেষভাবে ক্যাটেগরি এবং সাব-ক্যাটেগরির মধ্যে সম্পর্ক বোঝানোর জন্য আদর্শ, যেখানে প্রতিটি রেকর্ড বা ডেটা পয়েন্ট একটি রঙ এবং আকার দ্বারা প্রতিনিধিত্ব করা হয়। Google Charts এর মাধ্যমে TreeMap তৈরি করা সহজ এবং এতে আপনি বিভিন্ন কাস্টমাইজেশন এবং রঙের পরিবর্তন করতে পারেন।
এখানে, আমরা TreeMap Chart এর কাস্টমাইজেশন এবং Color Ranges পরিবর্তন করার প্রক্রিয়া দেখাবো।
১. Google TreeMap Chart তৈরি করা
Google Charts এর TreeMap চার্ট তৈরি করতে, প্রথমে আপনাকে corechart এবং treemap প্যাকেজ লোড করতে হবে। এরপর, ডেটা তৈরি করে এবং কাস্টম অপশন ব্যবহার করে চার্ট তৈরি করা যায়।
HTML এবং JavaScript কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google TreeMap Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Google Charts লাইব্রেরি লোড করা
google.charts.load('current', {packages: ['corechart', 'treemap']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
// TreeMap Chart তৈরি করার ফাংশন
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('string', 'Parent');
data.addColumn('number', 'Market Share');
// ডেটা যোগ করা
data.addRows([
['A', null, 1000],
['B', 'A', 300],
['C', 'A', 500],
['D', 'A', 200],
['E', 'B', 100],
['F', 'B', 200],
['G', 'C', 300],
['H', 'C', 200]
]);
var options = {
minColor: '#f00', // লাল রঙ
midColor: '#ff9900', // কমলা রঙ
maxColor: '#0d0', // সবুজ রঙ
headerHeight: 15,
showScale: true, // রঙের স্কেল দেখানো
fontColor: 'black', // ফন্টের রঙ
fontSize: 12, // ফন্টের আকার
};
var chart = new google.visualization.TreeMap(document.getElementById('tree_map'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google TreeMap Chart Example</h2>
<div id="tree_map" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা
Google Charts লাইব্রেরি লোড করা: প্রথমে আমরা corechart এবং treemap প্যাকেজ লোড করেছি, যা TreeMap Chart তৈরি করতে সাহায্য করবে।
google.charts.load('current', {packages: ['corechart', 'treemap']});ডেটা প্রস্তুত করা: আমরা DataTable ব্যবহার করে ডেটা তৈরি করেছি, যেখানে:
- Category: ক্যাটেগরি বা সাব-ক্যাটেগরি
- Parent: কোন ক্যাটেগরির মধ্যে এটি পড়ে
- Market Share: মার্কেট শেয়ার বা টাস্কের ভ্যালু
data.addColumn('string', 'Category'); data.addColumn('string', 'Parent'); data.addColumn('number', 'Market Share');- ডেটা যোগ করা:
data.addRows()দিয়ে আমরা ডেটা যোগ করেছি, যেখানে প্রতিটি রেকর্ড বা ডেটা পয়েন্ট একটি ক্যাটেগরি এবং তার প্যারেন্ট ক্যাটেগরির সাথে যুক্ত থাকে। - কাস্টম অপশন সেট করা:
minColor,midColor,maxColor: এটি TreeMap Chart এর রঙের পরিসীমা (color range) নির্ধারণ করে।headerHeight: হেডারের উচ্চতা সেট করা।showScale: রঙের স্কেল দেখানোর জন্যtrueসেট করা।fontColorএবংfontSize: ফন্টের রঙ এবং আকার কাস্টমাইজ করা।
২. TreeMap Chart এর Color Ranges কাস্টমাইজেশন
TreeMap Chart এ রঙের পরিসীমা কাস্টমাইজ করা যায় যাতে ডেটার পার্থক্য আরও স্পষ্টভাবে বোঝানো যায়। নিচে কয়েকটি Color Ranges কাস্টমাইজেশনের উদাহরণ দেওয়া হলো:
উদাহরণ ১: Ranges with Red, Yellow, and Green
var options = {
minColor: '#FF0000', // লাল রঙ (কম মান)
midColor: '#FFFF00', // হলুদ রঙ (মাঝারি মান)
maxColor: '#00FF00', // সবুজ রঙ (বেশি মান)
headerHeight: 15,
showScale: true
};
এখানে, কম মানের জন্য লাল, মাঝারি মানের জন্য হলুদ, এবং বেশি মানের জন্য সবুজ রঙ ব্যবহার করা হয়েছে।
উদাহরণ ২: Gradual Color Range from Light to Dark Blue
var options = {
minColor: '#a0c8f0', // হালকা নীল রঙ
midColor: '#4786c6', // মাঝারি নীল রঙ
maxColor: '#00529b', // গা dark ় নীল রঙ
headerHeight: 15,
showScale: true
};
এখানে light blue থেকে dark blue এর মধ্যে রঙের গ্র্যাডিয়েন্ট তৈরি করা হয়েছে, যা ডেটার মান অনুযায়ী পরিবর্তিত হবে।
৩. TreeMap Chart কাস্টমাইজেশন এবং রঙের স্কেল
TreeMap Chart এর কাস্টমাইজেশন এবং রঙের স্কেল ব্যবহার করে আপনি ডেটার সম্পর্ক এবং মানের ভিত্তিতে চার্টের ভিজ্যুয়াল উপস্থাপনাকে আরও শক্তিশালী এবং স্পষ্ট করতে পারেন। Google Charts এ অনেক ধরণের কাস্টমাইজেশন অপশন রয়েছে, যেমন:
- Font Style:
fontName,fontSize,fontColor - Borders: বিভিন্ন স্লাইসের জন্য বর্ডার সেট করা
- Tooltip: কাস্টম টুলটিপ প্রদর্শন করা, যাতে নির্দিষ্ট তথ্য দেখানো যায় যখন ব্যবহারকারী একটি স্লাইসে hover করবে।
উপসংহার
Google TreeMap Chart ডেটার হায়ারার্কিকাল সম্পর্ক দেখানোর জন্য একটি শক্তিশালী এবং কার্যকরী টুল। এটি প্রকল্প, ফাইন্যান্স, সেলস ডেটা বা অন্যান্য বিভাগের বিশ্লেষণে ব্যবহার করা যেতে পারে। কাস্টম রঙের পরিসীমা এবং অন্যান্য কাস্টমাইজেশন অপশন দিয়ে আপনি TreeMap Chart কে আরও সঠিক এবং আকর্ষণীয়ভাবে উপস্থাপন করতে পারবেন। Google Charts এর TreeMap দিয়ে আপনি সহজেই ডেটা ক্যাটেগরি এবং সাব-ক্যাটেগরির পার্থক্য দেখাতে পারবেন এবং ডেটার অগ্রগতি বা পারফরম্যান্স ট্র্যাক করতে পারবেন।
Sankey Diagram একটি বিশেষ ধরনের ডায়াগ্রাম যা ডেটার প্রবাহ বা ফ্লো প্রদর্শন করতে ব্যবহৃত হয়। এটি বিভিন্ন উপাদান বা শ্রেণীর মধ্যে শক্তি, সম্পদ, বা পরিমাণের প্রবাহ দেখাতে সহায়ক। বিশেষত Data Flow Visualization বা ডেটার গতিপথ বুঝতে এটি খুবই কার্যকরী।
Google Charts ব্যবহার করে Sankey Diagram তৈরি করা সহজ, যা বিভিন্ন শ্রেণির মধ্যে ডেটা প্রবাহ এবং সম্পর্ককে সুন্দরভাবে উপস্থাপন করতে সাহায্য করে। এটি সাধারণত ব্যবহৃত হয় ব্যবসায়িক বিশ্লেষণ, অর্থনৈতিক ডেটা, এনার্জি প্রবাহ ইত্যাদি প্রদর্শন করতে।
১. Sankey Diagram এর ব্যবহার
Sankey Diagram ব্যবহারের প্রধান সুবিধা হলো এটি ডেটা ফ্লো বা প্রবাহ এবং আলোচ্য পরিমাণ সঠিকভাবে চিত্রিত করে। এই ডায়াগ্রামটি মূলত ব্যবহার হয়:
১.১ ব্যবসায়িক বিশ্লেষণ
ব্যবসায়ে, Sankey Diagram ব্যবহার করা হয় রাজস্ব, খরচ এবং লাভের প্রবাহ প্রদর্শন করতে। এটি ব্যবসায়িক ফ্লো বা তহবিলের প্রবাহ খুব সহজভাবে দেখতে সাহায্য করে।
১.২ শক্তি বা সম্পদের প্রবাহ
এটি শক্তির বা সম্পদের প্রবাহ নিরীক্ষণ এবং বিশ্লেষণের জন্য ব্যবহৃত হয়। উদাহরণস্বরূপ, একটি শক্তি উৎপাদন এবং ব্যবহার সিস্টেমে শক্তির প্রবাহ প্রদর্শন করা।
১.৩ অর্থনৈতিক বিশ্লেষণ
অর্থনীতি, বিভিন্ন ধরণের অর্থের গতি এবং ট্রানজেকশন প্রদর্শন করতে Sankey Diagram ব্যবহার করা হয়। এটি মুদ্রার প্রবাহ, ব্যয় এবং আয় সম্পর্ক বিশ্লেষণ করতে সহায়ক।
১.৪ শিক্ষা
শিক্ষায়, Sankey Diagram ব্যবহৃত হতে পারে যেখানে শিক্ষার্থীদের পারফরম্যান্স বা বিভিন্ন কার্যক্রমের মধ্যে সংযোগ এবং অগ্রগতি চিত্রিত করা হয়।
২. Google Charts এ Sankey Diagram তৈরি করা
Google Charts ব্যবহার করে Sankey Diagram তৈরি করতে আপনাকে corechart প্যাকেজ ব্যবহার করতে হবে। এখানে একটি উদাহরণ দেওয়া হলো যেখানে ব্যবসায়িক প্রবাহ দেখানো হয়েছে।
HTML এবং JavaScript কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Sankey Diagram Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Google Charts লোড করা
google.charts.load('current', {packages: ['sankey']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
// Sankey Diagram তৈরি করার ফাংশন
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Amount');
// ডেটা যোগ করা
data.addRows([
['Revenue', 'Marketing', 400],
['Revenue', 'Sales', 500],
['Revenue', 'Expenses', 300],
['Marketing', 'Campaign 1', 200],
['Marketing', 'Campaign 2', 100],
['Sales', 'Product A', 300],
['Sales', 'Product B', 200],
['Expenses', 'Office', 100],
['Expenses', 'Salaries', 200]
]);
var options = {
width: 600,
height: 400
};
var chart = new google.visualization.Sankey(document.getElementById('sankey_diagram'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Sankey Diagram Example</h2>
<div id="sankey_diagram" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা
Google Charts লাইব্রেরি লোড করা: এখানে
google.charts.load()ফাংশন ব্যবহার করা হয়েছে, যার মধ্যে আমরাsankeyপ্যাকেজ লোড করেছি।google.charts.load('current', {packages: ['sankey']});ডেটা প্রস্তুত করা:
google.visualization.DataTable()এর মাধ্যমে আমরা ডেটা তৈরি করি, যেখানে From এবং To নির্দেশ করে যে ডেটা কোথা থেকে কোথায় প্রবাহিত হচ্ছে এবং Amount নির্দেশ করে সেই প্রবাহের পরিমাণ।data.addColumn('string', 'From'); data.addColumn('string', 'To'); data.addColumn('number', 'Amount');- ডেটা যোগ করা:
data.addRows()এর মাধ্যমে আমরা ডেটার বিভিন্ন প্রবাহ যোগ করি। উদাহরণস্বরূপ,RevenueথেকেMarketingএবংSalesএর দিকে ডেটা প্রবাহিত হচ্ছে। - অপশন সেট করা:
optionsঅবজেক্টের মাধ্যমে আমরা চার্টের প্রস্থ এবং উচ্চতা নির্ধারণ করি। - চার্ট তৈরি করা:
google.visualization.Sankey()ফাংশন দিয়ে আমরা Sankey Diagram তৈরি করি এবং এটি HTML ডকুমেন্টে প্রদর্শন করি।
৩. Sankey Diagram এর সুবিধা
- ডেটা ফ্লো সহজভাবে বিশ্লেষণ: Sankey Diagram ডেটার প্রবাহ স্পষ্টভাবে প্রদর্শন করে এবং এটি কোন ডেটা কোথায় এবং কিভাবে প্রবাহিত হচ্ছে তা সহজভাবে বুঝতে সাহায্য করে।
- ব্যবসায়িক বিশ্লেষণ: এটি ব্যবসায়িক ডেটা যেমন রাজস্ব, খরচ, এবং লাভের মধ্যে সম্পর্ক বুঝতে সহায়ক।
- শক্তি এবং সম্পদের ব্যবস্থাপনা: শক্তি বা সম্পদের প্রবাহ বিশ্লেষণ করার জন্য Sankey Diagram একটি কার্যকরী টুল।
- দৃশ্যমান ডেটা সম্পর্ক: এটি ডেটার সম্পর্ক ও প্রবাহকে দৃশ্যমান করতে সক্ষম, যা সাধারণ চার্টে দেখতে কষ্টকর হতে পারে।
উপসংহার
Google Sankey Diagram ব্যবহার করে আপনি খুব সহজেই ডেটার প্রবাহ এবং সম্পর্ক বুঝতে পারবেন। এটি ব্যবসায়িক, অর্থনৈতিক, শক্তি, এবং অন্যান্য ডেটা ফ্লো বিশ্লেষণের জন্য একটি কার্যকরী ভিজ্যুয়ালাইজেশন টুল। এটি আপনাকে ডেটার প্রবাহ, পরিবর্তন এবং প্রক্রিয়া স্পষ্টভাবে দেখতে সাহায্য করে, যা দ্রুত এবং কার্যকরী সিদ্ধান্ত গ্রহণে সহায়ক।
Sankey Diagram একটি বিশেষ ধরনের চার্ট যা বিভিন্ন মানের মধ্যে প্রবাহ দেখানোর জন্য ব্যবহৃত হয়। এটি বিশেষত তখন ব্যবহৃত হয় যখন ডেটা কোনো নির্দিষ্ট দিক থেকে অন্য দিকে প্রবাহিত হয় এবং তাদের পরিমাণের পার্থক্য স্পষ্টভাবে প্রদর্শন করা প্রয়োজন। এটি সাধারণত ফ্লো বা প্রবাহ ভিজ্যুয়ালাইজেশন, যেমন শক্তির প্রবাহ, আর্থিক ফ্লো, বা অন্যান্য ট্রানজাকশন বিশ্লেষণ করতে ব্যবহৃত হয়।
Google Charts এ Sankey Diagram তৈরি করা এবং কাস্টমাইজ করা অত্যন্ত সহজ, এবং এখানে আপনাকে Sankey Diagram এর কাস্টমাইজেশন এবং অ্যাডভান্সড সেটিংস দেখানো হবে।
১. Google Charts দিয়ে Sankey Diagram তৈরি করা
Google Charts এ Sankey Diagram তৈরি করার জন্য আপনাকে প্রথমে corechart প্যাকেজ লোড করতে হবে, এবং তারপর ডেটা প্রস্তুত করে সেটি চার্টে রূপান্তর করতে হবে।
HTML এবং JavaScript কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Sankey Diagram Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Google Charts লোড করা
google.charts.load('current', {packages: ['sankey']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
// Sankey Diagram তৈরি করার ফাংশন
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
// ডেটা প্রস্তুত করা
data.addRows([
['Start', 'Task 1', 5],
['Start', 'Task 2', 10],
['Task 1', 'Task 3', 3],
['Task 2', 'Task 3', 7],
['Task 3', 'End', 10]
]);
var options = {
width: 600,
height: 400,
sankey: {
node: {
width: 20,
nodePadding: 80
},
link: {
colorMode: 'gradient',
colors: ['#e60000', '#0066e6', '#33cc33']
}
}
};
var chart = new google.visualization.Sankey(document.getElementById('sankey_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Sankey Diagram Example</h2>
<div id="sankey_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা
- Google Charts লাইব্রেরি লোড করা:
google.charts.load('current', {packages: ['sankey']});লাইনে আমরা Sankey Diagram প্যাকেজটি লোড করেছি। - ডেটা তৈরি:
google.visualization.DataTable()ব্যবহার করে আমরা ডেটা তৈরি করেছি, যেখানে:- From: সোর্স নোড
- To: ডেস্টিনেশন নোড
- Weight: এই নোডের মধ্যে প্রবাহের পরিমাণ
- ডেটা যোগ করা:
data.addRows()দিয়ে আমরা বিভিন্ন সোর্স এবং ডেস্টিনেশন এর মধ্যে সম্পর্ক এবং প্রবাহের পরিমাণ যোগ করেছি। - অপশন সেট করা:
- width ও height: চার্টের আকার নির্ধারণ করা
- node.width: নোডের প্রস্থ
- nodePadding: নোডগুলোর মধ্যে গ্যাপ
- link.colorMode: লিংক এর জন্য গ্র্যাডিয়েন্ট রঙ নির্ধারণ
- চার্ট তৈরি করা:
google.visualization.Sankey()ফাংশনের মাধ্যমে Sankey Diagram তৈরি করা হয় এবং এটি HTML ডিভে প্রদর্শিত হয়।
২. Sankey Diagram Customization
Google Charts এ Sankey Diagram এর বিভিন্ন কাস্টমাইজেশন অপশন রয়েছে যা আপনাকে আপনার চার্টকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারীর পছন্দ অনুসারে মানানসই করতে সাহায্য করে।
১. Node Styling (নোডের কাস্টমাইজেশন)
- node.width: নোডের প্রস্থ সেট করা।
- nodePadding: নোডগুলোর মধ্যে গ্যাপ নির্ধারণ করা।
- node.label.fontSize: নোডের লেবেল এর ফন্ট সাইজ পরিবর্তন করা।
- node.label.fontColor: নোডের লেবেল এর রঙ নির্ধারণ করা।
২. Link Styling (লিংক কাস্টমাইজেশন)
- link.colorMode: লিংকের রঙ নির্ধারণ করতে 'gradient' বা 'solid' ব্যবহার করা যায়।
- link.colors: লিংকের রঙগুলোর জন্য কাস্টম রঙ সেট করা।
৩. Chart Size (চার্টের আকার)
- width: চার্টের প্রস্থ নির্ধারণ করা।
- height: চার্টের উচ্চতা নির্ধারণ করা।
৪. Title and Tooltip Customization (শিরোনাম এবং টুলটিপ কাস্টমাইজেশন)
- title: চার্টের শিরোনাম।
- tooltip: টুলটিপ কাস্টমাইজেশন যেমন, পজিশন, কনটেন্ট ইত্যাদি।
৩. Advanced Settings for Sankey Diagram
এখন আপনি Advanced Settings ব্যবহার করে Sankey Diagram কে আরও কাস্টমাইজ করতে পারেন:
১. Multiple Link Colors
লিংকগুলির মধ্যে বিভিন্ন রঙ ব্যবহার করতে, আপনি link.colors ব্যবহার করতে পারেন। উদাহরণ:
link: {
colorMode: 'gradient',
colors: ['#e60000', '#0066e6', '#33cc33']
}
২. Node Label Customization
নোড লেবেলটি কাস্টমাইজ করতে আপনি node.label.fontSize এবং node.label.fontColor এর মতো অপশন ব্যবহার করতে পারেন।
node: {
label: {
fontSize: 14,
fontColor: '#4CAF50'
}
}
৩. Interactive Features
Sankey Diagram এ Interactive ফিচার যুক্ত করতে আপনি tooltip ব্যবহার করতে পারেন, যাতে মাউসওভার করার সময় তথ্য দেখানো যায়।
tooltip: { isHtml: true }
৪. Custom Labels for Nodes
প্রতিটি নোডের জন্য কাস্টম লেবেল যোগ করা সম্ভব। আপনি সেগুলিকে সরাসরি DataTable তে ইনপুট করতে পারেন, যেমন:
data.addRows([
['Start', 'Task 1', 5],
['Start', 'Task 2', 10],
['Task 1', 'Task 3', 3],
['Task 2', 'Task 3', 7],
['Task 3', 'End', 10]
]);
উপসংহার
Sankey Diagram একটি শক্তিশালী টুল যা ডেটার প্রবাহ এবং সম্পর্ক প্রদর্শন করতে সাহায্য করে। Google Charts এ Sankey Diagram তৈরি করা এবং কাস্টমাইজ করা খুবই সহজ এবং বিভিন্ন Advanced Settings এর মাধ্যমে আপনি আপনার চার্টকে আরও কার্যকরী এবং ইন্টারঅ্যাকটিভ করতে পারবেন। এই কাস্টমাইজেশন অপশনগুলির মাধ্যমে আপনি প্রতিটি ডেটা সেটের জন্য উপযুক্ত ভিজ্যুয়ালাইজেশন তৈরি করতে পারবেন।
Read more
