DC.js হল একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি যা D3.js এবং Crossfilter এর সাথে ব্যবহৃত হয় ডেটা ভিজ্যুয়ালাইজেশন তৈরি করার জন্য। যখন আপনি একটি ড্যাশবোর্ড বা চার্ট তৈরি করেন, তখন Mobile-friendly ডিজাইন গুরুত্বপূর্ণ, কারণ ব্যবহারকারীরা বিভিন্ন ধরনের ডিভাইস (যেমন স্মার্টফোন, ট্যাবলেট, ডেস্কটপ) থেকে অ্যাক্সেস করতে পারে।
এই গাইডে, আমরা DC.js এর সাহায্যে মোবাইল-ফ্রেন্ডলি চার্ট ডিজাইন তৈরির কিছু টেকনিক্স নিয়ে আলোচনা করব, যাতে আপনার চার্টগুলো বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে প্রদর্শিত হয়।
১. রেসপন্সিভ ডিজাইন
রেসপন্সিভ ডিজাইন একটি গুরুত্বপূর্ণ বিষয় যা ডিভাইসের স্ক্রীন সাইজ অনুযায়ী চার্টের আকারকে স্বয়ংক্রিয়ভাবে সমন্বয় করে। DC.js-এ রেসপন্সিভ ডিজাইন তৈরির জন্য আপনি width এবং height প্যারামিটার ব্যবহার করার পরিবর্তে CSS মিডিয়া কুয়েরি বা ভিউপোর্ট প্যারামিটার ব্যবহার করতে পারেন।
উদাহরণ: রেসপন্সিভ চার্ট
const chart = dc.barChart("#chart");
chart
.dimension(dimension)
.group(group)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.height(function () {
return window.innerWidth < 768 ? 200 : 400; // স্ক্রীন সাইজ অনুযায়ী উচ্চতা
})
.width(function () {
return window.innerWidth - 50; // স্ক্রীন সাইজ অনুযায়ী প্রস্থ
})
.render();
এখানে, window.innerWidth ব্যবহার করা হয়েছে যাতে স্ক্রীন সাইজের উপর ভিত্তি করে চার্টের প্রস্থ এবং উচ্চতা স্বয়ংক্রিয়ভাবে পরিবর্তিত হয়।
২. সিএসএস মিডিয়া কুয়েরি
মোবাইল-ফ্রেন্ডলি ডিজাইনের জন্য সিএসএস মিডিয়া কুয়েরি ব্যবহার করা খুবই কার্যকরী। এটি আপনাকে একাধিক স্ক্রীন সাইজের জন্য CSS স্টাইল প্রয়োগ করতে দেয়।
উদাহরণ: CSS মিডিয়া কুয়েরি
/* ডেস্কটপ ভিউ */
#chart {
width: 600px;
height: 400px;
}
/* ট্যাবলেট ভিউ */
@media (max-width: 768px) {
#chart {
width: 100%;
height: 300px;
}
}
/* স্মার্টফোন ভিউ */
@media (max-width: 480px) {
#chart {
width: 100%;
height: 200px;
}
}
এখানে, media queries ব্যবহার করা হয়েছে যাতে ডেস্কটপ, ট্যাবলেট এবং স্মার্টফোনের জন্য আলাদা CSS রুলস প্রয়োগ করা যায়। এর ফলে চার্টের আকার স্ক্রীন সাইজ অনুযায়ী পরিবর্তিত হবে।
৩. স্কেলিং এবং রেসপন্সিভ চার্টের জন্য viewBox ব্যবহার
DC.js-এ SVG গ্রাফিক্স ব্যবহার হয়, যা রেসপন্সিভ ডিজাইনকে সহজ করে তোলে। D3.js এর viewBox অ্যাট্রিবিউট ব্যবহার করে আপনি SVG এলিমেন্টের আকার এবং স্কেল নিয়ন্ত্রণ করতে পারেন।
উদাহরণ: viewBox ব্যবহার
const chart = dc.lineChart("#chart");
chart
.width(window.innerWidth - 50)
.height(window.innerHeight - 100)
.margins({ top: 10, right: 10, bottom: 30, left: 40 })
.renderTitle(true)
.on("renderlet", function (chart) {
chart.select("svg").attr("viewBox", `0 0 ${chart.width()} ${chart.height()}`);
})
.dimension(dimension)
.group(group)
.render();
এখানে, viewBox অ্যাট্রিবিউট ব্যবহার করা হয়েছে যাতে চার্টটি স্বয়ংক্রিয়ভাবে স্কেল করা যায় এবং সমস্ত উপাদান সঠিকভাবে প্রদর্শিত হয়, স্ক্রীন সাইজের উপর ভিত্তি করে।
৪. ডাইনামিক চার্ট লেবেল
মোবাইল ডিভাইসে জায়গার সীমাবদ্ধতা থাকতে পারে, তাই বড় লেবেল বা অক্ষরগুলো ছোট স্ক্রীনে সঠিকভাবে দেখানোর জন্য ডাইনামিক লেবেল ব্যবহার করা ভালো।
উদাহরণ: ডাইনামিক লেবেল
const chart = dc.pieChart("#pie-chart");
chart
.dimension(dimension)
.group(group)
.radius(100)
.renderLabel(true)
.label(function (d) {
return window.innerWidth < 480 ? d.key : `${d.key}: ${d.value}`;
})
.render();
এখানে, লেবেলটি ছোট স্ক্রীনে সংক্ষিপ্তভাবে প্রদর্শিত হবে এবং বড় স্ক্রীনে পূর্ণ লেবেল প্রদর্শিত হবে।
৫. ডেটা পয়েন্টের উপস্থাপনা এবং স্লাইডিং স্কেল
মোবাইল ডিভাইসে চার্টের মধ্যে ডেটা পয়েন্ট স্পষ্টভাবে দেখানোর জন্য sliding scale বা scrollable charts ব্যবহার করা যেতে পারে।
উদাহরণ: স্লাইডিং স্কেল
const chart = dc.lineChart("#line-chart");
chart
.width(window.innerWidth - 20)
.height(300)
.x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-06-01")]))
.xUnits(d3.timeMonths)
.dimension(dimension)
.group(group)
.render();
এখানে, x.scaleTime() ব্যবহার করা হয়েছে যাতে টাইম সিরিজ ডেটার জন্য স্কেলিং এবং স্ক্রলিং সহজ হয়।
৬. টুলটিপ এবং ইন্টারঅ্যাকশন
মোবাইল-ফ্রেন্ডলি ডিজাইন তৈরিতে ইন্টারঅ্যাক্টিভ এবং টুলটিপ (tooltip) ফিচার ব্যবহৃত হয়, যা ব্যবহারকারীদের ডেটা সম্পর্কে বিস্তারিত জানতে সহায়ক।
উদাহরণ: টুলটিপ যোগ করা
chart
.on("pretransition", function (chart) {
chart.selectAll(".dc-tooltip")
.style("visibility", "visible")
.text(function (d) {
return `Category: ${d.key}, Value: ${d.value}`;
});
});
এখানে, pretransition ইভেন্ট ব্যবহার করে প্রতিটি সেকশনে টুলটিপের মাধ্যমে ডেটার বিস্তারিত তথ্য প্রদর্শিত হবে।
সারাংশ
- রেসপন্সিভ ডিজাইন: CSS মিডিয়া কুয়েরি এবং
viewBoxব্যবহার করে মোবাইলের জন্য চার্ট ডিজাইন কাস্টমাইজ করা যায়। - ডাইনামিক লেবেল: ছোট স্ক্রীনে লেবেল সঙ্কুচিত এবং বড় স্ক্রীনে পূর্ণ লেবেল প্রদর্শন।
- স্লাইডিং স্কেল এবং ইন্টারঅ্যাকটিভ ফিচার: মোবাইল ডিভাইসে ডেটা স্পষ্টভাবে দেখানোর জন্য স্কেলিং এবং টুলটিপ ব্যবহার।
- CSS মিডিয়া কুয়েরি: ডেস্কটপ, ট্যাবলেট এবং স্মার্টফোন স্ক্রীনের জন্য আলাদা স্টাইল সেট করা।
এই টেকনিকগুলো ব্যবহার করে DC.js চার্টগুলো মোবাইল-ফ্রেন্ডলি করা যায়, যাতে ব্যবহারকারীরা সহজেই ইন্টারঅ্যাক্ট করতে পারে এবং বিভিন্ন ডিভাইসে ভালো অভিজ্ঞতা পায়।
Read more
