DC.js একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি যা বিভিন্ন ধরনের ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সক্ষম, যেমন বার চার্ট, লাইন চার্ট, পাই চার্ট (Pie Chart), এবং ডোনাট চার্ট (Donut Chart)। এই গাইডে, আমরা Pie Chart এবং Donut Chart তৈরির প্রক্রিয়া শিখব।
১. প্রয়োজনীয় ফাইল যুক্ত করা
প্রথমে, আপনার HTML ফাইলে DC.js, D3.js, এবং Crossfilter এর সিডিএন লিঙ্ক যোগ করতে হবে।
<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">
২. HTML ফাইল তৈরি
আপনার 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 Pie and Donut Charts</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 Pie Chart and Donut Chart</h1>
<div id="pie-chart"></div>
<div id="donut-chart"></div>
<script>
// JavaScript কোড এখানে হবে
</script>
</body>
</html>
৩. JavaScript কোড লিখা
এখন পাই চার্ট এবং ডোনাট চার্ট তৈরি করার জন্য JavaScript কোড যোগ করা হবে।
ধাপ ১: ডেটাসেট লোড করা
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 20 },
{ category: "E", value: 60 }
];
ধাপ ২: Crossfilter সেটআপ এবং ডাইমেনশন তৈরি
const ndx = crossfilter(data);
// ডাইমেনশন তৈরি (category)
const categoryDimension = ndx.dimension(d => d.category);
// গ্রুপ তৈরি (value এর যোগফল)
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
ধাপ ৩: Pie Chart তৈরি
const pieChart = dc.pieChart("#pie-chart");
pieChart
.width(300)
.height(300)
.radius(100) // চার্টের রেডিয়াস
.dimension(categoryDimension) // ডাইমেনশন
.group(categoryGroup) // গ্রুপ
.legend(dc.legend()); // লিজেন্ড
ধাপ ৪: Donut Chart তৈরি
ডোনাট চার্ট তৈরির জন্য শুধু innerRadius সেট করতে হবে।
const donutChart = dc.pieChart("#donut-chart");
donutChart
.width(300)
.height(300)
.radius(100) // চার্টের রেডিয়াস
.innerRadius(50) // ডোনাটের ভিতরের রেডিয়াস
.dimension(categoryDimension) // ডাইমেনশন
.group(categoryGroup) // গ্রুপ
.legend(dc.legend()); // লিজেন্ড
ধাপ ৫: চার্ট রেন্ডার করা
সবগুলো চার্ট রেন্ডার করার জন্য dc.renderAll() ফাংশন ব্যবহার করা হবে।
dc.renderAll();
৪. সম্পূর্ণ কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Pie and Donut Charts</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 Pie Chart and Donut Chart</h1>
<div id="pie-chart"></div>
<div id="donut-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 20 },
{ category: "E", value: 60 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// ক্যাটেগরি ডাইমেনশন
const categoryDimension = ndx.dimension(d => d.category);
// ক্যাটেগরি গ্রুপ
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// Pie Chart তৈরি
const pieChart = dc.pieChart("#pie-chart");
pieChart
.width(300)
.height(300)
.radius(100)
.dimension(categoryDimension)
.group(categoryGroup)
.legend(dc.legend());
// Donut Chart তৈরি
const donutChart = dc.pieChart("#donut-chart");
donutChart
.width(300)
.height(300)
.radius(100)
.innerRadius(50) // ডোনাটের ভিতরের অংশ
.dimension(categoryDimension)
.group(categoryGroup)
.legend(dc.legend());
// চার্ট রেন্ডার করা
dc.renderAll();
</script>
</body>
</html>
৫. চার্ট কাস্টমাইজেশন
- লিজেন্ড:
dc.legend()ব্যবহার করে চার্টের লিজেন্ড কাস্টমাইজ করা যায়। - রেডিয়াস:
radius()এবংinnerRadius()ব্যবহার করে পাই এবং ডোনাট চার্টের আকার কাস্টমাইজ করা যায়। - ডাইমেনশন ও গ্রুপ: ডেটা অনুযায়ী ডাইমেনশন এবং গ্রুপের ভিত্তিতে চার্টের তথ্য পরিবর্তন করতে পারেন।
সারাংশ
- Pie Chart এবং Donut Chart DC.js দিয়ে খুব সহজেই তৈরি করা যায়।
- Pie Chart একটি সাধারণ চক্রাকার চার্ট, যেখানে Donut Chart এর মধ্যে একটি খালি অংশ থাকে।
- Crossfilter দিয়ে ডেটা ফিল্টার ও গ্রুপ করে DC.js এর মাধ্যমে ইন্টারেক্টিভ চার্ট তৈরি করা যায়।
এটি একটি খুবই কার্যকরী টুল, বিশেষ করে ডেটা বিশ্লেষণ এবং ভিজ্যুয়ালাইজেশনের জন্য।
Content added By
