DC.js একটি শক্তিশালী লাইব্রেরি যা D3.js এর উপর ভিত্তি করে তৈরি এবং ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়। DC.js দিয়ে আপনি সহজে বিভিন্ন ধরনের চার্ট তৈরি করতে পারবেন, যার মধ্যে Bar Chart অন্যতম। এখানে DC.js দিয়ে Bar Chart কাস্টমাইজ করার বিভিন্ন উপায় আলোচনা করা হলো।
১. Bar Chart এর মৌলিক কনফিগারেশন
প্রথমে একটি মৌলিক বার চার্ট তৈরি করতে DC.js এবং D3.js এর সঙ্গে কাজ করা প্রয়োজন। নীচে একটি সাধারণ উদাহরণ দেখানো হলো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Bar Chart কাস্টমাইজেশন</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.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 Bar Chart কাস্টমাইজেশন</h1>
<div id="bar-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 20 },
{ category: "E", value: 60 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
const dimension = ndx.dimension(d => d.category);
const group = dimension.group().reduceSum(d => d.value);
// DC.js বার চার্ট
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(dimension)
.group(group)
.x(d3.scaleBand()) // এক্স-অক্ষের স্কেল
.xUnits(dc.units.ordinal) // ডিসক্রিট ডেটা ব্যবহারের জন্য
.yAxisLabel("Value") // Y-অক্ষের লেবেল
.xAxisLabel("Category") // X-অক্ষের লেবেল
.renderHorizontalGridLines(true); // গ্রিড লাইন
// চার্ট রেন্ডার
dc.renderAll();
</script>
</body>
</html>
এটি একটি মৌলিক Bar Chart তৈরি করে যা একটি ডেটাসেটের উপর ভিত্তি করে তৈরি করা হয়েছে। এখন আমরা এই চার্টটিকে কাস্টমাইজ করব।
২. Bar Chart কাস্টমাইজেশন এর ধাপগুলো
কাস্টমাইজেশন ১: চার্টের রঙ পরিবর্তন করা
barChart এর colors() ফাংশন ব্যবহার করে আপনি বার চার্টের রঙ কাস্টমাইজ করতে পারেন:
barChart
.colors(d3.scaleOrdinal(d3.schemeCategory10)); // রঙের স্কিম
এটি একটি রঙের স্কিম নির্ধারণ করবে যা বারগুলোতে রঙের পরিবর্তন আনবে।
কাস্টমাইজেশন ২: এন্ট্রি স্পেস (Padding) বাড়ানো
বারের মধ্যে আরো স্থান যোগ করতে xAxisPadding() ফাংশন ব্যবহার করা যেতে পারে:
barChart
.xAxisPadding(10); // এক্স-অক্ষের বারগুলোর মধ্যে স্পেস যোগ করা
এটি বারগুলোর মধ্যে জায়গা বাড়াবে, যা আরও স্পষ্ট করে ডেটা প্রদর্শন করবে।
কাস্টমাইজেশন ৩: বারের উচ্চতা পরিবর্তন করা
height() প্রোপার্টি ব্যবহার করে চার্টের উচ্চতা পরিবর্তন করা যেতে পারে:
barChart
.height(400); // উচ্চতা পরিবর্তন
এটি চার্টের উচ্চতা বাড়াবে বা কমাবে, যাতে আরও স্পষ্ট ভিজ্যুয়াল উপস্থাপনা পাওয়া যায়।
কাস্টমাইজেশন ৪: এক্স-অক্ষ এবং ওয়াই-অক্ষের লেবেল কাস্টমাইজ করা
এক্স-অক্ষ এবং ওয়াই-অক্ষের লেবেল কাস্টমাইজ করতে xAxisLabel() এবং yAxisLabel() ফাংশন ব্যবহার করা হয়:
barChart
.xAxisLabel("Custom X Label") // এক্স-অক্ষের লেবেল কাস্টমাইজ
.yAxisLabel("Custom Y Label"); // ওয়াই-অক্ষের লেবেল কাস্টমাইজ
এটি আপনাকে এক্স এবং ওয়াই অক্ষের লেবেল পরিবর্তন করতে সাহায্য করবে।
কাস্টমাইজেশন ৫: টুলটিপ এবং হোভার ইফেক্ট
DC.js নিজে থেকেই টুলটিপ (hover effect) সাপোর্ট করে, তবে আপনি কাস্টমাইজড টুলটিপ তৈরি করতে পারেন D3.js এর মাধ্যমে। উদাহরণস্বরূপ:
barChart
.on("pretransition", function(chart) {
chart.selectAll("rect")
.on("mouseover", function(event, d) {
d3.select(this).style("fill", "orange"); // হোভার হলে বারটির রঙ পরিবর্তন
})
.on("mouseout", function(event, d) {
d3.select(this).style("fill", "steelblue"); // মাউস আউট হলে আগের রঙে ফিরিয়ে আনা
});
});
এটি আপনার বার চার্টে ইন্টারঅ্যাকটিভ হোভার ইফেক্ট তৈরি করবে।
কাস্টমাইজেশন ৬: এক্স-অক্ষের স্কেল কাস্টমাইজ করা
ডিফল্ট scaleBand() স্কেল ব্যবহার করা হয়, তবে আপনি চাইলে scaleLinear() বা অন্য যেকোনো স্কেল ব্যবহার করতে পারেন:
barChart
.x(d3.scaleLinear()) // এক্স-অক্ষের স্কেল পরিবর্তন
.xAxisLabel("Custom X Axis Label"); // এক্স-অক্ষের কাস্টম লেবেল
৩. সম্পূর্ণ কাস্টমাইজড কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Bar Chart কাস্টমাইজেশন</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.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 Bar Chart কাস্টমাইজেশন</h1>
<div id="bar-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 20 },
{ category: "E", value: 60 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
const dimension = ndx.dimension(d => d.category);
const group = dimension.group().reduceSum(d => d.value);
// DC.js বার চার্ট
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(400)
.dimension(dimension)
.group(group)
.x(d3.scaleBand()) // এক্স-অক্ষের স্কেল
.xUnits(dc.units.ordinal) // ডিসক্রিট ডেটা ব্যবহারের জন্য
.xAxisLabel("Category")
.yAxisLabel("Value")
.colors(d3.scaleOrdinal(d3.schemeCategory10)) // রঙ কাস্টমাইজ
.renderHorizontalGridLines(true)
.on("pretransition", function(chart) {
chart.selectAll("rect")
.on("mouseover", function(event, d) {
d3.select(this).style("fill", "orange"); // হোভার হলে রঙ পরিবর্তন
})
.on("mouseout", function(event, d) {
d3.select(this).style("fill", "steelblue"); // মাউস আউট হলে আগের রঙে ফিরিয়ে আনা
});
});
// চার্ট রেন্ডার
dc.renderAll();
</script>
</body>
</html>
সারাংশ
DC.js দিয়ে Bar Chart কাস্টমাইজ করা অনেক সহজ এবং এটি অনেক ধরনের কাস্টমাইজেশন সমর্থন করে:
- রঙ পরিবর্তন:
colors()ব্যবহার করে বারগুলোর রঙ কাস্টমাইজ করা যায়। - স্পেসিং:
xAxisPadding()ব্যবহার করে বারগুলোর মধ্যে স্পেস বাড়ানো যায়। - লেবেল কাস্টমাইজেশন: এক্স-অক্ষ এবং ওয়াই-অক্ষের লেবেল কাস্টমাইজ করা যায়।
- ইন্টারঅ্যাকটিভিটি: টুলটিপ এবং হোভার ইফেক্ট যোগ করা যায়।
এগুলি হল DC.js দিয়ে একটি বার চার্ট কাস্টমাইজ করার মৌলিক উপায়।
DC.js একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশনে বিশেষভাবে ব্যবহৃত হয়। Bar Chart হলো DC.js এর একটি মৌলিক এবং জনপ্রিয় চার্ট, যা ডেটার মান ভিজ্যুয়ালাইজ করতে খুবই কার্যকর। এখানে আমরা একটি সাধারণ Bar Chart তৈরি করব এবং তার কাস্টমাইজেশন দেখাব।
১. HTML এবং JavaScript ফাইল তৈরি
প্রথমে, DC.js এবং D3.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 Simple Bar 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>DC.js Simple Bar Chart</h1>
<div id="bar-chart"></div>
<script>
// JavaScript কোড এখানে যোগ করুন
</script>
</body>
</html>
এখানে আমরা সিডিএন লিঙ্কের মাধ্যমে D3.js, Crossfilter এবং DC.js লাইব্রেরি যুক্ত করেছি।
২. ডেটাসেট তৈরি এবং Crossfilter ইন্ডেক্স
এখন, ডেটাসেট তৈরি করা হবে এবং Crossfilter এর মাধ্যমে ডেটা ইন্ডেক্স করা হবে।
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 20 },
{ category: "E", value: 60 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
এখানে একটি সাধারণ ডেটাসেট তৈরি করা হয়েছে, যার মধ্যে category এবং value রয়েছে। পরে, crossfilter(data) ব্যবহার করে ডেটা ইন্ডেক্স করা হয়েছে।
৩. ডাইমেনশন এবং গ্রুপ তৈরি
DC.js এর সাথে ডেটা ফিল্টার এবং গ্রুপ করার জন্য Crossfilter ডাইমেনশন এবং গ্রুপ তৈরি করে:
// category এর উপর ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
// category এর উপর গ্রুপ তৈরি এবং value এর যোগফল বের করা
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
এখানে, categoryDimension ক্যাটেগরি অনুযায়ী ডাইমেনশন তৈরি করা হয়েছে এবং categoryGroup এ value এর যোগফল বের করা হয়েছে।
৪. DC.js দিয়ে Simple Bar Chart তৈরি
এখন DC.js ব্যবহার করে একটি Bar Chart তৈরি করা হবে।
// DC.js বার চার্ট তৈরি
const barChart = dc.barChart("#bar-chart");
barChart
.width(600) // চার্টের প্রস্থ
.height(300) // চার্টের উচ্চতা
.dimension(categoryDimension) // ডাইমেনশন
.group(categoryGroup) // গ্রুপ
.x(d3.scaleBand()) // এক্স-অক্ষ স্কেল
.xUnits(dc.units.ordinal) // ডিসক্রিট ডেটা ব্যবহারের জন্য
.xAxisLabel("Categories") // এক্স-অক্ষের লেবেল
.yAxisLabel("Total Value") // ওয়াই-অক্ষের লেবেল
.renderHorizontalGridLines(true); // গ্রিড লাইন যোগ করা
// DC.js দ্বারা সমস্ত চার্ট রেন্ডার
dc.renderAll();
এখানে, আমরা categoryDimension এবং categoryGroup ব্যবহার করে একটি Bar Chart তৈরি করেছি। এক্স-অক্ষের স্কেল হিসেবে d3.scaleBand() ব্যবহার করা হয়েছে এবং renderHorizontalGridLines(true) দ্বারা গ্রিড লাইন যোগ করা হয়েছে।
৫. বার চার্ট কাস্টমাইজেশন
DC.js দিয়ে বার চার্টের বিভিন্ন দিক কাস্টমাইজ করা যায়। যেমন:
১. বার চার্টের রঙ পরিবর্তন:
barChart
.colors(d3.scaleOrdinal(d3.schemeCategory10)) // বার চার্টের রঙ পরিবর্তন
.barPadding(0.1); // বার গুলোর মধ্যে ব্যবধান
২. এক্স-অক্ষ এবং ওয়াই-অক্ষের স্কেল পরিবর্তন:
barChart
.x(d3.scaleBand().padding(0.2)) // এক্স-অক্ষের প্যাডিং পরিবর্তন
.y(d3.scaleLinear().domain([0, 100])) // ওয়াই-অক্ষের স্কেল পরিবর্তন
.yAxis().ticks(5); // ওয়াই-অক্ষের টিক্স সংখ্যা পরিবর্তন
৩. টুলটিপ যোগ করা:
barChart
.on('pretransition', function(chart) {
chart.selectAll('rect')
.on('mouseover', function(d) {
d3.select(this).attr('fill', 'orange');
const tooltip = d3.select('#tooltip')
.style('left', (d3.event.pageX + 5) + 'px')
.style('top', (d3.event.pageY - 28) + 'px')
.style('visibility', 'visible')
.text(d.key + ": " + d.value);
})
.on('mouseout', function() {
d3.select(this).attr('fill', null);
d3.select('#tooltip').style('visibility', 'hidden');
});
});
এখানে টুলটিপ যোগ করার মাধ্যমে, বার চার্টের উপর মাউস পয়েন্টার মুভ করলে একটি টুলটিপ দেখানো হবে, যা সেই নির্দিষ্ট বারটির মান প্রদর্শন করবে।
৬. পূর্ণ কোড উদাহরণ
এখন পুরো কোডটি একত্রে দেখে নেওয়া যাক:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Simple Bar 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">
<style>
#tooltip {
position: absolute;
background-color: lightyellow;
padding: 5px;
border: 1px solid black;
visibility: hidden;
}
</style>
</head>
<body>
<h1>DC.js Simple Bar Chart</h1>
<div id="bar-chart"></div>
<div id="tooltip"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 20 },
{ category: "E", value: 60 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
// গ্রুপ তৈরি
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// DC.js বার চার্ট তৈরি
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.xAxisLabel("Categories")
.yAxisLabel("Total Value")
.renderHorizontalGridLines(true)
.colors(d3.scaleOrdinal(d3.schemeCategory10))
.barPadding(0.1)
.x(d3.scaleBand().padding(0.2))
.y(d3.scaleLinear().domain([0, 100]))
.yAxis().ticks(5)
.on('pretransition', function(chart) {
chart.selectAll('rect')
.on('mouseover', function(d) {
d3.select(this).attr('fill', 'orange');
const tooltip = d3.select('#tooltip')
.style('left', (d3.event.pageX + 5) + 'px')
.style('top', (d3.event.pageY - 28) + 'px')
.style('visibility', 'visible')
.text(d.key + ": " + d.value);
})
.on('mouseout', function() {
d3.select(this).attr('fill', null);
d3.select('#tooltip').style('visibility', 'hidden');
});
});
// সমস্ত চার্ট রেন্ডার
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- DC.js দিয়ে একটি সহজ Bar Chart তৈরি করা হয়েছে এবং তার কাস্টমাইজেশন (রঙ, এক্স-অক্ষ, ওয়াই-অক্ষ, টুলটিপ) দেখানো হয়েছে।
dc.barChart()ফাংশন ব্যবহার করে বার চার্ট তৈরি করা হয় এবং বিভিন্ন কাস্টমাইজেশন যেমন রঙ, প্যাডিং, টুলটিপ যোগ করা হয়।- এই কোডটি আপনাকে DC.js এবং D3.js এর সাহায্যে ডেটা ভিজ্যুয়ালাইজেশন প্রজেক্ট তৈরি করার জন্য একটি ভাল শুরু দেয়।
DC.js ব্যবহার করে বিভিন্ন ধরনের ডেটা ভিজ্যুয়ালাইজেশন তৈরি করা যায়। এখানে Horizontal Bar Chart এবং Multi-series Bar Chart তৈরির প্রক্রিয়া তুলে ধরা হয়েছে।
১. Horizontal Bar Chart (Horizontal বার চার্ট)
Horizontal Bar Chart একটি জনপ্রিয় চার্ট টাইপ, যা ডেটার মধ্যে তুলনা সহজ করে। DC.js এর মাধ্যমে Horizontal Bar Chart তৈরি করার জন্য d3.scaleBand() ব্যবহার করা হয়, যেটি এক্স-অক্ষের জন্য স্কেল সেট করে।
উদাহরণ: Horizontal Bar 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 Horizontal Bar 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>Horizontal Bar Chart with DC.js</h1>
<div id="horizontal-bar-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 90 },
{ category: "E", value: 60 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
const categoryDimension = ndx.dimension(d => d.category);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// DC.js Horizontal Bar Chart তৈরি
const barChart = dc.barChart("#horizontal-bar-chart");
barChart
.width(600)
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.x(d3.scaleLinear()) // X-অক্ষের জন্য স্কেল
.y(d3.scaleBand()) // Y-অক্ষের জন্য স্কেল
.xUnits(dc.units.integers)
.elasticY(true)
.renderHorizontalGridLines(true)
.yAxisLabel("Category")
.xAxisLabel("Value");
// চার্ট রেন্ডারিং
dc.renderAll();
</script>
</body>
</html>
এখানে, category অনুযায়ী value গ্রুপ করে Horizontal Bar Chart তৈরি করা হয়েছে। x(d3.scaleLinear()) এবং y(d3.scaleBand()) ব্যবহার করে X এবং Y অক্ষের স্কেল সেট করা হয়েছে।
২. Multi-series Bar Chart (মাল্টি-সিরিজ বার চার্ট)
Multi-series Bar Chart একাধিক সিরিজের তথ্য একসাথে প্রদর্শন করতে ব্যবহৃত হয়। DC.js ব্যবহার করে মাল্টি-সিরিজ বার চার্ট তৈরি করার জন্য, একাধিক dimension এবং group তৈরি করা হয়, যা আলাদা আলাদা সিরিজের মতো কাজ করবে।
উদাহরণ: Multi-series Bar 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 Multi-series Bar 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>Multi-series Bar Chart with DC.js</h1>
<div id="multi-series-bar-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value1: 30, value2: 40 },
{ category: "B", value1: 50, value2: 60 },
{ category: "C", value1: 70, value2: 80 },
{ category: "D", value1: 90, value2: 100 },
{ category: "E", value1: 60, value2: 70 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
const categoryDimension = ndx.dimension(d => d.category);
const group1 = categoryDimension.group().reduceSum(d => d.value1);
const group2 = categoryDimension.group().reduceSum(d => d.value2);
// DC.js Multi-series Bar Chart তৈরি
const barChart = dc.barChart("#multi-series-bar-chart");
barChart
.width(600)
.height(300)
.dimension(categoryDimension)
.group(group1, "Value 1") // প্রথম সিরিজ
.stack(group2, "Value 2") // দ্বিতীয় সিরিজ
.x(d3.scaleBand()) // X-অক্ষের জন্য স্কেল
.xUnits(dc.units.ordinal)
.elasticY(true)
.renderHorizontalGridLines(true)
.xAxisLabel("Category")
.yAxisLabel("Values");
// চার্ট রেন্ডারিং
dc.renderAll();
</script>
</body>
</html>
এখানে, value1 এবং value2 দুটি ভিন্ন সিরিজ হিসেবে তৈরি করা হয়েছে। stack() ফাংশনটি ব্যবহার করে একাধিক সিরিজকে একসাথে একটি বার চার্টে প্রদর্শন করা হয়েছে।
সারাংশ
- Horizontal Bar Chart: DC.js ব্যবহার করে Horizontal Bar Chart তৈরি করতে
x(d3.scaleLinear())এবংy(d3.scaleBand())স্কেল ব্যবহার করা হয়। এটি ক্যাটেগরি এবং মান অনুযায়ী বার প্রদর্শন করে। - Multi-series Bar Chart: একাধিক সিরিজের তথ্য একসাথে প্রদর্শন করতে
stack()ফাংশনটি ব্যবহার করা হয়। এতে একাধিক ডেটা সিরিজ একই চার্টে একসাথে দেখানো হয়।
এই দুটি চার্টই DC.js এর মাধ্যমে খুব সহজেই তৈরি করা যায় এবং ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন হিসেবে কাজ করে।
DC.js এর মাধ্যমে বার চার্ট তৈরি করার সময়, আপনি বারটির প্রস্থ, স্পেসিং, এবং প্যাডিং কাস্টমাইজ করতে পারবেন। D3.js এর সাথে ইন্টিগ্রেশন থাকার কারণে, আপনি এই বিভিন্ন প্যারামিটার নিয়ন্ত্রণ করতে পারেন।
এখানে Bar Width, Spacing, এবং Padding কাস্টমাইজ করার জন্য প্রয়োজনীয় কোড এবং ধারণা তুলে ধরা হচ্ছে।
১. Bar Width কাস্টমাইজ করা
Bar Width কাস্টমাইজ করতে, আপনি x.bandwidth() বা x.rangeBand() ব্যবহার করতে পারেন। এখানে bandwidth() বারটির প্রস্থ নিয়ন্ত্রণ করে, এবং এটি সাধারণত scaleBand() এর মাধ্যমে সেট করা হয়।
barChart
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.xAxisLabel("Categories")
.yAxisLabel("Values")
.barPadding(0.1) // বারটির মধ্যে স্পেসিং
.outerPadding(0.1) // গ্রাফের বাইরের প্যাডিং
.width(600)
.height(300)
.dimension(dimension)
.group(group);
এই উদাহরণে barPadding() এবং outerPadding() ব্যবহৃত হয়েছে। barPadding() বারগুলোর মধ্যে স্পেসিং নিয়ন্ত্রণ করে, এবং outerPadding() পুরো চার্টের বাইরের স্পেসিং নিয়ন্ত্রণ করে।
২. Spacing (স্পেসিং) কাস্টমাইজ করা
Spacing বা গ্যাপ কাস্টমাইজ করার জন্য barPadding() এবং outerPadding() ব্যবহার করা হয়। barPadding() বারগুলোর মধ্যে স্পেসিং বাড়ানোর বা কমানোর জন্য ব্যবহৃত হয়, এবং outerPadding() চার্টের বাইরের অংশের প্যাডিং নিয়ন্ত্রণ করে।
barChart
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.barPadding(0.1) // বারগুলোর মধ্যে স্পেসিং
.outerPadding(0.05) // চার্টের বাইরের স্পেসিং
.width(600)
.height(300)
.dimension(dimension)
.group(group);
এখানে:
- barPadding(0.1): বারগুলোর মধ্যে 10% স্পেসিং রাখবে।
- outerPadding(0.05): চার্টের বাইরের প্রান্তের জন্য 5% স্পেসিং থাকবে।
৩. Padding কাস্টমাইজ করা
Padding কাস্টমাইজ করতে barPadding() এবং outerPadding() এর মান পরিবর্তন করতে হবে। barPadding() বারগুলোর মধ্যে স্পেসিং নির্ধারণ করে এবং outerPadding() পুরো চার্টের বাইরের স্পেসিং নির্ধারণ করে।
barChart
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.barPadding(0.2) // বারগুলোর মধ্যে 20% স্পেসিং
.outerPadding(0.1) // বাইরের প্রান্তে 10% স্পেসিং
.width(600)
.height(300)
.dimension(dimension)
.group(group);
এখানে barPadding(0.2) এবং outerPadding(0.1) বারগুলোর মধ্যে এবং বাইরের প্রান্তে স্পেসিং বাড়ানোর জন্য ব্যবহার করা হয়েছে।
৪. পূর্ণ কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Bar 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>DC.js Bar Chart Example</h1>
<div id="bar-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 80 },
{ category: "C", value: 45 },
{ category: "D", value: 60 },
{ category: "E", value: 20 },
{ category: "F", value: 90 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
const dimension = ndx.dimension(d => d.category);
const group = dimension.group().reduceSum(d => d.value);
// DC.js বার চার্ট কাস্টমাইজেশন
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(dimension)
.group(group)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.barPadding(0.2) // বারগুলোর মধ্যে স্পেসিং
.outerPadding(0.1) // বাইরের প্রান্তে স্পেসিং
.xAxisLabel("Categories")
.yAxisLabel("Values");
// চার্ট রেন্ডার
dc.renderAll();
</script>
</body>
</html>
৫. কাস্টমাইজেশন সংক্ষিপ্ত রিভিউ
barPadding(): বারগুলোর মধ্যে স্পেসিং কাস্টমাইজ করে।outerPadding(): চার্টের বাইরের প্রান্তের স্পেসিং কাস্টমাইজ করে।x.bandwidth(): বারটির প্রস্থ নির্ধারণে সহায়ক (যখনscaleBand()ব্যবহৃত হয়)।
সারাংশ
DC.js এর মাধ্যমে আপনি বার চার্টে bar width, spacing, এবং padding সহজেই কাস্টমাইজ করতে পারেন। barPadding() এবং outerPadding() ফাংশনগুলি ব্যবহার করে আপনি বারগুলোর মধ্যে এবং বাইরের স্পেসিং নিয়ন্ত্রণ করতে পারবেন। bandwidth() ব্যবহার করে বারটির প্রস্থ কাস্টমাইজ করা যায়, যা আপনার চার্টকে আরও উপযোগী এবং আকর্ষণীয় করে তোলে।
DC.js দিয়ে বার চার্ট তৈরির সময় Color Scales (রঙের স্কেল) এবং Legends (লিজেন্ড) যোগ করা একটি শক্তিশালী ফিচার, যা ডেটাকে আরও স্পষ্টভাবে উপস্থাপন করতে সাহায্য করে। এখানে আমরা DC.js দিয়ে একটি বার চার্ট তৈরি করার পর রঙের স্কেল এবং লিজেন্ড যোগ করার প্রক্রিয়া দেখাব।
১. Color Scales (রঙের স্কেল) যোগ করা
Color Scales ব্যবহার করা হয় বিভিন্ন ডেটা ভ্যালুকে আলাদা আলাদা রঙে উপস্থাপন করতে। DC.js এর মধ্যে D3.js এর scaleOrdinal বা scaleLinear স্কেল ব্যবহার করা যেতে পারে।
২. Legends (লিজেন্ড) যোগ করা
Legends চার্টের পাশে একটি বর্ণনা হিসেবে প্রদর্শিত হয়, যা ব্যবহারকারীদের সাহায্য করে রঙের অর্থ বা ডেটার মান বুঝতে।
DC.js দিয়ে Bar Chart তৈরি করা: Color Scales এবং Legends সহ
আমরা একটি Bar Chart তৈরি করবো যেখানে category অনুযায়ী বিভিন্ন রঙ প্রদান করা হবে এবং একটি লিজেন্ড যোগ করা হবে।
৩. HTML এবং JavaScript কোড
এখানে সম্পূর্ণ HTML এবং JavaScript কোড দেখানো হলো, যেখানে Color Scales এবং Legends যোগ করা হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Bar Chart with Color Scales and Legends</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 Bar Chart with Color Scales and Legends</h1>
<div id="bar-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 80 },
{ category: "C", value: 45 },
{ category: "D", value: 60 },
{ category: "E", value: 20 },
{ category: "F", value: 90 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// ক্যাটেগরি এর উপর ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
// ক্যাটেগরি অনুযায়ী গ্রুপ তৈরি
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// DC.js বার চার্ট
const barChart = dc.barChart("#bar-chart");
// রঙের স্কেল তৈরি
const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
// বার চার্ট কনফিগারেশন
barChart
.width(600) // চার্টের প্রস্থ
.height(300) // চার্টের উচ্চতা
.dimension(categoryDimension) // ডাইমেনশন নির্ধারণ
.group(categoryGroup) // গ্রুপ নির্ধারণ
.x(d3.scaleBand()) // এক্স-অক্ষের স্কেল
.xUnits(dc.units.ordinal) // ডিসক্রিট ডেটার জন্য
.xAxisLabel("Categories") // এক্স-অক্ষের লেবেল
.yAxisLabel("Values") // ওয়াই-অক্ষের লেবেল
.renderHorizontalGridLines(true) // গ্রিড লাইন যোগ করা
.colors(colorScale) // রঙের স্কেল যোগ করা
.colorAccessor(d => d.key) // রঙের অ্যাক্সেসর
.legend(dc.legend().x(500).y(10).itemHeight(13).gap(5)); // লিজেন্ড যোগ করা
// চার্ট রেন্ডার
dc.renderAll();
</script>
</body>
</html>
৪. কোডের ব্যাখ্যা
১. ডেটাসেট তৈরি:
ডেটাসেটটি এখানে দুটি প্রোপার্টি category এবং value সহ দেওয়া হয়েছে। প্রতিটি অবজেক্টে একটি ক্যাটেগরি এবং তার সাথে সম্পর্কিত একটি মান রয়েছে।
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 80 },
{ category: "C", value: 45 },
{ category: "D", value: 60 },
{ category: "E", value: 20 },
{ category: "F", value: 90 }
];
২. Crossfilter ইন্ডেক্স তৈরি:
Crossfilter ব্যবহার করে ডেটা ফিল্টার এবং গ্রুপ করার জন্য ইন্ডেক্স তৈরি করা হচ্ছে।
const ndx = crossfilter(data);
const categoryDimension = ndx.dimension(d => d.category);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
৩. রঙের স্কেল যোগ করা:
d3.scaleOrdinal(d3.schemeCategory10) স্কেল ব্যবহার করা হয়েছে, যা বিভিন্ন ক্যাটেগরির জন্য আলাদা রঙ দেয়।
const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
এটি D3.js এর অন্তর্নিহিত রঙের স্কেল যা 10টি ভিন্ন রঙ প্রদান করে, যা ক্যাটেগরি অনুযায়ী বার চার্টে আলাদা আলাদা রঙ প্রদর্শন করবে।
৪. বার চার্ট কনফিগারেশন:
colors(colorScale): বারগুলির জন্য রঙের স্কেল প্রয়োগ করা হচ্ছে।colorAccessor(d => d.key): এটি প্রতিটি ক্যাটেগরি অনুযায়ী রঙ নির্বাচন করতে সহায়ক।legend(dc.legend().x(500).y(10).itemHeight(13).gap(5)): এখানে DC.js এর লিজেন্ড ফিচার ব্যবহার করে রঙ এবং ক্যাটেগরি সম্পর্কিত একটি লিজেন্ড যোগ করা হয়েছে।
৫. ফাইনাল রেন্ডার:
dc.renderAll() ব্যবহার করে চার্টটি রেন্ডার করা হচ্ছে।
৫. চার্টের আউটপুট
এই কোডটি রান করলে, ব্রাউজারে একটি বার চার্ট প্রদর্শিত হবে। প্রতিটি বার ক্যাটেগরি অনুযায়ী রঙ দিয়ে আলাদা করা হবে এবং ক্যাটেগরি সম্পর্কিত একটি লিজেন্ড চার্টের পাশে দেখাবে।
সারাংশ
- Color Scales: DC.js এর মাধ্যমে রঙের স্কেল ব্যবহার করে বার চার্টে বিভিন্ন ক্যাটেগরি আলাদা রঙে প্রদর্শিত হবে। D3.js এর স্কেল ব্যবহার করে এই রঙগুলোর মান নির্ধারণ করা হয়।
- Legends: DC.js এর লিজেন্ড ফিচার ব্যবহার করে ক্যাটেগরি সম্পর্কিত একটি বর্ণনা যোগ করা হয়, যা ব্যবহারকারীদের জন্য আরও স্পষ্টতা প্রদান করে।
এই কোডটি আপনাকে DC.js দিয়ে বার চার্টে Color Scales এবং Legends যোগ করার পুরো প্রক্রিয়া দেখিয়েছে।
Read more
