DC.js একটি শক্তিশালী লাইব্রেরি যা D3.js এর উপর ভিত্তি করে তৈরি এবং ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহার করা হয়। Line Chart DC.js এর অন্যতম জনপ্রিয় চার্ট টাইপ, এবং আপনি এটি ব্যবহার করে ডেটার ট্রেন্ড এবং প্যাটার্ন বিশ্লেষণ করতে পারেন। এখানে আমরা Line Chart এ Zoom এবং Pan ফিচার ইন্টিগ্রেট করার পদ্ধতি দেখাব।
Zoom এবং Pan ফিচার গুলি ব্যবহারকারীদের চার্টে একটি নির্দিষ্ট অংশে ফোকাস করতে সাহায্য করে এবং এটি ইন্টারেক্টিভ ভিজ্যুয়ালাইজেশন তৈরি করে।
১. প্রয়োজনীয় লাইব্রেরি যোগ করা
DC.js এবং D3.js এর সিডিএন লিঙ্ক HTML ফাইলে যুক্ত করুন:
<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">
২. ডেটাসেট তৈরি এবং Crossfilter ইন্ডেক্স
const data = [
{ date: "2023-01-01", value: 30 },
{ date: "2023-01-02", value: 50 },
{ date: "2023-01-03", value: 70 },
{ date: "2023-01-04", value: 20 },
{ date: "2023-01-05", value: 60 },
{ date: "2023-01-06", value: 90 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
এখানে একটি সাধারণ ডেটাসেট তৈরি করা হয়েছে, যার মধ্যে date এবং value রয়েছে। Crossfilter ব্যবহার করে আমরা ডেটা ইন্ডেক্স করেছি।
৩. ডাইমেনশন এবং গ্রুপ তৈরি
// তারিখের উপর ডাইমেনশন তৈরি
const dateDimension = ndx.dimension(d => d.date);
// তারিখের উপর গ্রুপ তৈরি এবং value এর যোগফল বের করা
const dateGroup = dateDimension.group().reduceSum(d => d.value);
এখানে, dateDimension তৈরি করা হয়েছে যাতে ডেটা তারিখ অনুযায়ী ফিল্টার এবং বিশ্লেষণ করা যায়। পরে, dateGroup এ value এর যোগফল বের করা হয়েছে।
৪. DC.js Line Chart তৈরি
এখন DC.js ব্যবহার করে একটি Line Chart তৈরি করা হবে এবং এতে Zoom এবং Pan ফিচার ইন্টিগ্রেট করা হবে।
// DC.js Line Chart তৈরি
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(800)
.height(400)
.dimension(dateDimension) // ডাইমেনশন
.group(dateGroup) // গ্রুপ
.x(d3.scaleTime()) // এক্স-অক্ষ স্কেল (টাইম)
.xUnits(d3.timeDays) // দিন অনুযায়ী এক্স-অক্ষ ইউনিট
.xAxisLabel("Date") // এক্স-অক্ষের লেবেল
.yAxisLabel("Value") // ওয়াই-অক্ষের লেবেল
.brushOn(true) // ব্রাশ অন করা, যা Zoom/Pan সাপোর্ট করবে
.elasticY(true) // ওয়াই-অক্ষের স্কেল এলাস্টিক (ডায়নামিক)
.renderHorizontalGridLines(true) // গ্রিড লাইন যোগ করা
.renderVerticalGridLines(true); // ভার্টিকাল গ্রিড লাইন যোগ করা
// DC.js দ্বারা সমস্ত চার্ট রেন্ডার
dc.renderAll();
এখানে Line Chart তৈরি করা হয়েছে এবং Zoom ও Pan ফিচার ইন্টিগ্রেট করা হয়েছে। brushOn(true) ফিচার ব্যবহার করা হয়েছে, যা Zoom এবং Pan সাপোর্ট করে।
৫. Zoom এবং Pan এর কাস্টমাইজেশন
DC.js দ্বারা Line Chart এ Zoom এবং Pan কাস্টমাইজ করা যায়। কিছু কাস্টমাইজেশন উদাহরণ:
১. এক্স-অক্ষের জন্য Zoom:
lineChart
.x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-01-06")])) // এক্স-অক্ষের রেঞ্জ নির্ধারণ
.xUnits(d3.timeDays); // এক্স-অক্ষের ইউনিট সেট করা
২. প্যানিং অপশন:
lineChart
.brushOn(true) // প্যানিং সক্ষম
.on('zoom', function(event) {
console.log("Zooming Event", event); // Zoom ইভেন্টে কাস্টম লজিক প্রয়োগ করা
});
৩. কাস্টম স্কেল এবং ব্রাশ:
lineChart
.x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-01-06")])) // এক্স-অক্ষের রেঞ্জ নির্ধারণ
.elasticY(true); // ওয়াই-অক্ষের এলাস্টিক স্কেল
৬. পূর্ণ কোড উদাহরণ
<!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 with Zoom and Pan</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 with Zoom and Pan</h1>
<div id="line-chart"></div>
<script>
const data = [
{ date: "2023-01-01", value: 30 },
{ date: "2023-01-02", value: 50 },
{ date: "2023-01-03", value: 70 },
{ date: "2023-01-04", value: 20 },
{ date: "2023-01-05", value: 60 },
{ date: "2023-01-06", value: 90 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// তারিখের উপর ডাইমেনশন তৈরি
const dateDimension = ndx.dimension(d => d.date);
// তারিখের উপর গ্রুপ তৈরি এবং value এর যোগফল বের করা
const dateGroup = dateDimension.group().reduceSum(d => d.value);
// DC.js Line Chart তৈরি
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(800)
.height(400)
.dimension(dateDimension)
.group(dateGroup)
.x(d3.scaleTime())
.xUnits(d3.timeDays)
.xAxisLabel("Date")
.yAxisLabel("Value")
.brushOn(true)
.elasticY(true)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true);
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- Zoom এবং Pan ফিচার DC.js এর Line Chart এ ইন্টিগ্রেট করা হয়েছে।
- brushOn(true) ব্যবহার করে Zoom এবং Pan কার্যকর করা হয়।
- elasticY(true) ওয়াই-অক্ষের স্কেলকে ডাইনামিক করে, যাতে ভিন্ন ভিন্ন স্কেল অনুযায়ী ডেটা দেখা যায়।
- D3.js এর টাইম স্কেল ব্যবহার করে এক্স-অক্ষের জন্য Zoom সেট করা হয়েছে।
এই পদ্ধতিতে আপনি সহজেই Line Chart এর সাথে Zoom এবং Pan ফিচার ইন্টিগ্রেট করে ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারবেন।
Read more
