ওভারভিউ
একটি সানকি ডায়াগ্রাম হল একটি ভিজ্যুয়ালাইজেশন যা এক সেট থেকে অন্য মানের প্রবাহকে চিত্রিত করতে ব্যবহৃত হয়। যে জিনিসগুলিকে সংযুক্ত করা হচ্ছে তাকে নোড বলা হয় এবং সংযোগগুলিকে লিঙ্ক বলা হয়। যখন আপনি দুটি ডোমেন (উদাহরণস্বরূপ, বিশ্ববিদ্যালয় এবং মেজর) বা একাধিক পাথের মধ্যে একটি বহু-থেকে-অনেক ম্যাপিং দেখাতে চান তখন সানকিগুলি সর্বোত্তমভাবে ব্যবহার করা হয় আপনার ওয়েব সাইটের অন্যান্য পৃষ্ঠাগুলি)।
কৌতূহলীদের জন্য, তাদের নামকরণ করা হয়েছে ক্যাপ্টেন সানকির নামে, যিনি বাষ্প ইঞ্জিনের দক্ষতার একটি চিত্র তৈরি করেছিলেন যা তাপ হ্রাসের সমানুপাতিক প্রস্থের তীর ব্যবহার করেছিল।
দ্রষ্টব্য: ভবিষ্যতে Google চার্ট রিলিজগুলিতে সানকি চার্টটি উল্লেখযোগ্য সংশোধনের মধ্য দিয়ে যেতে পারে।
সানকি ডায়াগ্রামগুলি ব্রাউজারে SVG বা VML ব্যবহার করে রেন্ডার করা হয়, যেটি ব্যবহারকারীর ব্রাউজারের জন্য উপযুক্ত। গুগলের সানকি লেআউট কোডটি D3 এর সানকি লেআউট কোড থেকে নেওয়া হয়েছে।
দ্রষ্টব্য: Microsoft Internet Explorer 8 এবং পূর্ববর্তী সংস্করণগুলিতে Google sankey চার্টগুলি অনুপলব্ধ৷
একটি সহজ উদাহরণ
ধরুন আপনার দুটি বিভাগ ছিল, A এবং B, যা তিনটি অন্যান্য বিভাগের সাথে সংযোগ করে, X, Y, এবং Z। এই সংযোগগুলির মধ্যে কিছু অন্যদের চেয়ে ভারী। উদাহরণস্বরূপ, X-এর সাথে B-এর একটি পাতলা সংযোগ এবং Y-এর সাথে অনেক বেশি ঘন সংযোগ রয়েছে।
সংযোগটি হাইলাইট করতে লিঙ্কগুলির একটির উপরে ঘোরার চেষ্টা করুন৷
একটি সানকি চার্ট তৈরি করতে, সারিগুলির একটি সেট সরবরাহ করুন, প্রতিটিতে একটি সংযোগ সম্পর্কে তথ্য রয়েছে: থেকে, থেকে এবং ওজন। তারপর চার্ট আরম্ভ করার জন্য google.visualization.Sankey() পদ্ধতি এবং তারপর এটি রেন্ডার করার জন্য draw() পদ্ধতি ব্যবহার করুন:
<html>
<head>
<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', 'Weight');
data.addRows([
[ 'A', 'X', 5 ],
[ 'A', 'Y', 7 ],
[ 'A', 'Z', 6 ],
[ 'B', 'X', 2 ],
[ 'B', 'Y', 9 ],
[ 'B', 'Z', 4 ]
]);
// Sets chart options.
var options = {
width: 600,
};
// Instantiates and draws our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="sankey_basic" style="width: 900px; height: 300px;"></div>
</body>
</html>
দ্রষ্টব্য: আপনার ডেটাতে চক্র এড়িয়ে চলুন: যদি A নিজের সাথে লিঙ্ক করে, বা B এর সাথে লিঙ্ক করে যা C এর সাথে লিঙ্ক করে যা A এর সাথে লিঙ্ক করে, আপনার চার্ট রেন্ডার হবে না।
মাল্টিলেভেল সানকিস
আপনি একাধিক স্তরের সংযোগ সহ একটি সানকি চার্ট তৈরি করতে পারেন:
সানকি চার্টগুলি প্রয়োজন অনুসারে অতিরিক্ত মাত্রা যোগ করবে, সেগুলিকে স্বয়ংক্রিয়ভাবে বিছিয়ে দেবে। এখানে উপরের চার্টের জন্য সম্পূর্ণ কোড:
<html>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>
<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', 'Weight');
data.addRows([
[ 'Brazil', 'Portugal', 5 ],
[ 'Brazil', 'France', 1 ],
[ 'Brazil', 'Spain', 1 ],
[ 'Brazil', 'England', 1 ],
[ 'Canada', 'Portugal', 1 ],
[ 'Canada', 'France', 5 ],
[ 'Canada', 'England', 1 ],
[ 'Mexico', 'Portugal', 1 ],
[ 'Mexico', 'France', 1 ],
[ 'Mexico', 'Spain', 5 ],
[ 'Mexico', 'England', 1 ],
[ 'USA', 'Portugal', 1 ],
[ 'USA', 'France', 1 ],
[ 'USA', 'Spain', 1 ],
[ 'USA', 'England', 5 ],
[ 'Portugal', 'Angola', 2 ],
[ 'Portugal', 'Senegal', 1 ],
[ 'Portugal', 'Morocco', 1 ],
[ 'Portugal', 'South Africa', 3 ],
[ 'France', 'Angola', 1 ],
[ 'France', 'Senegal', 3 ],
[ 'France', 'Mali', 3 ],
[ 'France', 'Morocco', 3 ],
[ 'France', 'South Africa', 1 ],
[ 'Spain', 'Senegal', 1 ],
[ 'Spain', 'Morocco', 3 ],
[ 'Spain', 'South Africa', 1 ],
[ 'England', 'Angola', 1 ],
[ 'England', 'Senegal', 1 ],
[ 'England', 'Morocco', 2 ],
[ 'England', 'South Africa', 7 ],
[ 'South Africa', 'China', 5 ],
[ 'South Africa', 'India', 1 ],
[ 'South Africa', 'Japan', 3 ],
[ 'Angola', 'China', 5 ],
[ 'Angola', 'India', 1 ],
[ 'Angola', 'Japan', 3 ],
[ 'Senegal', 'China', 5 ],
[ 'Senegal', 'India', 1 ],
[ 'Senegal', 'Japan', 3 ],
[ 'Mali', 'China', 5 ],
[ 'Mali', 'India', 1 ],
[ 'Mali', 'Japan', 3 ],
[ 'Morocco', 'China', 5 ],
[ 'Morocco', 'India', 1 ],
[ 'Morocco', 'Japan', 3 ]
]);
// Set chart options
var options = {
width: 600,
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
chart.draw(data, options);
}
</script>
</body>
</html>
রং নিয়ন্ত্রণ
সানকি চার্টে নোড এবং লিঙ্কগুলির জন্য কাস্টম রঙ সেট করার ক্ষমতা রয়েছে। নোড এবং লিঙ্ক উভয়কেই তাদের colors বিকল্পগুলি ব্যবহার করে কাস্টম রঙ প্যালেট দেওয়া যেতে পারে (যথাক্রমে sankey.node.colors এবং sankey.link.colors )। colorMode বিকল্প ব্যবহার করে তাদের বিভিন্ন রঙের মোড দেওয়া যেতে পারে।
যদি রঙগুলি কাস্টমাইজ করা না হয় তবে সেগুলি স্ট্যান্ডার্ড ম্যাটেরিয়াল প্যালেটে ডিফল্ট হয়৷
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
'#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];
var options = {
height: 400,
sankey: {
node: {
colors: colors
},
link: {
colorMode: 'gradient',
colors: colors
}
}
};
আপনি কনফিগারেশন বিকল্পগুলির সাথে লিঙ্ক, নোড এবং লেবেলের রঙ নিয়ন্ত্রণ করতে পারেন। এখানে, আমরা একই রঙের কিন্তু ভিন্ন উজ্জ্বলতার সাথে তিনটি নির্বাচন করি:
এই বিকল্পগুলি দেখতে কেমন:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae' } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
এছাড়াও আপনি sankey.link.color.fillOpacity বিকল্পের মাধ্যমে লিঙ্কগুলির স্বচ্ছতা নিয়ন্ত্রণ করতে পারেন:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae', fillOpacity: 0.8 } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
লিঙ্কগুলির চারপাশে একটি সীমানা তৈরি করতে, sankey.link.color.stroke এবং sankey.link.color.strokeWidth বিকল্পগুলি ব্যবহার করুন:
স্ট্রোকের রঙ RGB বিন্যাসে বা ইংরেজি নাম দ্বারা নির্দিষ্ট করা যেতে পারে।
var options = {
width: 750,
height: 400,
sankey: {
node: { colors: [ '#a61d4c' ] },
link: { color: { stroke: 'black', strokeWidth: 1 } },
}
};
লেবেল কাস্টমাইজ করা
sankey চার্টের পাঠ্য sankey.node.label.fontName এবং বন্ধুদের ব্যবহার করে কাস্টমাইজ করা যেতে পারে:
উপরের চার্টের জন্য এখানে বিকল্প স্তবক রয়েছে:
var options = {
width: 600,
sankey: {
node: { label: { fontName: 'Times-Roman',
fontSize: 14,
color: '#871b47',
bold: true,
italic: true } } },
};
আপনি sankey.node.labelPadding বিকল্পের সাহায্যে নোডের সাপেক্ষে লেবেলের অবস্থান সামঞ্জস্য করতে পারেন:
উপরের চার্টে, আমরা লেবেল এবং নোডের মধ্যে 30 পিক্সেল প্যাডিং যোগ করেছি।
var options = {
width: 600,
sankey: { node: { labelPadding: 30 } },
};
নোড সামঞ্জস্য করা
আপনি sankey.node.width দিয়ে নোডের প্রস্থ নিয়ন্ত্রণ করতে পারেন:
উপরে, আমরা নোডের প্রস্থ 2 এ সেট করেছি।
var options = {
width: 600,
sankey: { node: { width: 2 } },
};
আপনি sankey.node.nodePadding এর মাধ্যমে নোডের মধ্যে দূরত্ব সামঞ্জস্য করতে পারেন:
উপরের চার্টে, আমরা sankey.node.nodePadding 80 সেট করেছি।
var options = {
width: 900,
sankey: { node: { nodePadding: 80 } },
};
লোড হচ্ছে
google.charts.load প্যাকেজের নাম হল "sankey" :
google.charts.load("current" {packages: ["sankey"]});
ভিজ্যুয়ালাইজেশনের ক্লাসের নাম হল google.visualization.Sankey :
var visualization = new google.visualization.Sankey(container);
উপাত্ত বিন্যাস
সারি: টেবিলের প্রতিটি সারি দুটি লেবেলের মধ্যে একটি সংযোগের প্রতিনিধিত্ব করে। তৃতীয় কলামটি সেই সংযোগের শক্তি নির্দেশ করে এবং লেবেলের মধ্যে পথের প্রস্থে প্রতিফলিত হবে।
কলাম:
| কলাম 0 | কলাম 1 | কলাম 2 | ... | কলাম N (ঐচ্ছিক) | |
|---|---|---|---|---|---|
| উদ্দেশ্য: | উৎস | গন্তব্য | মান | ... | ঐচ্ছিক ভূমিকা |
| ডেটা টাইপ: | স্ট্রিং | স্ট্রিং | সংখ্যা | ... | |
| ভূমিকা: | ডোমেইন | ডোমেইন | তথ্য | ... | |
| ঐচ্ছিক কলামের ভূমিকা : | কোনোটিই নয় | কোনোটিই নয় | কোনোটিই নয় | ... |
কনফিগারেশন অপশন
| নাম | |
|---|---|
| forceIFrame | একটি ইনলাইন ফ্রেমের ভিতরে চার্ট আঁকে। (উল্লেখ্য যে IE8 এ, এই বিকল্পটি উপেক্ষা করা হয়েছে; সমস্ত IE8 চার্ট আই-ফ্রেমে আঁকা হয়েছে।) প্রকার: বুলিয়ান ডিফল্ট: মিথ্যা |
| উচ্চতা | চার্টের উচ্চতা, পিক্সেলে। প্রকার: সংখ্যা ডিফল্ট: ধারণকারী উপাদানের উচ্চতা |
| sankey.iterations | মাল্টিলেভেল সানকি সহ, এটি কখনও কখনও অস্পষ্ট হয় যেখানে সর্বোত্তম পঠনযোগ্যতার জন্য নোডগুলি স্থাপন করা উচিত। D3 লেআউট ইঞ্জিন বিভিন্ন নোড লেআউট নিয়ে পরীক্ষা-নিরীক্ষা করে, যখন প্রকার: পূর্ণসংখ্যা ডিফল্ট: 32 |
| sankey.link | নোডের মধ্যে সংযোগের বৈশিষ্ট্যগুলি নিয়ন্ত্রণ করে। বর্তমানে সমস্ত বৈশিষ্ট্য রঙের সাথে সম্পর্কিত:
sankey: {
link: {
color: {
fill: '#efd', // Color of the link.
fillOpacity: 0.8, // Transparency of the link.
stroke: 'black', // Color of the link border.
strokeWidth: 1 // Thickness of the link border (default 0).
},
colors: [
'#a6cee3', // Custom color palette for sankey links.
'#1f78b4', // Nodes will cycle through this palette
'#b2df8a', // giving the links for that node the color.
'#33a02c'
]
}
}
প্রকার: বস্তু ডিফল্ট: নাল |
| sankey.link.colorMode | নোডগুলির মধ্যে লিঙ্কগুলির জন্য একটি রঙিন মোড সেট করে। সম্ভাব্য মান:
এই বিকল্পটি sankey.link.color ওভাররাইড করে। প্রকার: স্ট্রিং ডিফল্ট: 'কিছুই নয়' |
| sankey.node | নোডগুলির বৈশিষ্ট্যগুলি নিয়ন্ত্রণ করে (লিঙ্কগুলির মধ্যে উল্লম্ব বারগুলি):
sankey: {
node: {
label: {
fontName: 'Times-Roman',
fontSize: 12,
color: '#000',
bold: true,
italic: false
},
interactivity: true, // Allows you to select nodes.
labelPadding: 6, // Horizontal distance between the label and the node.
nodePadding: 10, // Vertical distance between nodes.
width: 5, // Thickness of the node.
colors: [
'#a6cee3', // Custom color palette for sankey nodes.
'#1f78b4', // Nodes will cycle through this palette
'#b2df8a', // giving each node its own color.
'#33a02c'
]
}
}
প্রকার: বস্তু ডিফল্ট: নাল |
| sankey.node.colorMode | সানকি নোডের জন্য একটি রঙ মোড সেট করে। সম্ভাব্য মান:
প্রকার: স্ট্রিং ডিফল্ট: 'অনন্য' |
| টুলটিপ | বিভিন্ন টুলটিপ উপাদান কনফিগার করার জন্য সদস্যদের সাথে একটি বস্তু। এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে: {textStyle: {color: '#FF0000'}, showColorCode: true} প্রকার: বস্তু ডিফল্ট: নাল |
| tooltip.isHtml | সত্য হিসাবে সেট করা হলে, HTML-রেন্ডার করা (এসভিজি-রেন্ডারের পরিবর্তে) টুলটিপ ব্যবহার করুন। আরও বিস্তারিত জানার জন্য টুলটিপ সামগ্রী কাস্টমাইজ করা দেখুন। দ্রষ্টব্য: টুলটিপ কলাম ডেটা ভূমিকার মাধ্যমে HTML টুলটিপ সামগ্রীর কাস্টমাইজেশন বাবল চার্ট ভিজ্যুয়ালাইজেশন দ্বারা সমর্থিত নয় ৷ প্রকার: বুলিয়ান ডিফল্ট: মিথ্যা |
| tooltip.textStyle | টুলটিপ টেক্সট শৈলী নির্দিষ্ট করে এমন একটি বস্তু। বস্তুর এই বিন্যাস আছে:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
প্রকার: বস্তু ডিফল্ট: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
| প্রস্থ | চার্টের প্রস্থ, পিক্সেলে। প্রকার: সংখ্যা ডিফল্ট: ধারণকারী উপাদানের প্রস্থ |
পদ্ধতি
| পদ্ধতি | |
|---|---|
draw(data, options) | চার্ট আঁকে। রিটার্ন টাইপ: কোনোটিই নয় |
getBoundingBox(id) | চার্ট এলিমেন্ট
মানগুলি চার্টের কন্টেইনারের সাথে আপেক্ষিক। চার্ট আঁকা পরে এটি কল. রিটার্ন টাইপ: অবজেক্ট |
getSelection() | নির্বাচিত চার্ট সত্তাগুলির একটি অ্যারে প্রদান করে। নির্বাচনযোগ্য সত্তা হল বার, কিংবদন্তি এন্ট্রি এবং বিভাগ। এই চার্টের জন্য, যে কোনো মুহূর্তে শুধুমাত্র একটি সত্তা নির্বাচন করা যেতে পারে। রিটার্ন টাইপ: নির্বাচন উপাদানের অ্যারে |
setSelection() | নির্দিষ্ট চার্ট সত্তা নির্বাচন করে। আগের যেকোনো নির্বাচন বাতিল করে। নির্বাচনযোগ্য সত্তা হল বার, কিংবদন্তি এন্ট্রি এবং বিভাগ। এই চার্টের জন্য, একবারে শুধুমাত্র একটি সত্তা নির্বাচন করা যেতে পারে। রিটার্ন টাইপ: কোনোটিই নয় |
clearChart() | চার্টটি সাফ করে এবং এর সমস্ত বরাদ্দকৃত সংস্থান প্রকাশ করে। রিটার্ন টাইপ: কোনোটিই নয় |
ঘটনা
| নাম | |
|---|---|
error | চার্ট রেন্ডার করার চেষ্টা করার সময় একটি ত্রুটি ঘটলে বহিস্কার করা হয়। বৈশিষ্ট্য: আইডি, বার্তা |
onmouseover | যখন ব্যবহারকারী একটি ভিজ্যুয়াল সত্তার উপর মাউস দেয় তখন বহিস্কার করা হয়। সংশ্লিষ্ট ডেটা টেবিল উপাদানের সারি এবং কলামের সূচকগুলিকে পাস করে। একটি বার ডেটা টেবিলের একটি কক্ষের সাথে সম্পর্কযুক্ত, একটি কলামে একটি কিংবদন্তি এন্ট্রি (সারি সূচকটি শূন্য), এবং একটি সারির একটি বিভাগ (কলাম সূচকটি শূন্য)। বৈশিষ্ট্য: সারি, কলাম |
onmouseout | ব্যবহারকারী মাউস একটি ভিজ্যুয়াল সত্তা থেকে দূরে থাকলে বহিস্কার করা হয়। সংশ্লিষ্ট ডেটা টেবিল উপাদানের সারি এবং কলামের সূচকগুলিকে পাস করে। একটি বার ডেটা টেবিলের একটি কক্ষের সাথে সম্পর্কযুক্ত, একটি কলামে একটি কিংবদন্তি এন্ট্রি (সারি সূচকটি শূন্য), এবং একটি সারির একটি বিভাগ (কলাম সূচকটি শূন্য)। বৈশিষ্ট্য: সারি, কলাম |
ready | চার্টটি বাহ্যিক পদ্ধতি কলের জন্য প্রস্তুত। আপনি যদি চার্টের সাথে ইন্টারঅ্যাক্ট করতে চান, এবং আপনি এটি আঁকার পরে কল করার পদ্ধতিগুলি চান, তাহলে বৈশিষ্ট্য: কোনোটিই নয় |
select | ব্যবহারকারী একটি ভিজ্যুয়াল সত্তা ক্লিক করলে বহিস্কার করা হয়। কি নির্বাচন করা হয়েছে তা জানতে, বৈশিষ্ট্য: কোনোটিই নয় |
ডেটা নীতি
সমস্ত কোড এবং ডেটা ব্রাউজারে প্রসেস এবং রেন্ডার করা হয়। কোনো সার্ভারে কোনো ডেটা পাঠানো হয় না।