DC.js একটি শক্তিশালী লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশন তৈরির জন্য ব্যবহৃত হয়। যদিও DC.js তার নিজস্ব কাস্টমাইজেশন এবং ডেটা ভিজ্যুয়ালাইজেশন ফিচারের জন্য পরিচিত, তবে রেসপন্সিভ লেআউট তৈরি করা এবং Flexbox ইন্টিগ্রেট করা DC.js ব্যবহারকারীদের জন্য একটি গুরুত্বপূর্ণ দিক, বিশেষ করে যখন একাধিক চার্ট একসঙ্গে ড্যাশবোর্ডে প্রদর্শন করতে হয়।
এখানে আমরা Responsive Layout এবং Flexbox Integration ব্যবহার করে DC.js এর চার্টগুলো কিভাবে মোবাইল এবং ডেস্কটপে ভালভাবে উপস্থাপন করা যায়, তা দেখব।
১. Responsive Layout: Overview
Responsive Layout হল এমন একটি লেআউট ডিজাইন, যা বিভিন্ন স্ক্রীন সাইজ অনুযায়ী নিজে থেকেই মানিয়ে নেয়। অর্থাৎ, যখন ব্যবহারকারী ডিভাইস বা ব্রাউজারের সাইজ পরিবর্তন করেন, তখন লেআউটও পরিবর্তিত হয়ে স্ক্রীন অনুযায়ী সামঞ্জস্যপূর্ণ হয়ে ওঠে।
Flexbox CSS ব্যবহার করে Responsive Layout তৈরির একটি আধুনিক এবং কার্যকর পদ্ধতি, যা বিভিন্ন উপাদানকে সঠিকভাবে সাজানোর জন্য ব্যবহৃত হয়।
২. Flexbox কী?
Flexbox হল CSS এর একটি লেআউট মডেল, যা উপাদানগুলোর মধ্যে স্থান ভাগ করে নেয় এবং তাদের অবস্থান সামঞ্জস্যপূর্ণভাবে প্রদর্শন করে। Flexbox ব্যবহারের মাধ্যমে আপনি বিভিন্ন স্ক্রীন সাইজে চার্ট বা অন্যান্য উপাদান গুলি সঠিকভাবে প্রদর্শন করতে পারবেন।
৩. Flexbox Integration with DC.js
এখানে Flexbox এর সাহায্যে DC.js এর চার্টগুলো কিভাবে রেসপন্সিভভাবে প্রদর্শন করতে হয়, তা দেখানো হবে।
HTML এবং CSS কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Responsive Layout with Flexbox</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">
<style>
/* Flexbox for responsive layout */
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.chart {
margin: 20px;
flex: 1 1 300px; /* Flex property for responsive layout */
min-width: 300px; /* Minimum width for each chart */
max-width: 600px; /* Maximum width for each chart */
}
/* Make charts stack vertically on smaller screens */
@media (max-width: 768px) {
.container {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<h1>DC.js Responsive Layout with Flexbox</h1>
<!-- Container for the charts -->
<div class="container">
<div id="bar-chart" class="chart"></div>
<div id="pie-chart" class="chart"></div>
</div>
<script>
// Sample dataset
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 90 }
];
// Crossfilter index
const ndx = crossfilter(data);
// Create a dimension for the category
const categoryDimension = ndx.dimension(d => d.category);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// Create Bar Chart using DC.js
const barChart = dc.barChart("#bar-chart");
barChart
.width(300)
.height(200)
.dimension(categoryDimension)
.group(categoryGroup)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.renderLabel(true)
.renderTitle(true);
// Create Pie Chart using DC.js
const pieChart = dc.pieChart("#pie-chart");
pieChart
.width(300)
.height(200)
.dimension(categoryDimension)
.group(categoryGroup)
.innerRadius(50) // Donut chart (inner radius)
.renderLabel(true)
.renderTitle(true);
dc.renderAll();
</script>
</body>
</html>
৪. কোড ব্যাখ্যা
১. Flexbox ব্যবহার:
.container: এখানে একটি Flexbox কন্টেইনার তৈরি করা হয়েছে, যেখানে আমরাflex-wrap: wrapব্যবহার করেছি, যাতে উপাদানগুলি পরবর্তী লাইনে চলে যেতে পারে।.chart: প্রতিটি চার্টের জন্যflex: 1 1 300pxব্যবহার করা হয়েছে, যা প্রতিটি চার্টকে স্বতন্ত্র সাইজ দিয়ে রেসপন্সিভভাবে তৈরি করে।min-width: 300pxএবংmax-width: 600pxদিয়ে চার্টের মাপ সীমাবদ্ধ করা হয়েছে।- Media Query:
@media (max-width: 768px)ব্যবহার করে আমরা ছোট স্ক্রীনে (যেমন মোবাইল বা ট্যাবলেট) চার্টগুলিকে ভরাট এবং সেন্টার করার জন্য স্টাইল কাস্টমাইজ করেছি।
২. DC.js চার্ট তৈরি:
- Bar Chart: একটি সাধারণ Bar Chart তৈরি করা হয়েছে যা categoryDimension ব্যবহার করে ডেটা ফিল্টার করে এবং categoryGroup এর যোগফল প্রদর্শন করে।
- Pie Chart: একটি Pie Chart বা Donut Chart তৈরি করা হয়েছে, যেখানে
innerRadius(50)দিয়ে ডোনাটের মতো একটি গর্ত তৈরি করা হয়েছে।
৫. Responsive Layout Result
- Desktop View: ডেস্কটপে চার্টগুলো পাশাপাশি প্রদর্শিত হবে, তবে একে অপরের পাশে স্থান পাবে।
- Mobile View: মোবাইল বা ছোট স্ক্রীনে চার্টগুলো উল্লম্বভাবে সাজানো হবে এবং সেন্টার করা হবে, যাতে স্ক্রীনের সাইজ অনুযায়ী উপাদানগুলো প্রাপ্য স্থান পায়।
সারাংশ
- Flexbox ব্যবহার করে DC.js চার্টগুলিকে রেসপন্সিভ লেআউটে কাস্টমাইজ করা হয়েছে, যাতে ডেস্কটপ এবং মোবাইল স্ক্রীনে চার্টগুলো ভালোভাবে প্রদর্শিত হয়।
- Media Queries এর মাধ্যমে ছোট স্ক্রীনে চার্টগুলোকে সেন্টার এবং ভরাট করা হয়েছে।
- DC.js চার্টগুলির flex স্টাইলিং ব্যবহার করে বিভিন্ন স্ক্রীন সাইজে উপযুক্তভাবে সাজানো সম্ভব হয়েছে।
এই পদ্ধতির মাধ্যমে আপনি DC.js চার্টগুলোকে রেসপন্সিভ লেআউটে কাস্টমাইজ করতে পারেন, এবং একাধিক চার্ট সঠিকভাবে উপস্থাপন করতে পারবেন।
Read more
