DC.js একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি যা D3.js এবং Crossfilter এর মাধ্যমে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়। Animation চার্টে একটি ইন্টারেক্টিভ অভিজ্ঞতা যোগ করতে সাহায্য করে, বিশেষ করে যখন আপনি ডেটার পরিবর্তন বা পরিবর্তিত গ্রাফিক্স প্রদর্শন করতে চান।
DC.js এর সাথে D3.js এর animation ফিচার ব্যবহার করে আমরা চার্টে অ্যানিমেশন যোগ করতে পারি, যা ডেটা আপডেট বা ইউজার ইন্টারঅ্যাকশন (যেমন ফিল্টারিং) এর সাথে অ্যানিমেটেড আউটপুট প্রদান করে।
এই গাইডে, আমরা DC.js চার্টে অ্যানিমেশন যোগ করার জন্য কিছু সাধারণ কৌশল দেখাবো, যা Bar Chart, Pie Chart ইত্যাদিতে কার্যকর হবে।
১. DC.js এবং D3.js এর সাহায্যে অ্যানিমেশন যোগ করা
DC.js নিজে থেকে কোনো ডিফল্ট অ্যানিমেশন সরবরাহ করে না, তবে D3.js এর transition এবং ease ফাংশন ব্যবহার করে আমরা অ্যানিমেশন তৈরি করতে পারি।
২. Animation যোগ করার জন্য Steps
১. ডেটাসেট প্রস্তুতি এবং Crossfilter সেটআপ
প্রথমে, ডেটাসেট তৈরি করতে হবে এবং Crossfilter ইন্ডেক্স সেটআপ করতে হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Chart Animation</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 Chart with Animation</h1>
<div id="bar-chart"></div>
<script>
// ডেটাসেট তৈরি
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 90 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
</script>
</body>
</html>
এখানে, একটি সাধারণ ডেটাসেট তৈরি করা হয়েছে এবং categoryDimension নামে একটি ডাইমেনশন তৈরি করা হয়েছে।
২. DC.js বার চার্ট তৈরি
এখন, একটি Bar Chart তৈরি করব এবং সেই চার্টে অ্যানিমেশন যোগ করব। এখানে D3.js transition এবং ease ব্যবহার করা হবে।
// DC.js বার চার্ট তৈরি
const barChart = dc.barChart("#bar-chart");
barChart
.width(600) // চার্টের প্রস্থ
.height(300) // চার্টের উচ্চতা
.dimension(categoryDimension) // ডাইমেনশন ব্যবহার
.group(categoryGroup) // গ্রুপ ব্যবহার
.x(d3.scaleBand()) // X-অক্ষের স্কেল
.xUnits(dc.units.ordinal)
.renderLabel(true) // লেবেল প্রদর্শন
.renderTitle(true) // টাইটেল প্রদর্শন
.on("renderlet", function(chart) {
chart.selectAll("rect")
.transition() // ট্রানজিশন যোগ করা
.duration(1000) // 1 সেকেন্ডের অ্যানিমেশন
.ease(d3.easeBounceOut) // Bounce effect
.attr("height", function(d) { return chart.height() - chart.y()(d.y); }) // হাইট পরিবর্তন
.attr("y", function(d) { return chart.y()(d.y); }); // Y-অক্ষের অবস্থান পরিবর্তন
});
dc.renderAll();
৩. কোড ব্যাখ্যা
- transition(): এটি একটি D3.js ফাংশন যা গতি এবং অ্যানিমেশন প্রয়োগ করতে ব্যবহৃত হয়।
- duration(1000): অ্যানিমেশনের সময়কাল। এখানে 1000 মিলিসেকেন্ড (1 সেকেন্ড) সময়ের জন্য অ্যানিমেশন প্রয়োগ করা হয়েছে।
- ease(d3.easeBounceOut): এখানে easeBounceOut একটি D3.js এর অ্যানিমেশন ইফেক্ট যা চার্টের সেকশনের ওপর বাউন্সিং ইফেক্ট যোগ করে।
- attr("height", function(d) {...}): প্রতিটি বার এর উচ্চতা পরিবর্তন করতে এবং তা অ্যানিমেটেডভাবে প্রদর্শন করতে ব্যবহৃত হয়।
- attr("y", function(d) {...}): Y-অক্ষের অবস্থান পরিবর্তন করতে এটি ব্যবহার করা হয়।
৪. DC.js এর অন্যান্য চার্টে অ্যানিমেশন যোগ করা
এই অ্যানিমেশন কৌশলটি Pie Chart, Line Chart, এবং Heatmap সহ অন্যান্য DC.js চার্টেও ব্যবহার করা যাবে। উদাহরণস্বরূপ, Pie Chart তে একইভাবে অ্যানিমেশন প্রয়োগ করা যেতে পারে:
// DC.js Pie Chart তৈরি
const pieChart = dc.pieChart("#pie-chart");
pieChart
.width(300)
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.innerRadius(50)
.on("renderlet", function(chart) {
chart.selectAll("path")
.transition() // ট্রানজিশন যোগ করা
.duration(1000) // 1 সেকেন্ডের অ্যানিমেশন
.ease(d3.easeElasticOut) // Elastic effect
.attr("d", d3.arc().innerRadius(50).outerRadius(function(d) { return chart.radius()(d); })); // Arc-এর আকৃতি পরিবর্তন
});
dc.renderAll();
এখানে easeElasticOut ব্যবহার করা হয়েছে যা একটি ইলাস্টিক অ্যানিমেশন প্রয়োগ করে। d3.arc() ব্যবহার করে প্রতিটি পিস সেকশনের আকৃতি কাস্টমাইজ করা হয়েছে।
৫. সম্পূর্ণ কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Chart Animation</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 Chart with Animation</h1>
<div id="bar-chart"></div>
<script>
// Sample dataset
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 90 }
];
// Crossfilter setup
const ndx = crossfilter(data);
// Dimension creation
const categoryDimension = ndx.dimension(d => d.category);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// DC.js Bar Chart with Animation
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.renderLabel(true)
.renderTitle(true)
.on("renderlet", function(chart) {
chart.selectAll("rect")
.transition()
.duration(1000)
.ease(d3.easeBounceOut)
.attr("height", function(d) { return chart.height() - chart.y()(d.y); })
.attr("y", function(d) { return chart.y()(d.y); });
});
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- Animation যোগ করার জন্য D3.js transition() এবং ease ব্যবহার করা হয়েছে।
- DC.js চার্টে অ্যানিমেশন প্রয়োগ করার জন্য
renderletইভেন্ট ব্যবহার করা হয়। - easeBounceOut এবং easeElasticOut এর মতো D3.js ease functions ব্যবহার করে বিভিন্ন ধরণের অ্যানিমেশন তৈরি করা যায়।
- এই পদ্ধতি DC.js এর Bar Chart, Pie Chart, এবং অন্যান্য চার্টে অ্যানিমেশন যোগ করার জন্য ব্যবহার করা যেতে পারে।
এই গাইডের মাধ্যমে আপনি DC.js ব্যবহার করে chart animation যোগ করতে পারবেন এবং আপনার ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারেক্টিভ এবং আকর্ষণীয় করে তুলতে পারবেন।
Read more
