DC.js একটি শক্তিশালী লাইব্রেরি, যা D3.js এবং Crossfilter এর উপর ভিত্তি করে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করে। Time Series Data বা সময়ভিত্তিক ডেটার সাথে কাজ করার জন্য DC.js অত্যন্ত কার্যকর, বিশেষ করে যখন ডেটার পরিবর্তন এবং প্রবণতা নিরীক্ষণ করতে হয়।
Time Series Data এর সাথে কাজ করার জন্য Line Chart বা Scatter Plot সহ বিভিন্ন ধরনের গ্রাফ ব্যবহার করা যেতে পারে। এখানে Time Series Data নিয়ে কাজ করার জন্য একটি উদাহরণ দেওয়া হয়েছে, যেখানে DC.js ব্যবহার করে Time Series ডেটার উপর একটি Line Chart তৈরি করা হবে।
১. Time Series Data প্রস্তুত
Time Series Data হল এমন ডেটা, যেখানে প্রতিটি রেকর্ডের সাথে একটি নির্দিষ্ট সময় বা তারিখ যুক্ত থাকে। উদাহরণস্বরূপ, আপনার কাছে যদি কোনও কোম্পানির শেয়ারের দাম প্রতি দিন পরিবর্তিত হয়, তাহলে এটি একটি টাইম সিরিজ ডেটা হবে।
উদাহরণ Time Series Data
const data = [
{ date: "2023-12-01", value: 30 },
{ date: "2023-12-02", value: 45 },
{ date: "2023-12-03", value: 50 },
{ date: "2023-12-04", value: 70 },
{ date: "2023-12-05", value: 65 },
{ date: "2023-12-06", value: 90 }
];
এখানে, প্রতিটি রেকর্ডে date এবং value রয়েছে। date এর মাধ্যমে আমরা সময়ের সাথে ডেটার পরিবর্তন ট্র্যাক করব এবং value দিয়ে আমরা সেই সময়ের মান দেখাবো।
২. Crossfilter দিয়ে ডেটা ইন্ডেক্স করা
Time Series Data ব্যবহারের জন্য Crossfilter দিয়ে ডেটা ইন্ডেক্স করতে হবে। date এবং value এর ওপর ভিত্তি করে ডাইমেনশন তৈরি করা হবে।
const ndx = crossfilter(data);
const dateDimension = ndx.dimension(d => new Date(d.date)); // Date dimension
const valueGroup = dateDimension.group().reduceSum(d => d.value); // Value group
এখানে, dateDimension তৈরি করা হয়েছে যেখানে ডেটার তারিখ (date) অনুসারে ডাইমেনশন তৈরি হয়েছে এবং valueGroup দিয়ে তার মানের (value) যোগফল বের করা হচ্ছে।
৩. Line Chart তৈরি করা
Time Series Data প্রদর্শন করার জন্য Line Chart সবচেয়ে উপযুক্ত চার্ট। DC.js এর lineChart ব্যবহার করে Time Series Data এর উপর একটি লাইন চার্ট তৈরি করা হবে।
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600) // চার্টের প্রস্থ
.height(300) // চার্টের উচ্চতা
.dimension(dateDimension) // ডাইমেনশন সেটআপ
.group(valueGroup) // গ্রুপ সেটআপ
.x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-06")])) // এক্স-অক্ষের জন্য সময় ভিত্তিক স্কেল
.xAxisLabel("Date") // এক্স-অক্ষের লেবেল
.yAxisLabel("Value") // ওয়াই-অক্ষের লেবেল
.elasticY(true) // Y অক্ষের স্কেল স্বয়ংক্রিয়ভাবে সামঞ্জস্য হবে
.renderArea(true) // চার্টের নিচে আংশিক পূর্ণতা দেখাবে
.on("filtered", function() {
console.log("Chart filtered");
});
এখানে:
d3.scaleTime()ব্যবহার করে এক্স-অক্ষের জন্য সময় ভিত্তিক স্কেল তৈরি করা হয়েছে।elasticY(true)দিয়ে Y অক্ষের স্কেল স্বয়ংক্রিয়ভাবে সামঞ্জস্য হচ্ছে।
৪. চার্ট রেন্ডার করা
ডেটা লোড এবং কাস্টমাইজেশনের পরে, dc.renderAll() ব্যবহার করে সমস্ত চার্ট রেন্ডার করতে হবে।
dc.renderAll();
এটি সমস্ত 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 Time Series 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 Time Series Chart</h1>
<!-- Time Series Line Chart -->
<div id="line-chart"></div>
<script>
// Time Series Data
const data = [
{ date: "2023-12-01", value: 30 },
{ date: "2023-12-02", value: 45 },
{ date: "2023-12-03", value: 50 },
{ date: "2023-12-04", value: 70 },
{ date: "2023-12-05", value: 65 },
{ date: "2023-12-06", value: 90 }
];
// Crossfilter Indexing
const ndx = crossfilter(data);
const dateDimension = ndx.dimension(d => new Date(d.date));
const valueGroup = dateDimension.group().reduceSum(d => d.value);
// Line Chart Setup
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-06")]))
.xAxisLabel("Date")
.yAxisLabel("Value")
.elasticY(true)
.renderArea(true);
// Render the chart
dc.renderAll();
</script>
</body>
</html>
৬. Time Series Data কাস্টমাইজেশন
Time Series ডেটার জন্য আরও কাস্টমাইজেশন করা যেতে পারে, যেমন:
- Date Format:
d3.timeFormat()ব্যবহার করে তারিখের ফরম্যাট কাস্টমাইজ করা। - Tooltip:
tooltip()ব্যবহার করে ডেটা পয়েন্টের উপর টুলটিপ দেখানো। - Zooming and Panning: D3.js ব্যবহার করে চার্টে জুম এবং প্যান ফিচার যোগ করা।
lineChart
.x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-06")]))
.xAxisLabel("Date")
.yAxisLabel("Value")
.elasticY(true)
.renderArea(true)
.on("renderlet", function(chart) {
chart.selectAll("g.x text")
.style("text-anchor", "middle")
.style("font-size", "12px")
.style("fill", "blue");
});
সারাংশ
- DC.js Time Series Data এর জন্য Line Chart তৈরি করতে খুবই কার্যকর।
- Crossfilter এর মাধ্যমে ডেটা ফিল্টার এবং গ্রুপিং করা হয়।
- D3.js এর সাহায্যে সময় ভিত্তিক স্কেল এবং অন্যান্য কাস্টমাইজেশন করা হয়।
renderArea(true)এবংelasticY(true)ফিচার ব্যবহার করে আরও উন্নত ভিজ্যুয়ালাইজেশন তৈরি করা যায়।
এই পদ্ধতিতে আপনি Time Series Data এর উপর ভিত্তি করে একটি ডাইনামিক এবং ইন্টারেক্টিভ চার্ট তৈরি করতে পারবেন।
Read more
