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 তৈরি করতে পারবেন।
Read more
