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