DC.js ব্যবহার করে তৈরি করা ডেটা ভিজ্যুয়ালাইজেশনগুলো যখন ওয়েব পৃষ্ঠায় প্রদর্শিত হয়, তখন স্ক্রীন সাইজ পরিবর্তন (উদাহরণস্বরূপ, ব্রাউজারের উইন্ডো সাইজ পরিবর্তন) ডেটার উপস্থাপনাকে প্রভাবিত করতে পারে। Window Resize ইভেন্ট হ্যান্ডলিং ব্যবহার করে এই পরিবর্তনগুলির সাথে মিল রেখে চার্টগুলোকে সঠিকভাবে রেস্পন্সিভ (responsive) করা যায়। DC.js নিজেই স্কেল এবং অক্ষের আয়তন পরিবর্তন করতে সক্ষম, তবে কখনও কখনও কিছু অতিরিক্ত কাস্টমাইজেশন এবং resize ইভেন্ট হ্যান্ডলিং দরকার হয়।
উইন্ডো রিসাইজ ইভেন্ট হ্যান্ডলিং
১. HTML এবং JavaScript সেটআপ
প্রথমে একটি সাধারন DC.js চার্ট তৈরি করে, তারপর উইন্ডো রিসাইজ ইভেন্ট হ্যান্ডলিং যোগ করা হবে। এতে চার্টটি উইন্ডো সাইজ পরিবর্তন হলে স্বয়ংক্রিয়ভাবে রিফ্রেশ বা পুনঃরেন্ডার হবে।
১.১ 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 Window Resize</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 Window Resize Example</h1>
<div id="bar-chart"></div>
<script>
// JavaScript কোড এখানে হবে
</script>
</body>
</html>
১.২ ডেটাসেট তৈরি
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 20 },
{ category: "D", value: 70 }
];
১.৩ DC.js Bar Chart তৈরি
const ndx = crossfilter(data);
const dimension = ndx.dimension(d => d.category);
const group = dimension.group().reduceSum(d => d.value);
const barChart = dc.barChart("#bar-chart");
barChart
.width(600) // প্রাথমিক প্রস্থ
.height(300) // প্রাথমিক উচ্চতা
.dimension(dimension)
.group(group)
.x(d3.scaleBand().domain(data.map(d => d.category)))
.xUnits(dc.units.ordinal)
.barPadding(0.1)
.outerPadding(0.05)
.label(d => d.value)
.render();
এই কোডে একটি সাধারন Bar Chart তৈরি করা হয়েছে যা category এবং value ডেটা ব্যবহার করে একটি বার চার্ট তৈরি করে।
২. Window Resize ইভেন্ট হ্যান্ডলিং
Window Resize ইভেন্ট হ্যান্ডলিংয়ের মাধ্যমে আমরা ওয়েব পেজের উইন্ডো সাইজ পরিবর্তন হলে স্বয়ংক্রিয়ভাবে চার্টের প্রস্থ এবং উচ্চতা পরিবর্তন করতে পারি। DC.js নিজেই চার্টগুলোকে রেস্পন্সিভ করে, তবে আমরা অতিরিক্ত কিছু কাস্টমাইজেশন করতে চাইলে, আমরা resize ইভেন্ট হ্যান্ডল করতে পারি।
২.১ উইন্ডো রিসাইজ ইভেন্টে চার্ট রেন্ডার করা
// উইন্ডো রিসাইজ হলে চার্ট রিফ্রেশ করতে এই ফাংশনটি ব্যবহার করা হবে
function resizeChart() {
const width = document.getElementById("bar-chart").offsetWidth; // Div এর প্রস্থ বের করা
barChart.width(width).render(); // চার্টের প্রস্থ আপডেট করা এবং রেন্ডার করা
}
// উইন্ডো রিসাইজ ইভেন্ট হ্যান্ডলিং
window.addEventListener('resize', resizeChart);
এখানে, resizeChart() ফাংশনটি উইন্ডোর প্রস্থ অনুযায়ী চার্টের প্রস্থ আপডেট করবে এবং render() ফাংশন দিয়ে চার্টটি পুনরায় রেন্ডার করা হবে।
৩. সম্পূর্ণ কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Window Resize 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 Window Resize Example</h1>
<div id="bar-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 20 },
{ category: "D", value: 70 }
];
// Crossfilter ইনস্ট্যান্স
const ndx = crossfilter(data);
const dimension = ndx.dimension(d => d.category);
const group = dimension.group().reduceSum(d => d.value);
// DC.js Bar Chart তৈরি
const barChart = dc.barChart("#bar-chart");
barChart
.width(600) // প্রাথমিক প্রস্থ
.height(300) // প্রাথমিক উচ্চতা
.dimension(dimension)
.group(group)
.x(d3.scaleBand().domain(data.map(d => d.category)))
.xUnits(dc.units.ordinal)
.barPadding(0.1)
.outerPadding(0.05)
.label(d => d.value)
.render();
// উইন্ডো রিসাইজ হলে চার্ট রিফ্রেশ করতে এই ফাংশনটি ব্যবহার করা হবে
function resizeChart() {
const width = document.getElementById("bar-chart").offsetWidth; // Div এর প্রস্থ বের করা
barChart.width(width).render(); // চার্টের প্রস্থ আপডেট করা এবং রেন্ডার করা
}
// উইন্ডো রিসাইজ ইভেন্ট হ্যান্ডলিং
window.addEventListener('resize', resizeChart);
</script>
</body>
</html>
সারাংশ
- Window Resize ইভেন্ট হ্যান্ডলিং ব্যবহার করে আপনি ব্রাউজারের উইন্ডো সাইজ পরিবর্তন হলে DC.js এর চার্টগুলোকে স্বয়ংক্রিয়ভাবে রিফ্রেশ বা রিসাইজ করতে পারেন।
- resizeChart() ফাংশনটি চার্টের প্রস্থ আপডেট করে এবং
barChart.render()ফাংশনটি চার্টটি রেন্ডার করে। resizeইভেন্ট হ্যান্ডল করার মাধ্যমে, আপনি responsive ডিজাইন তৈরি করতে পারেন যেখানে চার্টটি বিভিন্ন স্ক্রীন সাইজের জন্য সঠিকভাবে প্রদর্শিত হবে।
এভাবে, DC.js এবং window resize event ব্যবহার করে আপনি সহজেই ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারেক্টিভ এবং রেস্পন্সিভ তৈরি করতে পারেন।
Read more
