DC.js দিয়ে Custom Axis এবং Color Scale যোগ করা একটি শক্তিশালী ফিচার, যা ডেটাকে আরও কাস্টমাইজড ও স্পষ্টভাবে উপস্থাপন করতে সাহায্য করে। এখানে আমরা DC.js দিয়ে কিভাবে কাস্টম এক্স-অক্ষ এবং রঙের স্কেল যোগ করা যায়, তা বিস্তারিতভাবে দেখবো।
১. Custom Axis (কাস্টম এক্স-অক্ষ) যোগ করা
DC.js ডিফল্টভাবে এক্স-অক্ষ এবং ওয়াই-অক্ষের লেবেল ও স্কেল সরবরাহ করে, তবে আপনি কাস্টম এক্স-অক্ষ বা ওয়াই-অক্ষ ব্যবহার করতে চাইলে, আপনাকে D3.js এর স্কেল এবং axis ফাংশন ব্যবহার করতে হবে।
২. Color Scale (রঙের স্কেল) যোগ করা
Color Scale ডেটার বিভিন্ন ভ্যালু বা ক্যাটেগরি অনুযায়ী বিভিন্ন রঙ দিয়ে ডেটাকে আলাদা করার জন্য ব্যবহৃত হয়। D3.js এর scaleOrdinal অথবা scaleLinear ফাংশন ব্যবহার করে রঙের স্কেল তৈরি করা যেতে পারে।
DC.js দিয়ে Custom Axis এবং Color Scale যোগ করার উদাহরণ
এখানে আমরা একটি Bar Chart তৈরি করবো, যেখানে কাস্টম এক্স-অক্ষ এবং রঙের স্কেল যোগ করা হবে।
৩. HTML এবং JavaScript কোড
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Custom Axis and 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 Custom Axis and Color Scale</h1>
<div id="bar-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 80 },
{ category: "C", value: 45 },
{ category: "D", value: 60 },
{ category: "E", value: 20 },
{ category: "F", value: 90 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// ক্যাটেগরি এর উপর ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
// ক্যাটেগরি অনুযায়ী গ্রুপ তৈরি
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// DC.js বার চার্ট
const barChart = dc.barChart("#bar-chart");
// রঙের স্কেল তৈরি (D3.js এর scaleOrdinal ব্যবহার)
const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
// কাস্টম এক্স-অক্ষ তৈরি
const xAxis = d3.axisBottom().scale(d3.scaleBand()).padding(0.1);
// বার চার্ট কনফিগারেশন
barChart
.width(600) // চার্টের প্রস্থ
.height(300) // চার্টের উচ্চতা
.dimension(categoryDimension) // ডাইমেনশন নির্ধারণ
.group(categoryGroup) // গ্রুপ নির্ধারণ
.x(d3.scaleBand()) // এক্স-অক্ষের স্কেল
.xUnits(dc.units.ordinal) // ডিসক্রিট ডেটার জন্য
.xAxisLabel("Categories") // এক্স-অক্ষের কাস্টম লেবেল
.yAxisLabel("Values") // ওয়াই-অক্ষের কাস্টম লেবেল
.renderHorizontalGridLines(true) // গ্রিড লাইন যোগ করা
.colors(colorScale) // রঙের স্কেল যোগ করা
.colorAccessor(d => d.key) // রঙের অ্যাক্সেসর
.on("pretransition", function(chart) {
// কাস্টম এক্স-অক্ষ সেলফ-ড্র করার জন্য
chart.select("g.x").call(xAxis);
});
// চার্ট রেন্ডার
dc.renderAll();
</script>
</body>
</html>
৪. কোডের ব্যাখ্যা
১. ডেটাসেট এবং Crossfilter সেটআপ:
এখানে একটি ডেটাসেট তৈরি করা হয়েছে, যেখানে category এবং value এর মান দেওয়া হয়েছে। Crossfilter ব্যবহার করে এই ডেটাকে ইন্ডেক্স করা হয়েছে।
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 80 },
{ category: "C", value: 45 },
{ category: "D", value: 60 },
{ category: "E", value: 20 },
{ category: "F", value: 90 }
];
const ndx = crossfilter(data);
const categoryDimension = ndx.dimension(d => d.category);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
২. কাস্টম এক্স-অক্ষ (Custom Axis):
ডিফল্ট এক্স-অক্ষের পরিবর্তে একটি কাস্টম এক্স-অক্ষ তৈরি করা হয়েছে। এখানে d3.axisBottom() ব্যবহার করা হয়েছে কাস্টম এক্স-অক্ষ তৈরির জন্য, এবং এই এক্স-অক্ষকে বার চার্টে প্রয়োগ করা হয়েছে।
const xAxis = d3.axisBottom().scale(d3.scaleBand()).padding(0.1);
৩. রঙের স্কেল (Color Scale):
DC.js-এ colors() ফাংশন ব্যবহার করে আমরা একটি color scale যোগ করেছি, যা D3.js এর scaleOrdinal() ফাংশন ব্যবহার করে তৈরি করা হয়েছে। এখানে d3.schemeCategory10 রঙের স্কিম ব্যবহৃত হয়েছে।
const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
৪. বার চার্ট কনফিগারেশন:
DC.js এর barChart() ফাংশন ব্যবহার করে বার চার্ট কনফিগার করা হয়েছে। এখানে কাস্টম এক্স-অক্ষ এবং রঙের স্কেল যোগ করা হয়েছে, এবং on("pretransition") ইভেন্ট ব্যবহার করে কাস্টম এক্স-অক্ষ সেলফ-ড্র করা হয়েছে।
barChart
.colors(colorScale)
.colorAccessor(d => d.key)
.on("pretransition", function(chart) {
chart.select("g.x").call(xAxis);
});
৫. dc.renderAll() দিয়ে চার্ট রেন্ডার করা:
সবশেষে, dc.renderAll() ফাংশনটি ব্যবহার করা হয়েছে যাতে সমস্ত চার্ট রেন্ডার হয়।
dc.renderAll();
৫. সারাংশ
- Custom Axis: DC.js এবং D3.js ব্যবহার করে কাস্টম এক্স-অক্ষ তৈরি করা হয়েছে, যা গ্রিড লাইন এবং লেবেল কাস্টমাইজ করার জন্য কার্যকর।
- Color Scale: D3.js এর
scaleOrdinal()ব্যবহার করে বার চার্টে রঙের স্কেল যোগ করা হয়েছে, যা বিভিন্ন ক্যাটেগরি অনুযায়ী বারগুলোর রঙ পরিবর্তন করে। - Legends: DC.js এর লিজেন্ড ফিচার ব্যবহার করে চার্টের পাশে একটি বর্ণনা যোগ করা হয়েছে, যা রঙ এবং ক্যাটেগরি সম্পর্কিত।
এই কাস্টম এক্স-অক্ষ এবং রঙের স্কেল ব্যবহার করে আপনি DC.js এর মাধ্যমে আরও কাস্টমাইজড এবং ইন্টারঅ্যাকটিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারবেন।
Read more
