DC.js ব্যবহার করে Pie Chart এবং Donut Chart তৈরি করা খুবই সহজ এবং ইন্টারেক্টিভ। DC.js এর মাধ্যমে ডেটার সেগমেন্টগুলো প্রদর্শন করা সম্ভব, এবং এগুলো বিভিন্ন ফিল্টার এবং ইন্টারেকশন সাপোর্ট করে।
এখানে 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">
২. Pie Chart তৈরি
Pie Chart একটি সেক্টরগুলিতে ভাগ করা চার্ট যা ডেটার ভাগ প্রদর্শন করে। DC.js এর মাধ্যমে Pie Chart খুব সহজেই তৈরি করা যায়।
ডেটাসেট উদাহরণ
এখানে একটি উদাহরণ ডেটাসেট দেওয়া হল, যেখানে কিছু ক্যাটেগরি এবং তাদের মান রয়েছে:
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 40 }
];
Pie Chart কোড
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)
.dimension(categoryDimension)
.group(categoryGroup)
.radius(100) // পি চার্টের রেডিয়াস
.legend(dc.legend()) // লেজেন্ড যোগ করা
.render();
HTML কোড
<div id="pie-chart"></div>
৩. Donut Chart তৈরি
Donut Chart Pie Chart এর মতোই, তবে এতে মাঝখানে একটি ফাঁকা জায়গা থাকে। এটি Pie Chart এর একটি সংস্করণ, যা দেখতে একরকম কিন্তু আরও অনেক বেশি কাস্টমাইজেবল।
ডেটাসেট উদাহরণ (এটি Pie Chart এর মতোই)
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 40 }
];
Donut Chart কোড
const ndx = crossfilter(data);
// category এর উপর ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
// value এর উপর গ্রুপ তৈরি
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// Donut Chart তৈরি
const donutChart = dc.pieChart("#donut-chart");
donutChart
.width(300)
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.innerRadius(50) // ডোনাট চার্টের ভিতরের রেডিয়াস
.radius(100) // ডোনাট চার্টের বাইরের রেডিয়াস
.legend(dc.legend()) // লেজেন্ড যোগ করা
.render();
HTML কোড
<div id="donut-chart"></div>
৪. সম্পূর্ণ কোড উদাহরণ
<!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 Chart Example</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 and Donut Chart Example</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: 40 }
];
const ndx = crossfilter(data);
// Pie Chart
const categoryDimension = ndx.dimension(d => d.category);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
const pieChart = dc.pieChart("#pie-chart");
pieChart
.width(300)
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.radius(100)
.legend(dc.legend())
.render();
// Donut Chart
const donutChart = dc.pieChart("#donut-chart");
donutChart
.width(300)
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.innerRadius(50)
.radius(100)
.legend(dc.legend())
.render();
</script>
</body>
</html>
৫. সারাংশ
- Pie Chart এবং Donut Chart DC.js ব্যবহার করে সহজেই তৈরি করা যায়।
- Pie Chart সাধারণ সেক্টর প্রদর্শন করে, আর Donut Chart Pie Chart এর মতো, তবে মাঝে একটি ফাঁকা জায়গা থাকে।
- Crossfilter ডেটার গ্রুপিং এবং ফিল্টারিং সহজভাবে পরিচালনা করতে সহায়ক।
- এই চার্টগুলো ইন্টারেক্টিভ এবং ডাইনামিক ড্যাশবোর্ডে ব্যবহারের জন্য খুব উপযুক্ত।
DC.js দিয়ে আপনি খুব সহজেই ইন্টারেক্টিভ এবং ভিজ্যুয়ালাইজেশন প্রক্রিয়া সম্পন্ন করতে পারবেন।
Content added By
Read more
