DC.js একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি যা D3.js এবং Crossfilter এর উপর ভিত্তি করে তৈরি। এটি ইন্টারেক্টিভ এবং ডাইনামিক চার্ট তৈরির জন্য ব্যবহৃত হয়। এখানে আমরা DC.js ব্যবহার করে একটি Bar Chart (বার চার্ট) তৈরি করার প্রক্রিয়া দেখবো।
১. DC.js সেটআপ
প্রথমে আপনার 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 Bar 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 Bar Chart Example</h1>
<div id="bar-chart"></div>
<script>
// JavaScript কোড এখানে
</script>
</body>
</html>
৩. ডেটাসেট তৈরি করা
আমরা একটি সাধারণ ডেটাসেট ব্যবহার করবো যা ক্যাটেগরি এবং ভ্যালু সহ থাকবে। এই ডেটাকে Crossfilter এর মাধ্যমে লোড করা হবে।
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 80 },
{ category: "C", value: 45 },
{ category: "D", value: 60 },
{ category: "E", value: 20 },
{ category: "F", value: 90 }
];
৪. Crossfilter সেটআপ
Crossfilter দিয়ে ডেটাসেট লোড করতে হবে এবং ডাইমেনশন এবং গ্রুপ তৈরি করতে হবে।
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// ক্যাটেগরি এর উপর ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
// ক্যাটেগরি অনুযায়ী গ্রুপ তৈরি
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
৫. DC.js দিয়ে বার চার্ট তৈরি করা
এখন DC.js দিয়ে একটি বার চার্ট তৈরি করা হবে। এটি dc.barChart() ফাংশন দিয়ে তৈরি করা যাবে।
const barChart = dc.barChart("#bar-chart");
barChart
.width(600) // চার্টের প্রস্থ
.height(300) // চার্টের উচ্চতা
.dimension(categoryDimension) // ডাইমেনশন নির্ধারণ
.group(categoryGroup) // গ্রুপ নির্ধারণ
.x(d3.scaleBand()) // এক্স-অক্ষের স্কেল
.xUnits(dc.units.ordinal) // ডিসক্রিট ডেটার জন্য
.xAxisLabel("Categories") // এক্স-অক্ষের লেবেল
.yAxisLabel("Values") // ওয়াই-অক্ষের লেবেল
.renderHorizontalGridLines(true); // গ্রিড লাইন যোগ করা
৬. চার্ট রেন্ডার করা
সব চার্ট একসাথে রেন্ডার করতে dc.renderAll() ব্যবহার করা হয়:
dc.renderAll();
৭. সম্পূর্ণ কোড উদাহরণ
এখন আমরা পুরো HTML এবং JavaScript কোডের উদাহরণ দেখব, যা একটি বার চার্ট তৈরি করবে।
<!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 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 Bar Chart Example</h1>
<div id="bar-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 80 },
{ category: "C", value: 45 },
{ category: "D", value: 60 },
{ category: "E", value: 20 },
{ category: "F", value: 90 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// ক্যাটেগরি এর উপর ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
// ক্যাটেগরি অনুযায়ী গ্রুপ তৈরি
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// DC.js বার চার্ট
const barChart = dc.barChart("#bar-chart");
barChart
.width(600) // চার্টের প্রস্থ
.height(300) // চার্টের উচ্চতা
.dimension(categoryDimension) // ডাইমেনশন নির্ধারণ
.group(categoryGroup) // গ্রুপ নির্ধারণ
.x(d3.scaleBand()) // এক্স-অক্ষের স্কেল
.xUnits(dc.units.ordinal) // ডিসক্রিট ডেটার জন্য
.xAxisLabel("Categories") // এক্স-অক্ষের লেবেল
.yAxisLabel("Values") // ওয়াই-অক্ষের লেবেল
.renderHorizontalGridLines(true); // গ্রিড লাইন যোগ করা
// চার্ট রেন্ডার
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- DC.js দিয়ে ডেটা ভিজ্যুয়ালাইজেশনে ইন্টারেক্টিভ বার চার্ট তৈরি করা খুবই সহজ।
- Crossfilter দিয়ে ডেটা ফিল্টার ও গ্রুপ করা হয় এবং D3.js ব্যবহার করে গ্রাফিক্যাল উপস্থাপনা করা হয়।
dc.renderAll()ফাংশন দিয়ে সমস্ত চার্ট রেন্ডার করা হয়।
এই কোডটি আপনার প্রথম DC.js বার চার্ট তৈরি করতে সহায়তা করবে।
Content added By
Read more
