DC.js দিয়ে Time Series Data ভিজ্যুয়ালাইজ করা খুবই সহজ এবং শক্তিশালী। Time Series Data সাধারণত সময় (date, time) অনুসারে সংগৃহীত ডেটা, যেমন মাসিক বিক্রয়, তাপমাত্রা পরিবর্তন, স্টক মার্কেটের ডেটা ইত্যাদি। DC.js ব্যবহার করে আমরা Line Chart এবং Bar Chart এ Time Series Data ভিজ্যুয়ালাইজ করতে পারি।
ধাপ ১: Time Series Data তৈরি করা
Time Series Data সাধারণত date অথবা timestamp সহ থাকে। একটি উদাহরণ ডেটাসেট:
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: 90 },
{ date: "2023-05-01", value: 110 }
];
এখানে, প্রতি মাসের প্রথম দিনে একটি value উল্লেখ করা হয়েছে।
২. Crossfilter সেটআপ
Crossfilter ব্যবহার করে আমরা ডেটা ফিল্টার এবং গ্রুপ করতে পারি। এখানে আমরা date দিয়ে ডাইমেনশন তৈরি করব এবং value এর উপর গ্রুপিং করব:
const ndx = crossfilter(data);
const dateDimension = ndx.dimension(d => d.date);
const valueGroup = dateDimension.group().reduceSum(d => d.value);
৩. Line Chart এ Time Series ভিজ্যুয়ালাইজ করা
Line Chart Time Series Data ভিজ্যুয়ালাইজেশনের জন্য আদর্শ। এটি সময়ের সাথে সাথে ডেটার প্রবণতা দেখানোর জন্য ব্যবহার করা হয়।
Line Chart তৈরি করা:
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime()) // X-axis টাইম স্কেল
.xUnits(d3.timeMonths) // এক্স-অক্ষের জন্য মাস হিসেবে ইউনিট
.yAxisLabel("Value")
.xAxisLabel("Date")
.render();
এখানে:
d3.scaleTime()টাইম স্কেল ব্যবহার করে X-অক্ষ তৈরি হচ্ছে।d3.timeMonthsএক্স-অক্ষে মাসের ইউনিট ব্যবহার করছে।
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 Line Chart</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 Line Chart for Time Series Data</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: 90 },
{ date: "2023-05-01", value: 110 }
];
const ndx = crossfilter(data);
const dateDimension = ndx.dimension(d => d.date);
const valueGroup = dateDimension.group().reduceSum(d => d.value);
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime())
.xUnits(d3.timeMonths)
.yAxisLabel("Value")
.xAxisLabel("Date");
dc.renderAll();
</script>
</body>
</html>
৪. Bar Chart এ Time Series ভিজ্যুয়ালাইজ করা
Bar Chart Time Series Data দেখানোর জন্য খুবই কার্যকরী, কারণ এটি ডেটাকে সোজাসুজি (vertical) বার হিসেবে প্রদর্শন করে। এটি বিশেষভাবে ডেটার পরিমাণের তুলনা করতে ব্যবহৃত হয়।
Bar Chart তৈরি করা:
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime()) // X-axis টাইম স্কেল
.xUnits(d3.timeMonths) // এক্স-অক্ষে মাস হিসেবে ইউনিট
.yAxisLabel("Value")
.xAxisLabel("Date")
.render();
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 Bar Chart</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 Bar Chart for Time Series Data</h1>
<div id="bar-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: 90 },
{ date: "2023-05-01", value: 110 }
];
const ndx = crossfilter(data);
const dateDimension = ndx.dimension(d => d.date);
const valueGroup = dateDimension.group().reduceSum(d => d.value);
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime())
.xUnits(d3.timeMonths)
.yAxisLabel("Value")
.xAxisLabel("Date");
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- Line Chart: Time Series Data ভিজ্যুয়ালাইজ করার জন্য
lineChart()ব্যবহার করা হয়। এটি সময়ের সাথে ডেটার প্রবণতা দেখায় এবং X-অক্ষে টাইম স্কেল ব্যবহার করা হয়। - Bar Chart: Time Series Data এর জন্য
barChart()ব্যবহার করা হয়, যা ডেটার পরিমাণের তুলনা করে এবং X-অক্ষে টাইম স্কেল ব্যবহার করে।
এইভাবে, DC.js ব্যবহার করে Time Series Data খুব সহজে ভিজ্যুয়ালাইজ করা যায় এবং আপনি lineChart() এবং barChart() ব্যবহার করে ডেটার ট্রেন্ড এবং তুলনা দেখাতে পারেন।
Read more
