DC.js মূলত ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হলেও, আপনি এটি ডেটা টেবিল বা Data Grid তৈরি করতে এবং ডেটা ফিল্টারিংয়ের জন্যও ব্যবহার করতে পারেন। DC.js এ ডেটা গ্রিড তৈরি করা এবং ডেটা ফিল্টারিং খুবই সহজ এবং ইন্টারেক্টিভ হয়, বিশেষত যখন আপনি Crossfilter এর সাথে এটি ব্যবহার করেন।
এখানে DC.js এর মাধ্যমে Data Grid তৈরি করার পদ্ধতি এবং Data Filtering এর জন্য উদাহরণ দেওয়া হলো।
১. Data Grid তৈরি করা
DC.js এর সাথে ডেটা টেবিল তৈরি করার জন্য একটি data-table প্লাগইন অথবা dc.dataTable() ফাংশন ব্যবহার করা যেতে পারে। যেহেতু DC.js সরাসরি ডেটা টেবিল তৈরি করার জন্য কোনও নির্দিষ্ট API সরবরাহ করে না, তাই আমরা HTML Table ব্যবহার করে ডেটা টেবিল তৈরি করতে পারি এবং DC.js এর মাধ্যমে ডেটার উপর ফিল্টার এবং গ্রুপিং প্রয়োগ করতে পারি।
Step 1: HTML এবং JavaScript Setup
প্রথমে HTML ফাইল তৈরি করুন যেখানে ডেটা টেবিল এবং DC.js এর ডেটা ভিজ্যুয়ালাইজেশন থাকবে।
<!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 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 Data Grid Example</h1>
<!-- Data Grid (HTML Table) -->
<table id="data-table" border="1">
<thead>
<tr>
<th>Category</th>
<th>Value</th>
<th>Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- DC.js Charts -->
<div id="bar-chart"></div>
<script>
// Sample Data
const data = [
{ category: "A", value: 30, date: "2023-12-01" },
{ category: "B", value: 50, date: "2023-12-02" },
{ category: "A", value: 70, date: "2023-12-03" },
{ category: "C", value: 20, date: "2023-12-01" },
{ category: "B", value: 40, date: "2023-12-02" },
{ category: "A", value: 90, date: "2023-12-03" }
];
// Crossfilter Indexing
const ndx = crossfilter(data);
const categoryDimension = ndx.dimension(d => d.category);
const dateDimension = ndx.dimension(d => d.date);
// Data Grid (HTML Table) Rendering
function renderDataTable(data) {
const tableBody = document.querySelector("#data-table tbody");
tableBody.innerHTML = ''; // Clear previous rows
data.forEach(d => {
const row = tableBody.insertRow();
row.insertCell(0).textContent = d.category;
row.insertCell(1).textContent = d.value;
row.insertCell(2).textContent = d.date;
});
}
// Initial render of Data Grid
renderDataTable(data);
// DC.js Bar Chart Setup
const barChart = dc.barChart("#bar-chart");
barChart
.width(500)
.height(200)
.dimension(categoryDimension)
.group(categoryDimension.group().reduceSum(d => d.value))
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.xAxisLabel("Category")
.yAxisLabel("Value")
.on("filtered", function () {
// When filtering the chart, update data grid
const filteredData = categoryDimension.top(Infinity);
renderDataTable(filteredData);
});
// Render the chart
dc.renderAll();
</script>
</body>
</html>
Code Breakdown:
- HTML Table: একটি সাধারণ HTML টেবিল তৈরি করা হয়েছে, যার মধ্যে
Category,Value, এবংDateকলাম রয়েছে। - Data Grid (Table) Rendering:
renderDataTable()ফাংশন ব্যবহার করে ডেটা টেবিল তৈরি করা হয়েছে এবং DC.js চার্টের মাধ্যমে ডেটা ফিল্টার বা সিলেক্ট করলে এই টেবিলও আপডেট হবে। - DC.js Chart: একটি বার চার্ট (
barChart) তৈরি করা হয়েছে, যেখানে ক্যাটেগরি অনুযায়ী ডেটা দেখানো হবে।
২. Data Filtering
DC.js এবং Crossfilter ব্যবহার করে ডেটা ফিল্টারিং করা অত্যন্ত সহজ। আপনি যখন DC.js Chart তে কোনো ফিল্টার প্রয়োগ করেন, তখন সেই ফিল্টার ডেটা গ্রিডেও প্রতিফলিত হবে।
Filtering Example:
- যখন ব্যবহারকারী বার চার্টে কোনো সিলেকশন করবে, তখন সিলেক্ট করা ক্যাটেগরি অনুযায়ী ডেটা টেবিল আপডেট হবে।
on("filtered")ইভেন্ট ব্যবহার করে সিলেক্টেড ডেটা নিয়ে টেবিল আপডেট করা হবে।
.on("filtered", function () {
// When filtering the chart, update data grid
const filteredData = categoryDimension.top(Infinity);
renderDataTable(filteredData);
});
এখানে categoryDimension.top(Infinity) ব্যবহার করে সমস্ত ফিল্টার করা ডেটা প্রাপ্ত করা হচ্ছে এবং তারপর renderDataTable() ফাংশন দিয়ে HTML টেবিল আপডেট করা হচ্ছে।
৩. Filtering and Displaying Filtered Data
ডেটা ফিল্টার করার পর, আপনি DC.js এর মাধ্যমে ফিল্টার করা ডেটা দেখতে পারেন এবং সেই ডেটা একটি টেবিলের মধ্যে উপস্থাপন করতে পারেন।
Code to Apply Filter and Update Table:
categoryDimension.filter("A"); // Filter by Category "A"
console.log("Filtered Data for Category A:", categoryDimension.top(Infinity));
// The table will automatically update when chart is filtered.
এটি Category "A" এর ডেটা ফিল্টার করবে এবং সেই ডেটার ভিত্তিতে টেবিল আপডেট হবে। আপনি যেকোনো ফিল্টারিং শর্ত বা গ্রুপিং করতে পারবেন।
৪. সম্পূর্ণ উদাহরণ কোড
<!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 and Filtering</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 with Filtering</h1>
<!-- Data Grid (HTML Table) -->
<table id="data-table" border="1">
<thead>
<tr>
<th>Category</th>
<th>Value</th>
<th>Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- DC.js Chart -->
<div id="bar-chart"></div>
<script>
// Sample Data
const data = [
{ category: "A", value: 30, date: "2023-12-01" },
{ category: "B", value: 50, date: "2023-12-02" },
{ category: "A", value: 70, date: "2023-12-03" },
{ category: "C", value: 20, date: "2023-12-01" },
{ category: "B", value: 40, date: "2023-12-02" },
{ category: "A", value: 90, date: "2023-12-03" }
];
// Crossfilter Indexing
const ndx = crossfilter(data);
const categoryDimension = ndx.dimension(d => d.category);
const dateDimension = ndx.dimension(d => d.date);
// Data Grid (HTML Table) Rendering
function renderDataTable(data) {
const tableBody = document.querySelector("#data-table tbody");
tableBody.innerHTML = ''; // Clear previous rows
data.forEach(d => {
const row = tableBody.insertRow();
row.insertCell(0).textContent = d.category;
row.insertCell(1).textContent = d.value;
row.insertCell(2).textContent = d.date;
});
}
// Initial render of Data Grid
renderDataTable(data);
// DC.js Bar Chart Setup
const barChart = dc.barChart("#bar-chart");
barChart
.width(500)
.height(200)
.dimension(categoryDimension)
.group(categoryDimension.group().reduceSum(d => d.value))
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.xAxisLabel("Category")
.yAxisLabel("Value")
.on("filtered", function () {
// When filtering the chart, update data grid
const filteredData = categoryDimension.top(Infinity);
renderDataTable(filteredData);
});
// Render the chart
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- Data Grid: DC.js এবং HTML ব্যবহার করে একটি ডেটা টেবিল (গ্রিড) তৈরি করা যায়।
- Data Filtering: Crossfilter এবং DC.js এর মাধ্যমে ডেটা ফিল্টার করা যায় এবং ফিল্টার হওয়া ডেটা টেবিলের মাধ্যমে দেখানো হয়।
- Dynamic Updates: ফিল্টার করার সময় চার্ট এবং টেবিল দুটোই স্বয়ংক্রিয়ভাবে আপডেট হয়।
এটি একটি শক্তিশালী পদ্ধতি যেখানে আপনি ডেটা ভিজ্যুয়ালাইজেশন এবং ডেটা বিশ্লেষণ একই সময়ে করতে পারেন।
Content added By
Read more
