DC.js একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা D3.js এবং Crossfilter এর উপর ভিত্তি করে তৈরি। এটি ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরির জন্য ব্যবহৃত হয়, যেখানে ডেটা চেঞ্জ এবং অ্যানিমেশন সিঙ্ক্রোনাইজেশন একটি গুরুত্বপূর্ণ ফিচার। যখন ডেটা পরিবর্তন হয়, তখন ভিজ্যুয়ালাইজেশনও তা সঠিকভাবে রিফ্লেক্ট করে। DC.js এর মাধ্যমে আপনি এই ডেটা পরিবর্তনের সাথে সাথে অ্যানিমেশন সমন্বয় করতে পারেন, যাতে ব্যবহারকারীরা ডেটা পরিবর্তন দেখতে পান।
এখানে DC.js তে Data Change এবং Animation Synchronization এর সাথে কাজ করার পদ্ধতি আলোচনা করা হবে।
১. ডেটা চেঞ্জ এবং অ্যানিমেশন
DC.js-এ ডেটা পরিবর্তন হলে Crossfilter দ্বারা ফিল্টার করা ডেটা পুনরায় রেন্ডার হয় এবং অ্যানিমেশন সিঙ্ক্রোনাইজেশন ঘটে। অ্যানিমেশন সাধারণত D3.js এর transition() ফাংশনের মাধ্যমে সম্পাদিত হয়, যা গ্রাফিক্যাল উপাদানগুলোর মধ্যে মসৃণ পরিবর্তন নিয়ে আসে।
২. Data Change এর সাথে Animation Synchronization
DC.js এর সাথে অ্যানিমেশন সিঙ্ক্রোনাইজেশন করার জন্য, আমরা transition() ব্যবহার করতে পারি, যা ডেটা পরিবর্তনের সাথে ভিজ্যুয়াল উপাদানগুলোর মসৃণ অ্যানিমেশন তৈরি করে।
৩. উদাহরণ: DC.js-এ Data Change এবং Animation Synchronization
এই উদাহরণে, আমরা একটি 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 Animation Synchronization</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 Data Change and Animation Synchronization</h1>
<div id="bar-chart"></div>
<button id="filter-btn">Filter Data</button>
<script>
// ডেটাসেট তৈরি
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 40 },
{ category: "E", value: 60 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
const group = categoryDimension.group().reduceSum(d => d.value);
// DC.js বার চার্ট তৈরি
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(categoryDimension)
.group(group)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.renderHorizontalGridLines(true)
.on("renderlet", function(chart) {
chart.selectAll("rect")
.transition() // Transition applied here
.duration(1000) // Animation duration
.attr("fill", "orange") // Color change during animation
.attr("y", function(d) { return chart.y(d.value); })
.attr("height", function(d) { return chart.height() - chart.y(d.value); });
});
dc.renderAll();
// ফিল্টারিং বোতামের মাধ্যমে ডেটা পরিবর্তন
document.getElementById("filter-btn").addEventListener("click", function() {
// ক্যাটেগরি "A" ফিল্টার করা
categoryDimension.filter("A");
// রেন্ডার করা
dc.redrawAll(); // redrawAll will trigger the animation
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- ডেটাসেট: একটি সাধারণ ডেটাসেট তৈরি করা হয়েছে যার মধ্যে
categoryএবংvalueরয়েছে। - Crossfilter সেটআপ: ডেটাসেটের উপর dimension এবং group তৈরি করা হয়েছে।
- Bar Chart তৈরি: DC.js ব্যবহার করে একটি বার চার্ট তৈরি করা হয়েছে, যেখানে renderlet ইভেন্ট ব্যবহার করা হয়েছে। এই ইভেন্টটি যখন চার্ট রেন্ডার হয়, তখন transition() ব্যবহার করে অ্যানিমেশন সম্পন্ন করা হয়।
- Button Event: একটি বোতাম ক্লিক করলে filter() ফাংশন ব্যবহার করে ক্যাটেগরি "A" এর ডেটা ফিল্টার করা হয়। তারপর dc.redrawAll() ফাংশন ব্যবহার করে সমস্ত চার্ট রিফ্রেশ করা হয়, যাতে ডেটা পরিবর্তন হয় এবং অ্যানিমেশন রেন্ডার হয়।
৪. DC.js এ Animation Synchronization এর সুবিধা
- ইন্টারেক্টিভ ভিজ্যুয়ালাইজেশন: ডেটা পরিবর্তন হলে ব্যবহারকারীরা সরাসরি অ্যানিমেশন দেখতে পারেন, যা তাদের আরও ইন্টারেক্টিভ অভিজ্ঞতা প্রদান করে।
- মসৃণ পরিবর্তন: অ্যানিমেশন ব্যবহার করে ডেটা পরিবর্তনের মসৃণ এবং প্রাকৃতিক দেখার অভিজ্ঞতা পাওয়া যায়।
- ডাইনামিক রিফ্রেশ: যখনই ডেটা পরিবর্তিত হয় বা ফিল্টার করা হয়, তখন অ্যানিমেশনসহ ডেটা রিফ্রেশ হয়ে যায়।
সারাংশ
DC.js তে Data Change এবং Animation Synchronization ব্যবহার করে আপনি ডেটার পরিবর্তন এবং সেটি গ্রাফিক্যালি প্রদর্শন করার সময় মসৃণ অ্যানিমেশন তৈরি করতে পারেন। D3.js এর transition() ফাংশন এবং DC.js এর renderlet ইভেন্ট ব্যবহার করে অ্যানিমেশন কার্যকরী করা হয়। ডেটা পরিবর্তন হলে অ্যানিমেশন সিঙ্ক্রোনাইজেশন সহ ভিজ্যুয়াল উপাদান পরিবর্তন হয়ে যায়, যা ব্যবহারকারীর জন্য একটি ইন্টারেক্টিভ এবং আকর্ষণীয় অভিজ্ঞতা তৈরি করে।
Read more
