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 এর সাহায্যে ডেটা ভিজ্যুয়ালাইজেশন প্রজেক্ট তৈরি করার জন্য একটি ভাল শুরু দেয়।
Read more
