DC.js এ Time Scale এবং Axes কনফিগারেশন ব্যবহার করে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করা খুবই গুরুত্বপূর্ণ, বিশেষ করে যদি আপনার ডেটাসেট টাইম সিরিজ ডেটা থাকে। টাইম স্কেল এবং এক্স এবং ওয়াই অক্ষের কনফিগারেশন দ্বারা আপনি ডেটার সঠিক উপস্থাপন এবং বিশ্লেষণ নিশ্চিত করতে পারেন।
DC.js-এর সাথে D3.js ব্যবহার করে টাইম স্কেল (time scale) এবং অক্ষ কনফিগারেশন সহজেই কাস্টমাইজ করা যেতে পারে। টাইম স্কেল সাধারণত Date বা Time ডেটার জন্য ব্যবহৃত হয়।
১. Time Scale কনফিগারেশন
Time Scale টাইম সিরিজ ডেটার জন্য একটি এক্স-অক্ষ (X-Axis) তৈরি করতে ব্যবহৃত হয়। D3.js-এ d3.scaleTime() টাইম স্কেল তৈরির জন্য ব্যবহৃত হয়, যা সময় সম্পর্কিত ডেটার উপর ভিত্তি করে এক্স-অক্ষ তৈরি করে।
Time Scale কনফিগারেশন উদাহরণ:
- ডেটাসেট তৈরি:
const data = [
{ date: "2023-01-01", value: 30 },
{ date: "2023-02-01", value: 50 },
{ date: "2023-03-01", value: 70 },
{ date: "2023-04-01", value: 40 },
{ date: "2023-05-01", value: 60 }
];
- Crossfilter ইন্ডেক্স এবং ডাইমেনশন তৈরি:
const ndx = crossfilter(data);
const dateDimension = ndx.dimension(d => new Date(d.date));
const valueGroup = dateDimension.group().reduceSum(d => d.value);
- Time Scale কনফিগারেশন এবং Line Chart তৈরি:
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(800)
.height(400)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-05-01")])) // Time scale configuration
.xUnits(d3.timeMonths) // Monthly ticks on X-Axis
.xAxisLabel("Date") // X-Axis label
.yAxisLabel("Value") // Y-Axis label
.elasticY(true) // Elastic Y-Axis
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true);
dc.renderAll();
ব্যাখ্যা:
d3.scaleTime().domain([...]): এটি time scale তৈরি করার জন্য ব্যবহৃত হয়, যেখানেdomain()ফাংশনটি টাইমের রেঞ্জ নির্ধারণ করে।xUnits(d3.timeMonths): এটি এক্স-অক্ষের জন্য মাসের ইউনিট ব্যবহার করে।elasticY(true): Y-অক্ষের জন্য স্বয়ংক্রিয় স্কেলিং সক্রিয় করে, যাতে ডেটার পরিমাণ অনুযায়ী Y-অক্ষটি পরিবর্তিত হয়।
২. Axes কনফিগারেশন
DC.js চার্টে Axes (অক্ষ) কনফিগারেশন কাস্টমাইজ করার জন্য, আপনি D3.js এর axis() এবং scale() ফাংশন ব্যবহার করতে পারেন। সাধারণত, X-Axis এবং Y-Axis দুটি অক্ষ কনফিগার করতে হয়।
১. X-Axis কনফিগারেশন
- X-Axis সাধারণত টাইম সিরিজ ডেটার জন্য time scale ব্যবহার করা হয়।
- টাইম স্কেল তৈরি করার পর, আপনি
xAxis()ফাংশন ব্যবহার করে কাস্টমাইজ করতে পারেন।
২. Y-Axis কনফিগারেশন
- Y-Axis সাধারণত কাস্টম স্কেল (যেমন
scaleLinear) দ্বারা কনফিগার করা হয়, যা ডেটার পরিমাণ (value) প্রদর্শন করে।
উদাহরণ:
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(800)
.height(400)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-05-01")])) // Time scale configuration
.xUnits(d3.timeMonths)
.xAxisLabel("Date")
.yAxisLabel("Value")
.elasticY(true)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.xAxis()
.ticks(d3.timeMonth) // Custom ticks for X-Axis
.tickFormat(d3.timeFormat("%b %d, %Y")) // Date format for ticks
.yAxis()
.ticks(5); // Set number of ticks on Y-Axis
dc.renderAll();
কাস্টম এক্স এবং ওয়াই অক্ষ কনফিগারেশন:
- X-Axis:
ticks(d3.timeMonth): এক্স-অক্ষের জন্য মাসের ভিত্তিতে টিক তৈরি করা।tickFormat(d3.timeFormat("%b %d, %Y")): এক্স-অক্ষের জন্য সময়ের ফরম্যাট কাস্টমাইজ করা (যেমন মাস, দিন এবং বছর)।
- Y-Axis:
ticks(5): Y-অক্ষের জন্য ৫টি টিক মার্ক তৈরি করা।
৩. সম্পূর্ণ উদাহরণ: Time Scale এবং Axes কনফিগারেশন
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Time Scale and Axes Configuration</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.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 Time Scale and Axes Configuration</h1>
<div id="line-chart"></div>
<script>
const data = [
{ date: "2023-01-01", value: 30 },
{ date: "2023-02-01", value: 50 },
{ date: "2023-03-01", value: 70 },
{ date: "2023-04-01", value: 40 },
{ date: "2023-05-01", value: 60 }
];
const ndx = crossfilter(data);
const dateDimension = ndx.dimension(d => new Date(d.date));
const valueGroup = dateDimension.group().reduceSum(d => d.value);
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(800)
.height(400)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-05-01")])) // Time scale configuration
.xUnits(d3.timeMonths)
.xAxisLabel("Date")
.yAxisLabel("Value")
.elasticY(true)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.xAxis()
.ticks(d3.timeMonth) // Custom ticks for X-Axis
.tickFormat(d3.timeFormat("%b %d, %Y")) // Date format for ticks
.yAxis()
.ticks(5); // Set number of ticks on Y-Axis
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- Time Scale কনফিগারেশন:
d3.scaleTime()ব্যবহার করে টাইম সিরিজ ডেটার জন্য এক্স-অক্ষ তৈরি করা হয়। - X-Axis কনফিগারেশন:
ticks(d3.timeMonth)এবংtickFormat(d3.timeFormat(...))ব্যবহার করে এক্স-অক্ষের জন্য কাস্টম টিক এবং সময় ফরম্যাট যোগ করা হয়। - Y-Axis কনফিগারেশন:
ticks()ব্যবহার করে Y-অক্ষের জন্য টিক মার্ক কাস্টমাইজ করা হয়।
এই কনফিগারেশনগুলো ব্যবহার করে আপনি DC.js চার্টে টাইম স্কেল এবং এক্স এবং ওয়াই অক্ষ কাস্টমাইজ করতে পারবেন এবং ডেটার আরো স্পষ্ট উপস্থাপনা পাবেন।
Content added By
Read more
