DC.js একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি যা D3.js এবং Crossfilter এর উপর ভিত্তি করে তৈরি, এবং এটি ডেটা ভিজ্যুয়ালাইজেশন সহজ করে তোলে। Heatmaps এবং Data Grids ডেটাকে চাক্ষুষ উপস্থাপন করার জনপ্রিয় উপায়। এই গাইডে, আমরা Heatmaps এবং Data Grids তৈরির জন্য DC.js ব্যবহার করার পদ্ধতি দেখব।
১. Heatmap তৈরি
Heatmap একটি ভিজ্যুয়াল রেপ্রেজেন্টেশন যা দুটি ভেরিয়েবলের সম্পর্ক এবং তার তাপমাত্রা বা গরম/ঠান্ডা মান দেখায়। এটি সাধারণত একটি গ্রিডে সেল রঙের মাধ্যমে প্রদর্শিত হয়।
১.১ 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>
// JavaScript কোড এখানে হবে
</script>
</body>
</html>
১.২ ডেটাসেট তৈরি
const data = [
{ x: 1, y: 1, value: 30 },
{ x: 1, y: 2, value: 50 },
{ x: 1, y: 3, value: 70 },
{ x: 2, y: 1, value: 90 },
{ x: 2, y: 2, value: 40 },
{ x: 2, y: 3, value: 60 },
{ x: 3, y: 1, value: 80 },
{ x: 3, y: 2, value: 20 },
{ x: 3, y: 3, value: 50 }
];
১.৩ DC.js Heatmap তৈরি
const ndx = crossfilter(data);
const dimension = ndx.dimension(d => [d.x, d.y]); // X এবং Y এর উপর ডাইমেনশন তৈরি
const group = dimension.group().reduceSum(d => d.value); // গ্রুপিং এবং রিডাকশন
const heatmap = dc.heatMap("#heatmap");
heatmap
.width(400)
.height(300)
.dimension(dimension) // ডাইমেনশন যোগ করা
.group(group) // গ্রুপ যোগ করা
.keyAccessor(d => d.key[0]) // X-কী অ্যাকসেসর
.valueAccessor(d => d.key[1]) // Y-কী অ্যাকসেসর
.colorScale(d3.scaleSequential(d3.interpolateViridis).domain([0, 100])) // রঙের স্কেল
.render();
এখানে colorScale(d3.scaleSequential(d3.interpolateViridis).domain([0, 100])) ব্যবহার করে একটি রঙের স্কেল ব্যবহার করা হয়েছে, যা ডেটার মান অনুযায়ী রঙ পরিবর্তন করে।
২. Data Grid তৈরি
Data Grid একটি টেবিলের মত ডেটা উপস্থাপন করতে ব্যবহৃত হয়, যা সেলগুলির মধ্যে বিভিন্ন ধরনের ডেটা শো করতে সক্ষম। DC.js ব্যবহার করে একটি বেসিক ডেটা গ্রিড তৈরি করা যেতে পারে।
২.১ 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>
// JavaScript কোড এখানে হবে
</script>
</body>
</html>
২.২ ডেটাসেট তৈরি
const data = [
{ id: 1, category: "A", value: 30 },
{ id: 2, category: "B", value: 50 },
{ id: 3, category: "A", value: 70 },
{ id: 4, category: "B", value: 90 },
{ id: 5, category: "C", value: 20 }
];
২.৩ DC.js Data Grid তৈরি
const ndx = crossfilter(data);
const dimension = ndx.dimension(d => d.id); // ID ভিত্তিক ডাইমেনশন
const group = dimension.group();
const dataGrid = dc.dataTable("#data-grid");
dataGrid
.dimension(dimension) // ডাইমেনশন যোগ করা
.group(d => d.category) // ক্যাটেগরি অনুযায়ী গ্রুপিং
.columns([
{ label: "ID", format: d => d.id },
{ label: "Category", format: d => d.category },
{ label: "Value", format: d => d.value }
])
.render();
এখানে, columns এর মাধ্যমে ডেটার কলামগুলো নির্ধারণ করা হয়েছে এবং format ব্যবহার করে সঠিকভাবে ডেটা প্রদর্শন করা হয়েছে।
সারাংশ
- Heatmap: এটি DC.js দিয়ে সেলগুলির রঙের মাধ্যমে ডেটার তাপমাত্রা বা মান প্রদর্শন করার জন্য ব্যবহৃত হয়। এতে X এবং Y এর উপর ডেটা ভিজ্যুয়ালাইজ করা হয়, এবং রঙের স্কেল ডেটার মানের উপর ভিত্তি করে পরিবর্তিত হয়।
- Data Grid: একটি টেবিল ভিউ যেখানে ডেটাকে কলাম ও রো হিসেবে সংগঠিত করে দেখা যায়। DC.js দিয়ে ইন্টারেক্টিভ ডেটা টেবিল তৈরি করা সম্ভব, যেখানে ব্যবহারকারী ডেটা ফিল্টার এবং বিশ্লেষণ করতে পারেন।
এভাবে DC.js ব্যবহার করে Heatmap এবং Data Grid তৈরি করা যায়, যা ডেটা বিশ্লেষণ এবং ভিজ্যুয়ালাইজেশনে অত্যন্ত কার্যকর।
DC.js ব্যবহার করে Heatmap তৈরি করা সম্ভব। Heatmap একটি শক্তিশালী ভিজ্যুয়ালাইজেশন টুল, যা ডেটার ঘনত্ব বা ঘরানার বৈশিষ্ট্যগুলো প্রদর্শন করতে সহায়ক। DC.js এর সাথে D3.js এর ক্ষমতা ব্যবহারের মাধ্যমে Heatmap সহজেই তৈরি করা যায়, যেখানে Crossfilter ডেটার ফিল্টারিং এবং গ্রুপিং এর জন্য ব্যবহৃত হয়।
Heatmap কাস্টমাইজেশন
DC.js দিয়ে Heatmap তৈরি করতে, আপনাকে একটি 2D গ্রিডে ডেটার ঘনত্ব বা মান দেখাতে হবে। এটি করতে barChart বা rowChart ব্যবহার করা যেতে পারে, যেখানে color scaling এবং grid size কাস্টমাইজ করা হবে।
১. Heatmap তৈরি করার জন্য প্রয়োজনীয় লাইব্রেরি যুক্ত করা
প্রথমে 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">
২. ডেটাসেট তৈরি করা
Heatmap তৈরি করতে একটি 2D ডেটাসেট বা ম্যাট্রিক্স তৈরি করতে হবে। উদাহরণস্বরূপ:
const data = [
{ x: 0, y: 0, value: 30 },
{ x: 0, y: 1, value: 40 },
{ x: 0, y: 2, value: 50 },
{ x: 1, y: 0, value: 60 },
{ x: 1, y: 1, value: 70 },
{ x: 1, y: 2, value: 80 },
{ x: 2, y: 0, value: 90 },
{ x: 2, y: 1, value: 100 },
{ x: 2, y: 2, value: 110 }
];
এখানে, x এবং y এর মানের উপর ভিত্তি করে ডেটা ম্যাট্রিক্স তৈরি করা হয়েছে। value ডেটার মান যা Heatmap এ প্রদর্শিত হবে।
৩. Crossfilter এবং DC.js সেটআপ
ডেটাসেট লোড করা এবং Crossfilter ডাইমেনশন তৈরি করা:
const ndx = crossfilter(data);
// ডাইমেনশন তৈরি করা
const xDimension = ndx.dimension(d => d.x);
const yDimension = ndx.dimension(d => d.y);
// গ্রুপ তৈরি
const group = xDimension.group().reduceSum(d => d.value);
৪. Heatmap তৈরি করা
DC.js দিয়ে Heatmap তৈরি করার জন্য, আমরা barChart বা rowChart ব্যবহার করব এবং তার মধ্যে color scaling সেট করব।
উদাহরণ: Heatmap তৈরি করা
const heatmapChart = dc.barChart("#heatmap-chart");
heatmapChart
.width(600) // চার্টের প্রস্থ
.height(300) // চার্টের উচ্চতা
.dimension(xDimension) // x ডাইমেনশন
.group(group) // গ্রুপ
.x(d3.scaleBand()) // এক্স-অক্ষ স্কেল
.y(d3.scaleLinear()) // ওয়াই-অক্ষ স্কেল
.colorRange(["white", "blue", "green", "yellow", "red"]) // রঙ কাস্টমাইজেশন
.xUnits(dc.units.ordinal) // এক্স-অক্ষের ইউনিট
.on('renderlet', function(chart) {
chart.selectAll("rect")
.style("fill", function(d) {
return d.value > 100 ? "red" : d.value > 50 ? "yellow" : "green";
});
});
dc.renderAll();
এখানে, colorRange ব্যবহার করে বিভিন্ন মানের জন্য বিভিন্ন রঙ নির্ধারণ করা হয়েছে, এবং renderlet ইভেন্ট ব্যবহার করে rect গুলোর রঙ কাস্টমাইজ করা হয়েছে।
৫. বিকল্পভাবে RowChart ব্যবহার করা
আপনি rowChart ব্যবহার করে Heatmap তৈরি করতে পারেন যেখানে ডেটার ঘনত্ব বিভিন্ন রঙে প্রকাশিত হবে:
const heatmapRowChart = dc.rowChart("#heatmap-row-chart");
heatmapRowChart
.width(600)
.height(300)
.dimension(yDimension) // y ডাইমেনশন
.group(group)
.colorRange(["white", "blue", "green", "yellow", "red"]) // রঙ কাস্টমাইজেশন
.renderLabel(true);
dc.renderAll();
এখানে, rowChart ব্যবহার করে yDimension এর উপর ভিত্তি করে একটি Heatmap তৈরি করা হয়েছে।
৬. তথ্য দেখানো এবং ফলাফল
উপরের কোডে, DC.js এবং Crossfilter এর সাহায্যে Heatmap তৈরি করা হয়েছে, যা ভিজ্যুয়ালভাবে ডেটার ঘনত্ব বা মান দেখানোর জন্য রঙ পরিবর্তন করবে। আপনি যখন ডেটা এবং গ্রাফের রঙ কাস্টমাইজ করবেন, তখন একটি ইন্টারেক্টিভ Heatmap তৈরি হবে।
সারাংশ
- DC.js এবং D3.js ব্যবহার করে সহজে Heatmap তৈরি করা যায়।
- Crossfilter ডেটা ফিল্টারিং এবং গ্রুপিং ব্যবস্থাপনা সহজ করে তোলে।
- colorRange এবং color scaling ব্যবহার করে রঙ কাস্টমাইজ করা যায়।
- Heatmap তৈরি করতে barChart অথবা rowChart ব্যবহার করা যেতে পারে।
এই পদ্ধতিতে আপনি সহজে ডেটার ভিজ্যুয়াল উপস্থাপনা হিসাবে Heatmap তৈরি করতে পারবেন, যা ডেটার ঘনত্ব বা মানের উপর ভিত্তি করে বিভিন্ন রঙে প্রভাবিত হবে।
DC.js একটি শক্তিশালী ডেটা ভিজ্যুয়ালাইজেশন লাইব্রেরি যা D3.js এবং Crossfilter এর সাথে কাজ করে। Heatmap (হিটম্যাপ) একটি জনপ্রিয় চার্ট টাইপ যা গ্রাফিক্যালি ডেটার ঘনত্ব বা মানের পার্থক্য দেখাতে ব্যবহার করা হয়। Color Scale (রঙ স্কেল) ব্যবহৃত হয় ডেটার মান অনুযায়ী বিভিন্ন রঙের শেড প্রদর্শন করার জন্য। DC.js এর সাহায্যে আপনি সহজেই একটি কাস্টমাইজড হিটম্যাপ তৈরি করতে পারেন।
এখানে আমরা Color Scale ব্যবহার করে একটি Heatmap কাস্টমাইজ করার প্রক্রিয়া আলোচনা করব।
১. প্রাথমিক সেটআপ
প্রথমে, HTML ফাইলে DC.js, D3.js এবং Crossfilter এর সিডিএন লিংক যোগ করতে হবে। তারপর ডেটাসেট লোড করতে হবে এবং 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 Heatmap with Color Scale</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 with Color Scale</h1>
<div id="heatmap"></div>
<script>
// ডেটাসেট তৈরি
const data = [
{ x: 1, y: 1, value: 30 },
{ x: 1, y: 2, value: 60 },
{ x: 1, y: 3, value: 90 },
{ x: 2, y: 1, value: 20 },
{ x: 2, y: 2, value: 50 },
{ x: 2, y: 3, value: 80 },
{ x: 3, y: 1, value: 40 },
{ x: 3, y: 2, value: 70 },
{ 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 = xDimension.group().reduceSum(d => d.value);
</script>
</body>
</html>
এখানে, ডেটাসেট তৈরি করা হয়েছে যেখানে x এবং y মানের উপর ভিত্তি করে value নির্ধারিত হয়েছে।
২. Color Scale সেটআপ
Color Scale ব্যবহার করার মাধ্যমে আমরা হিটম্যাপের সেলগুলোর রঙ কাস্টমাইজ করব। DC.js এর মাধ্যমে D3.js এর scaleSequential() এবং interpolateViridis() ব্যবহার করে রঙের স্কেল তৈরি করা যায়।
// Color scale তৈরি
const colorScale = d3.scaleSequential(d3.interpolateViridis)
.domain([0, 100]); // সর্বনিম্ন এবং সর্বোচ্চ মান
এখানে interpolateViridis একটি জনপ্রিয় রঙ স্কেল, তবে আপনি interpolateInferno, interpolatePlasma বা অন্য যেকোনো D3.js রঙ স্কেলও ব্যবহার করতে পারেন।
৩. DC.js Heatmap চার্ট তৈরি
এখন আমরা DC.js এর heatmap টুল ব্যবহার করে একটি হিটম্যাপ তৈরি করব এবং সেটি Color Scale দিয়ে কাস্টমাইজ করব।
// DC.js Heatmap চার্ট তৈরি
const heatmap = dc.heatMap("#heatmap");
heatmap
.width(300) // চিত্রের প্রস্থ
.height(300) // চিত্রের উচ্চতা
.dimension(xDimension) // X-axis ডাইমেনশন
.group(valueGroup) // মানের গ্রুপ
.keyAccessor(d => d.key) // X-axis এর জন্য কীগুলি
.valueAccessor(d => d.value) // মানের অ্যাক্সেসর
.colorAccessor(d => d.value) // রঙের জন্য মান
.colors(colorScale) // Color scale ব্যবহার করা হচ্ছে
.renderLabel(true) // লেবেল প্রদর্শন
.label(function(d) { return `(${d.key}, ${d.value})`; }) // লেবেল কাস্টমাইজ
.renderTitle(true); // টাইটেল প্রদর্শন
গুরুত্বপূর্ণ প্যারামিটারগুলি:
- colorAccessor(d => d.value): এখানে মানের উপর ভিত্তি করে রঙ নির্ধারিত হয়।
- colors(colorScale): এখানে colorScale প্যারামিটারটি আমাদের তৈরি করা রঙ স্কেলকে হিটম্যাপে অ্যাপ্লাই করে।
- label: প্রতিটি সেলের লেবেল কাস্টমাইজ করা যায়।
৪. সম্পূর্ণ কোড উদাহরণ
<!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 with Color Scale</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 with Color Scale</h1>
<div id="heatmap"></div>
<script>
// ডেটাসেট তৈরি
const data = [
{ x: 1, y: 1, value: 30 },
{ x: 1, y: 2, value: 60 },
{ x: 1, y: 3, value: 90 },
{ x: 2, y: 1, value: 20 },
{ x: 2, y: 2, value: 50 },
{ x: 2, y: 3, value: 80 },
{ x: 3, y: 1, value: 40 },
{ x: 3, y: 2, value: 70 },
{ 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 = xDimension.group().reduceSum(d => d.value);
// Color scale তৈরি
const colorScale = d3.scaleSequential(d3.interpolateViridis)
.domain([0, 100]); // সর্বনিম্ন এবং সর্বোচ্চ মান
// DC.js Heatmap চার্ট তৈরি
const heatmap = dc.heatMap("#heatmap");
heatmap
.width(300) // চিত্রের প্রস্থ
.height(300) // চিত্রের উচ্চতা
.dimension(xDimension) // X-axis ডাইমেনশন
.group(valueGroup) // মানের গ্রুপ
.keyAccessor(d => d.key) // X-axis এর জন্য কীগুলি
.valueAccessor(d => d.value) // মানের অ্যাক্সেসর
.colorAccessor(d => d.value) // রঙের জন্য মান
.colors(colorScale) // Color scale ব্যবহার করা হচ্ছে
.renderLabel(true) // লেবেল প্রদর্শন
.label(function(d) { return `(${d.key}, ${d.value})`; }) // লেবেল কাস্টমাইজ
.renderTitle(true); // টাইটেল প্রদর্শন
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- Color Scale: DC.js তে color scale ব্যবহার করে হিটম্যাপের সেলগুলোর রঙ কাস্টমাইজ করা হয়। D3.js এর scaleSequential() এবং interpolateViridis() ব্যবহার করা হয়েছে।
- Heatmap: DC.js এর হিটম্যাপ টুলে keyAccessor এবং valueAccessor ব্যবহার করে X এবং Y অক্ষের জন্য ডেটা অ্যাক্সেস করা হয়।
- Label & Title: হিটম্যাপের প্রতিটি সেলে লেবেল এবং টাইটেল কাস্টমাইজ করা হয়, যা আরও স্পষ্ট ডেটা প্রদর্শন করতে সহায়ক।
এই পদ্ধতিতে আপনি DC.js এর সাহায্যে Color Scale ব্যবহার করে একটি কাস্টমাইজড Heatmap তৈরি করতে পারবেন।
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: ফিল্টার করার সময় চার্ট এবং টেবিল দুটোই স্বয়ংক্রিয়ভাবে আপডেট হয়।
এটি একটি শক্তিশালী পদ্ধতি যেখানে আপনি ডেটা ভিজ্যুয়ালাইজেশন এবং ডেটা বিশ্লেষণ একই সময়ে করতে পারেন।
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
