DC.js একটি শক্তিশালী লাইব্রেরি যা D3.js এবং Crossfilter এর উপর ভিত্তি করে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়। Heatmap এবং Data Grid হল দুটি জনপ্রিয় ডেটা ভিজ্যুয়ালাইজেশন টুল যা ডেটার গভীর বিশ্লেষণ এবং তুলনা করতে সাহায্য করে। DC.js এ Heatmap এবং Data Grid তৈরি করতে এবং উন্নত ফিচারগুলি ব্যবহারের জন্য কিছু কৌশল রয়েছে।
এখানে আমরা Heatmap এবং Data Grid এর জন্য Advanced Features কিভাবে DC.js এর মাধ্যমে তৈরি করা যায়, তা আলোচনা করব।
১. Heatmap তৈরি করা
Heatmap এমন একটি ভিজ্যুয়ালাইজেশন যা বিভিন্ন ডেটা পয়েন্টের মাঝে সম্পর্ক এবং পার্থক্য দেখাতে সাহায্য করে, যেখানে রঙের গ্রেডিয়েন্ট ব্যবহার করা হয়।
ধাপ ১: ডেটাসেট তৈরি করা
Heatmap এর জন্য একটি নমুনা ডেটাসেট:
const data = [
{ x: 1, y: 1, value: 30 },
{ x: 2, y: 1, value: 50 },
{ x: 3, y: 1, value: 70 },
{ x: 1, y: 2, value: 40 },
{ x: 2, y: 2, value: 60 },
{ x: 3, y: 2, value: 90 },
{ x: 1, y: 3, value: 20 },
{ x: 2, y: 3, value: 80 },
{ x: 3, y: 3, value: 100 }
];
ধাপ ২: Crossfilter সেটআপ
const ndx = crossfilter(data);
const xDimension = ndx.dimension(d => d.x);
const yDimension = ndx.dimension(d => d.y);
const valueGroup = ndx.groupAll().reduceSum(d => d.value);
ধাপ ৩: DC.js Heatmap তৈরি করা
const heatmap = dc.heatMap("#heatmap");
heatmap
.width(400)
.height(400)
.dimension(xDimension)
.group(valueGroup)
.x(d3.scaleBand())
.y(d3.scaleBand())
.colorRange(["white", "red"]) // রঙের গ্রেডিয়েন্ট
.xUnits(dc.units.ordinal)
.yUnits(dc.units.ordinal)
.title(function(d) {
return "Value: " + d.value;
});
dc.renderAll();
এখানে, colorRange এর মাধ্যমে রঙের গ্রেডিয়েন্ট ব্যবহৃত হয়েছে এবং title ফাংশনের মাধ্যমে হোভার করার সময় অতিরিক্ত তথ্য (value) প্রদর্শিত হচ্ছে।
ধাপ ৪: 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 Heatmap</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 Heatmap Example</h1>
<div id="heatmap"></div>
<script>
const data = [
{ x: 1, y: 1, value: 30 },
{ x: 2, y: 1, value: 50 },
{ x: 3, y: 1, value: 70 },
{ x: 1, y: 2, value: 40 },
{ x: 2, y: 2, value: 60 },
{ x: 3, y: 2, value: 90 },
{ x: 1, y: 3, value: 20 },
{ x: 2, y: 3, value: 80 },
{ x: 3, y: 3, value: 100 }
];
const ndx = crossfilter(data);
const xDimension = ndx.dimension(d => d.x);
const yDimension = ndx.dimension(d => d.y);
const valueGroup = ndx.groupAll().reduceSum(d => d.value);
const heatmap = dc.heatMap("#heatmap");
heatmap
.width(400)
.height(400)
.dimension(xDimension)
.group(valueGroup)
.x(d3.scaleBand())
.y(d3.scaleBand())
.colorRange(["white", "red"])
.xUnits(dc.units.ordinal)
.yUnits(dc.units.ordinal)
.title(function(d) {
return "Value: " + d.value;
});
dc.renderAll();
</script>
</body>
</html>
২. Data Grid তৈরি করা
Data Grid একটি টেবিল-ভিত্তিক ভিজ্যুয়ালাইজেশন যা ডেটাকে সারি ও কলামে উপস্থাপন করে। DC.js ব্যবহার করে ডেটা গ্রিড তৈরি করা যেতে পারে যা ডেটাকে রিয়েল-টাইম ফিল্টার এবং সার্চ করার সুবিধা দেয়।
ধাপ ১: ডেটাসেট তৈরি
const data = [
{ id: 1, name: "John", age: 28, city: "New York" },
{ id: 2, name: "Sarah", age: 32, city: "Chicago" },
{ id: 3, name: "Mike", age: 40, city: "Los Angeles" },
{ id: 4, name: "Emily", age: 25, city: "Boston" },
{ id: 5, name: "David", age: 35, city: "San Francisco" }
];
ধাপ ২: Crossfilter সেটআপ
const ndx = crossfilter(data);
const idDimension = ndx.dimension(d => d.id);
const cityGroup = idDimension.group().reduceSum(d => d.age); // Age এর উপর গ্রুপ
ধাপ ৩: DC.js Data Grid তৈরি করা
DC.js সরাসরি ডেটা গ্রিড তৈরি করার জন্য উপযুক্ত নয়, তবে আপনি একটি HTML Table ব্যবহার করে গ্রিড তৈরি করতে পারেন এবং DC.js এর সাথে ইন্টিগ্রেট করতে পারেন:
const gridTable = dc.dataTable("#data-grid");
gridTable
.dimension(idDimension)
.group(function(d) { return "People"; })
.columns(["id", "name", "age", "city"])
.size(5) // 5টি সারি দেখানো হবে
.on("renderlet", function(chart) {
// এখানে আপনি ফিল্টারিং ইভেন্ট বা টেবিল রেন্ডারিং কাস্টমাইজ করতে পারেন
});
dc.renderAll();
ধাপ ৪: 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 Data Grid</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 Data Grid Example</h1>
<div id="data-grid"></div>
<script>
const data = [
{ id: 1, name: "John", age: 28, city: "New York" },
{ id: 2, name: "Sarah", age: 32, city: "Chicago" },
{ id: 3, name: "Mike", age: 40, city: "Los Angeles" },
{ id: 4, name: "Emily", age: 25, city: "Boston" },
{ id: 5, name: "David", age: 35, city: "San Francisco" }
];
const ndx = crossfilter(data);
const idDimension = ndx.dimension(d => d.id);
const cityGroup = idDimension.group().reduceSum(d => d.age);
const gridTable = dc.dataTable("#data-grid");
gridTable
.dimension(idDimension)
.group(function(d) { return "People"; })
.columns(["id", "name", "age", "city"])
.size(5)
.on("renderlet", function(chart) {
// Customize the rendering event
});
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- Heatmap: Heatmap ব্যবহার করে আপনি বিভিন্ন ডেটা পয়েন্টের সম্পর্ক দেখতে পারেন, যেখানে রঙের গ্রেডিয়েন্ট দিয়ে মান প্রদর্শিত হয়।
- Data Grid: DC.js দ্বারা ডেটা গ্রিড তৈরি করা যায়, যেখানে টেবিল ফরম্যাটে ডেটা দেখানো হয় এবং Crossfilter এর মাধ্যমে ফিল্টারিং এবং বিশ্লেষণ করা যায়।
এই advanced features গুলো ব্যবহার করে আপনি আরো ইন্টারেক্টিভ এবং ডেটা-ড্রিভেন ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন DC.js এর মাধ্যমে।
Read more
