Overlay Chart হল একটি চার্ট টাইপ যেখানে একাধিক সিরিজ একই চার্টে একত্রে প্রদর্শিত হয়। এটি ডেটার তুলনা করতে সহায়ক। DC.js এ Overlay Chart তৈরি করতে lineChart বা barChart ব্যবহার করা যেতে পারে, যেখানে বিভিন্ন ডেটা গ্রুপকে একসাথে দেখানো হয়।
এখানে Overlay Chart তৈরি করার প্রক্রিয়া এবং কাস্টম Styling করা হবে।
১. Overlay Chart তৈরি
Overlay Chart তৈরি করার জন্য stack() ফাংশন ব্যবহার করা হয়, যা একাধিক সিরিজকে একই চার্টে স্তুপীকৃত (stacked) ভাবে প্রদর্শন করে। আমরা lineChart বা barChart এর মাধ্যমে Overlay Chart তৈরি করতে পারি।
উদাহরণ: Overlay Chart (Line Chart) তৈরি
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Overlay Chart</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>Overlay Chart (Line Chart) with DC.js</h1>
<div id="overlay-chart"></div>
<script>
// ডেটাসেট
const data = [
{ date: "2023-01-01", value1: 30, value2: 40 },
{ date: "2023-02-01", value1: 50, value2: 60 },
{ date: "2023-03-01", value1: 70, value2: 90 },
{ date: "2023-04-01", value1: 90, value2: 100 },
{ date: "2023-05-01", value1: 60, value2: 80 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
const dateDimension = ndx.dimension(d => d.date);
const group1 = dateDimension.group().reduceSum(d => d.value1);
const group2 = dateDimension.group().reduceSum(d => d.value2);
// DC.js Overlay Chart (Line Chart)
const lineChart = dc.lineChart("#overlay-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(group1, "Value 1")
.stack(group2, "Value 2")
.x(d3.scaleBand()) // X-অক্ষের জন্য স্কেল
.xUnits(dc.units.ordinal)
.elasticY(true)
.renderHorizontalGridLines(true)
.xAxisLabel("Date")
.yAxisLabel("Value")
.title(function(d) {
return d.key + ": " + d.value; // টুলটিপ কাস্টমাইজেশন
});
dc.renderAll();
</script>
</body>
</html>
কাস্টমাইজেশন:
- stack() ফাংশন: দুটি গ্রুপ (value1 এবং value2) একসাথে প্রদর্শন করতে
stack()ব্যবহার করা হয়েছে। - x(d3.scaleBand()): X-অক্ষের জন্য স্কেল সেট করা হয়েছে যা ডেটা ক্যাটেগরি অনুযায়ী বার প্রদর্শন করে।
- elasticY(true): Y-অক্ষের স্কেলটি ডেটা অনুযায়ী স্বয়ংক্রিয়ভাবে প্রসারিত হয়।
- টুলটিপ:
.title()ফাংশন ব্যবহার করে টুলটিপ কাস্টমাইজ করা হয়েছে।
২. Styling for Overlay Chart
DC.js দিয়ে তৈরি করা Overlay Chart কাস্টমাইজ করার জন্য CSS ব্যবহার করা যায়। এখানে কিছু স্টাইলিং সেট করা হয়েছে:
Styling for Overlay Chart
<style>
#overlay-chart {
border: 2px solid #4CAF50; /* চার্টের চারপাশে বর্ডার */
margin: 20px; /* মার্জিন */
padding: 10px; /* প্যাডিং */
background-color: #f9f9f9; /* ব্যাকগ্রাউন্ড কালার */
}
.dc-chart rect {
opacity: 0.7; /* বার বা লাইনের অপাসিটি কমানো */
}
.dc-chart path.line {
stroke-width: 3px; /* লাইনের প্রস্থ */
stroke: #3498db; /* প্রথম সিরিজের লাইন রঙ */
}
.dc-chart path.stack {
stroke-width: 0; /* স্ট্যাকের জন্য সীমানা অপসারণ */
fill-opacity: 0.6; /* স্ট্যাকের জন্য ফিল অপাসিটি */
}
.dc-chart path.stack:nth-child(2) {
fill: #e74c3c; /* দ্বিতীয় সিরিজের স্ট্যাক রঙ */
}
.dc-chart path.line:nth-child(1) {
stroke: #2ecc71; /* প্রথম সিরিজের লাইন রঙ */
}
.dc-chart text {
font-size: 12px; /* টেক্সট সাইজ */
font-family: Arial, sans-serif; /* ফন্ট */
}
</style>
Styling ব্যাখ্যা:
- বর্ডার, প্যাডিং, এবং ব্যাকগ্রাউন্ড কালার:
#overlay-chartডিভের জন্য কিছু CSS স্টাইল প্রয়োগ করা হয়েছে। - লাইনের অপাসিটি এবং রঙ:
.dc-chart path.lineএবং.dc-chart path.stackব্যবহার করে লাইনের অপাসিটি এবং রঙ কাস্টমাইজ করা হয়েছে। - স্ট্যাকের জন্য আলাদা রঙ:
.dc-chart path.stack:nth-child(2)এর মাধ্যমে দ্বিতীয় সিরিজের স্ট্যাক রঙ পরিবর্তন করা হয়েছে। - টেক্সট কাস্টমাইজেশন:
.dc-chart textএর মাধ্যমে টেক্সটের ফন্ট এবং সাইজ কাস্টমাইজ করা হয়েছে।
৩. অন্যান্য কাস্টমাইজেশন অপশন
- X এবং Y অক্ষের লেবেল কাস্টমাইজেশন:
.xAxisLabel()এবং.yAxisLabel()ফাংশন ব্যবহার করে অক্ষের লেবেল কাস্টমাইজ করা হয়েছে। - মার্জিন কাস্টমাইজেশন:
.margins()ফাংশন ব্যবহার করে চার্টের চারপাশের মার্জিন কাস্টমাইজ করা হয়েছে। - Grid Lines:
.renderHorizontalGridLines()ব্যবহার করে হরিজেন্টাল গ্রিড লাইন যোগ করা হয়েছে।
সারাংশ
- Overlay Chart তৈরি করার জন্য DC.js এ
stack()ফাংশন ব্যবহার করা হয়, যা একাধিক সিরিজকে একসাথে প্রদর্শন করে। - Line Chart বা Bar Chart উভয় ধরনের Overlay Chart তৈরি করা যেতে পারে।
- CSS Styling এর মাধ্যমে Overlay Chart এর বিভিন্ন অংশ যেমন বার, লাইন, টেক্সট, এবং ব্যাকগ্রাউন্ড কাস্টমাইজ করা যায়।
DC.js এর মাধ্যমে Overlay Chart তৈরির ফলে, আপনি ডেটার মধ্যে সম্পর্ক এবং তুলনা সহজেই দেখতে পারবেন, যা ডেটা বিশ্লেষণ এবং ভিজ্যুয়ালাইজেশনে সহায়ক।
Content added By
Read more
