DC.js একটি শক্তিশালী লাইব্রেরি যা D3.js এবং Crossfilter এর সাথে কাজ করে ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে। Pie Chart (পাই চার্ট) DC.js এর অন্যতম জনপ্রিয় চার্ট ধরনের একটি। এই টিউটোরিয়ালে আমরা Advanced Pie Chart Techniques নিয়ে আলোচনা করব, যেখানে Inner Radius (অভ্যন্তরীণ ব্যাসার্ধ) এবং Padding (প্যাডিং) নিয়ে কাজ করা হবে।
Inner Radius (অভ্যন্তরীণ ব্যাসার্ধ)
Inner Radius ব্যবহৃত হয় Donut Chart তৈরিতে। এটি পাই চার্টের ভিতরের অংশে গর্ত তৈরি করে, ফলে একটি ডোনাটের মতো দেখতে হয়। D3.js এবং DC.js তে inner radius ব্যবহার করে এটি অর্জন করা যায়।
Padding (প্যাডিং)
Padding ব্যবহৃত হয় পাই চার্টের সেকশনগুলোর মধ্যে স্থান তৈরি করার জন্য, যা সাধারণত সেগুলোর মধ্যে একটি ছোট ফাঁকা জায়গা তৈরি করে, ফলে সেগুলোর মধ্যে পার্থক্য পরিষ্কারভাবে দেখা যায়।
DC.js এ Advanced Pie Chart Techniques প্রয়োগ
১. ডেটাসেট তৈরি এবং Crossfilter সেটআপ
প্রথমে ডেটাসেট তৈরি করা হবে এবং Crossfilter ইন্ডেক্স তৈরি করা হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Advanced Pie Chart</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 Advanced Pie Chart Example</h1>
<div id="pie-chart"></div>
<script>
// ডেটাসেট তৈরি
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 40 },
{ category: "E", value: 60 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
const group = categoryDimension.group().reduceSum(d => d.value);
</script>
</body>
</html>
এখানে data নামক একটি ডেটাসেট তৈরি করা হয়েছে এবং categoryDimension নামে একটি ডাইমেনশন তৈরি করা হয়েছে।
২. Inner Radius (অভ্যন্তরীণ ব্যাসার্ধ) এবং Padding প্রয়োগ
এখন আমরা Inner Radius (ডোনাট চার্ট তৈরির জন্য) এবং Padding (পাই চার্টের সেকশনগুলোর মধ্যে ফাঁকা স্থান তৈরি করার জন্য) সেটআপ করব।
const pieChart = dc.pieChart("#pie-chart");
pieChart
.width(300) // চার্টের প্রস্থ
.height(300) // চার্টের উচ্চতা
.dimension(categoryDimension) // ডাইমেনশন সেট করুন
.group(group) // গ্রুপ সেট করুন
.innerRadius(50) // Inner radius (ডোনাট চার্টের জন্য)
.externalLabels(20) // বাইরের লেবেলগুলির স্থান
.slicesCap(4) // সর্বাধিক স্লাইস সীমাবদ্ধ করতে
.labelOffset(10) // লেবেল স্থান
.padAngle(0.05) // প্যাডিং, সেকশনগুলোর মধ্যে ফাঁকা স্থান
.renderLabel(true) // লেবেল প্রদর্শন
.renderTitle(true); // টাইটেল প্রদর্শন
dc.renderAll();
গুরুত্বপূর্ণ প্যারামিটারগুলি:
- innerRadius(50): এই প্যারামিটারটি পাই চার্টে গর্ত তৈরি করে, যেটি ডোনাট চার্টের মতো দেখাবে। মান বেশি হলে গর্তটি বড় হবে, কম হলে ছোট।
- padAngle(0.05): এই প্যারামিটারটি পাই চার্টের সেকশনগুলোর মধ্যে ফাঁকা স্থান তৈরি করে, যাতে সেগুলোর মধ্যে পার্থক্য পরিষ্কারভাবে দেখা যায়। আপনি এটি সামঞ্জস্য করে সেকশনগুলোর মধ্যে আলাদা স্থান তৈরি করতে পারেন।
- externalLabels(20): এই প্যারামিটারটি বাইরের লেবেলগুলির মধ্যে দূরত্ব কনফিগার করে। মান বেশি হলে লেবেলগুলি আরও দূরে চলে যাবে।
- slicesCap(4): এটি পাই চার্টের সর্বাধিক স্লাইস সীমাবদ্ধ করতে ব্যবহৃত হয়। আপনি কতটি স্লাইস প্রদর্শন করতে চান তা নির্ধারণ করতে পারেন।
৩. সম্পূর্ণ কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Advanced Pie Chart</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 Advanced Pie Chart Example</h1>
<div id="pie-chart"></div>
<script>
// ডেটাসেট তৈরি
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 40 },
{ category: "E", value: 60 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
const group = categoryDimension.group().reduceSum(d => d.value);
// DC.js Pie Chart তৈরি
const pieChart = dc.pieChart("#pie-chart");
pieChart
.width(300) // চার্টের প্রস্থ
.height(300) // চার্টের উচ্চতা
.dimension(categoryDimension) // ডাইমেনশন সেট করুন
.group(group) // গ্রুপ সেট করুন
.innerRadius(50) // Inner radius (ডোনাট চার্টের জন্য)
.externalLabels(20) // বাইরের লেবেলগুলির স্থান
.slicesCap(4) // সর্বাধিক স্লাইস সীমাবদ্ধ করতে
.labelOffset(10) // লেবেল স্থান
.padAngle(0.05) // প্যাডিং, সেকশনগুলোর মধ্যে ফাঁকা স্থান
.renderLabel(true) // লেবেল প্রদর্শন
.renderTitle(true); // টাইটেল প্রদর্শন
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- Inner Radius (অভ্যন্তরীণ ব্যাসার্ধ) ব্যবহার করে পাই চার্টকে ডোনাট চার্টে পরিণত করা হয়।
- Padding (প্যাডিং) ব্যবহার করে পাই চার্টের সেকশনগুলোর মধ্যে স্থান তৈরি করা হয়, যা সেগুলোর মধ্যে পার্থক্য পরিষ্কারভাবে দৃশ্যমান করে।
- DC.js এর সাথে এই উন্নত পদ্ধতি ব্যবহারের মাধ্যমে আপনি আরও কাস্টমাইজেবল এবং ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারবেন।
Content added By
Read more
