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
