DC.js একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি যা D3.js এবং Crossfilter এর উপর ভিত্তি করে তৈরি, এবং এটি ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সাহায্য করে। এখানে আমরা Scatter Plot এবং Bubble Chart তৈরি করার পদ্ধতি দেখব, যা DC.js ব্যবহার করে খুব সহজে তৈরি করা যায়।
১. Scatter Plot তৈরি
Scatter Plot সাধারণত দুটি পরিবর্তনশীলের মধ্যে সম্পর্ক বা প্যাটার্ন দেখাতে ব্যবহৃত হয়। DC.js দিয়ে একটি Scatter Plot তৈরি করতে আমরা D3.js এর circle ব্যবহার করব।
১.১ HTML ফাইল সেটআপ
প্রথমে HTML ফাইলে DC.js, D3.js এবং 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 Scatter Plot</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 Scatter Plot</h1>
<div id="scatter-chart"></div>
<script>
// JavaScript কোড এখানে হবে
</script>
</body>
</html>
১.২ ডেটাসেট তৈরি
এখন আমরা একটি সিম্পল ডেটাসেট তৈরি করব যা x, y এবং size মান ধারণ করবে।
const data = [
{ x: 10, y: 20, size: 5 },
{ x: 20, y: 40, size: 10 },
{ x: 30, y: 60, size: 15 },
{ x: 40, y: 80, size: 20 },
{ x: 50, y: 100, size: 25 }
];
১.৩ DC.js Scatter Plot তৈরি
এখন DC.js দিয়ে Scatter Plot তৈরি করা হবে:
const ndx = crossfilter(data); // Crossfilter ইনস্ট্যান্স তৈরি
const dimension = ndx.dimension(d => [d.x, d.y]); // ডাইমেনশন তৈরি
const group = dimension.group(); // গ্রুপ তৈরি
const scatterChart = dc.scatterPlot("#scatter-chart");
scatterChart
.width(600)
.height(400)
.dimension(dimension) // ডাইমেনশন যোগ করা
.group(group) // গ্রুপ যোগ করা
.x(d3.scaleLinear().domain([0, 60])) // X-অক্ষ স্কেল
.y(d3.scaleLinear().domain([0, 120])) // Y-অক্ষ স্কেল
.r(d => d.size) // বubble (circle) সাইজ
.render();
১.৪ সারাংশ
- ডাইমেনশন: ডেটার দুটি পরিবর্তনশীল (x এবং y) নিয়ে ডাইমেনশন তৈরি করা হয়।
- গ্রুপ: ডেটাকে গ্রুপ করে পর্যবেক্ষণ করা হয়।
- সেটিংস: Scatter Plot এর জন্য X এবং Y অক্ষের স্কেল এবং বubble সাইজ নির্ধারণ করা হয়েছে।
২. Bubble Chart তৈরি
Bubble Chart একটি উন্নত Scatter Plot যা প্রতিটি পয়েন্টের আকার (size) বা রঙ দিয়ে আরও বেশি তথ্য প্রকাশ করতে সাহায্য করে। এখানে আমরা Bubble Chart তৈরি করব যা প্রতিটি পয়েন্টের আকার ও রঙের উপর ভিত্তি করে ভিন্ন ভিন্ন মান দেখাবে।
২.১ 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 Bubble 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 Bubble Chart</h1>
<div id="bubble-chart"></div>
<script>
// JavaScript কোড এখানে হবে
</script>
</body>
</html>
২.২ ডেটাসেট তৈরি
এখানে একটি ডেটাসেট তৈরি করছি যেখানে প্রতিটি পয়েন্টের জন্য x, y, size, এবং color মান থাকবে।
const data = [
{ x: 10, y: 20, size: 5, color: 'red' },
{ x: 20, y: 40, size: 10, color: 'blue' },
{ x: 30, y: 60, size: 15, color: 'green' },
{ x: 40, y: 80, size: 20, color: 'yellow' },
{ x: 50, y: 100, size: 25, color: 'purple' }
];
২.৩ DC.js Bubble Chart তৈরি
এখন DC.js দিয়ে Bubble Chart তৈরি করা হবে:
const ndx = crossfilter(data); // Crossfilter ইনস্ট্যান্স তৈরি
const dimension = ndx.dimension(d => [d.x, d.y]); // ডাইমেনশন তৈরি
const group = dimension.group(); // গ্রুপ তৈরি
const bubbleChart = dc.bubbleChart("#bubble-chart");
bubbleChart
.width(600)
.height(400)
.dimension(dimension) // ডাইমেনশন যোগ করা
.group(group) // গ্রুপ যোগ করা
.x(d3.scaleLinear().domain([0, 60])) // X-অক্ষ স্কেল
.y(d3.scaleLinear().domain([0, 120])) // Y-অক্ষ স্কেল
.r(d => d.size) // বubble সাইজ
.colorAccessor(d => d.color) // বubble রঙ
.render();
২.৪ সারাংশ
- ডাইমেনশন: X এবং Y এর উপর ভিত্তি করে ডাইমেনশন তৈরি করা হয়।
- বubble সাইজ: প্রতিটি পয়েন্টের আকার
sizeপ্রপার্টি দ্বারা নির্ধারিত হয়। - রঙ: প্রতিটি পয়েন্টের রঙ
colorপ্রপার্টি দ্বারা নির্ধারিত হয়। - X ও Y অক্ষ স্কেল: X এবং Y অক্ষের স্কেল যথাযথভাবে নির্ধারিত হয়েছে।
সারাংশ
- Scatter Plot এবং Bubble Chart উভয়ই DC.js দিয়ে খুব সহজে তৈরি করা যায়, যা ডেটার মধ্যে সম্পর্ক এবং ভিন্ন ভিন্ন তথ্য উপস্থাপন করতে সহায়ক।
- Scatter Plot দুইটি পরিমাপের মধ্যে সম্পর্ক দেখাতে ব্যবহৃত হয়, যেখানে Bubble Chart আকার এবং রঙের মাধ্যমে অতিরিক্ত ডেটা প্রদর্শন করতে সহায়ক।
