DC.js ব্যবহার করে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করার সময়, slice labels এবং legends যোগ করা খুবই গুরুত্বপূর্ণ, কারণ এগুলি ব্যবহারকারীকে চার্টের তথ্য স্পষ্টভাবে বুঝতে সাহায্য করে। এখানে Pie Chart এবং Bar Chart এর উদাহরণ দিয়ে দেখানো হবে কিভাবে slice labels এবং legends যোগ করা যায়।
১. Slice Labels যোগ করা
Slice Labels মূলত চার্টের প্রতিটি অংশের উপরে লেবেল হিসাবে প্রদর্শিত হয়, যা ডেটার মান বা নাম জানায়।
উদাহরণ: Pie Chart এ Slice Labels যোগ করা
প্রথমে একটি Pie Chart তৈরি করি এবং প্রতিটি স্লাইসের উপর slice labels যোগ করি।
১.১ HTML ফাইল সেটআপ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Slice Labels</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.css">
</head>
<body>
<h1>DC.js Slice Labels Example</h1>
<div id="pie-chart"></div>
<script>
// JavaScript কোড এখানে হবে
</script>
</body>
</html>
১.২ ডেটাসেট তৈরি
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 20 }
];
১.৩ DC.js Pie Chart তৈরি এবং Slice Labels যোগ করা
const ndx = crossfilter(data);
const dimension = ndx.dimension(d => d.category);
const group = dimension.group().reduceSum(d => d.value);
const pieChart = dc.pieChart("#pie-chart");
pieChart
.width(400)
.height(300)
.dimension(dimension)
.group(group)
.radius(100)
.label(d => d.key + ": " + d.value) // Slice labels যোগ করা
.render();
এখানে label(d => d.key + ": " + d.value) ব্যবহার করা হয়েছে, যা প্রতিটি স্লাইসে তার category এবং value দেখাবে।
২. Legends যোগ করা
Legends হলো চার্টের পাশে ছোট আয়তক্ষেত্র বা বক্স, যা প্রতিটি স্লাইস বা ডেটার জন্য রঙের অর্থ দেখায়।
উদাহরণ: Pie Chart এ Legends যোগ করা
DC.js ব্যবহার করে Pie Chart এর পাশে Legends যোগ করা সহজ।
২.১ HTML ফাইল সেটআপ (উপরে দেখানো হয়েছে)
২.২ ডেটাসেট এবং Pie Chart তৈরি
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 20 }
];
const ndx = crossfilter(data);
const dimension = ndx.dimension(d => d.category);
const group = dimension.group().reduceSum(d => d.value);
const pieChart = dc.pieChart("#pie-chart");
pieChart
.width(400)
.height(300)
.dimension(dimension)
.group(group)
.radius(100)
.label(d => d.key + ": " + d.value)
.legend(dc.legend().x(350).y(50).itemHeight(13).gap(5)) // Legends যোগ করা
.render();
এখানে legend(dc.legend().x(350).y(50).itemHeight(13).gap(5)) ব্যবহার করা হয়েছে, যা chart এর পাশে legends যোগ করে। এটি legends এর অবস্থান, উচ্চতা এবং গ্যাপ নির্ধারণ করতে সাহায্য করে।
৩. Bar Chart এ Slice Labels এবং Legends যোগ করা
এখানে একটি Bar Chart তৈরি করা হচ্ছে এবং সেটিতে slice labels এবং legends যোগ করা হবে।
৩.১ HTML ফাইল সেটআপ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Bar Chart Slice Labels</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.css">
</head>
<body>
<h1>DC.js Bar Chart with Slice Labels and Legends</h1>
<div id="bar-chart"></div>
<script>
// JavaScript কোড এখানে হবে
</script>
</body>
</html>
৩.২ ডেটাসেট তৈরি
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 20 },
{ category: "D", value: 60 }
];
৩.৩ DC.js Bar Chart তৈরি এবং Slice Labels ও Legends যোগ করা
const ndx = crossfilter(data);
const dimension = ndx.dimension(d => d.category);
const group = dimension.group().reduceSum(d => d.value);
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(dimension)
.group(group)
.x(d3.scaleBand().domain(data.map(d => d.category))) // X-অক্ষ স্কেল
.xUnits(dc.units.ordinal)
.barPadding(0.1)
.outerPadding(0.05)
.label(d => d.value) // Slice labels যোগ করা
.legend(dc.legend().x(510).y(50).itemHeight(13).gap(5)) // Legends যোগ করা
.render();
এখানে label(d => d.value) ব্যবহার করে প্রতিটি বার স্লাইসের উপর লেবেল যোগ করা হয়েছে এবং legend(dc.legend()) দিয়ে বারের পাশের legends যোগ করা হয়েছে।
সারাংশ
- Slice Labels: DC.js দিয়ে Pie Chart বা Bar Chart এর প্রতিটি স্লাইসে লেবেল যোগ করা যায়, যা ডেটার মান বা ক্যাটেগরি দেখাতে সাহায্য করে। এটি
label(d => ...)দিয়ে সেট করা হয়। - Legends: DC.js দিয়ে প্রতিটি চার্টের পাশের legends যোগ করা যায়, যা বিভিন্ন স্লাইস বা বার এর রঙের মান বুঝতে সাহায্য করে। Legends সেট করা হয়
legend(dc.legend())এর মাধ্যমে।
এই উপায়ে DC.js ব্যবহার করে আপনার ভিজ্যুয়ালাইজেশনকে আরও ইন্টারেক্টিভ এবং তথ্যপূর্ণ করে তুলতে পারেন।
Read more
