DC.js ব্যবহার করে HTML এবং JavaScript দিয়ে একটি ডেটা ভিজ্যুয়ালাইজেশন প্রজেক্ট তৈরি করা খুবই সহজ। এখানে ধাপে ধাপে একটি DC.js প্রজেক্ট চালানোর পদ্ধতি দেখানো হলো।
১. HTML ফাইল সেটআপ
HTML ফাইল তৈরি করুন এবং DC.js, D3.js, এবং Crossfilter এর জন্য সিডিএন লিংক যুক্ত করুন। এই সিডিএনগুলো চার্ট তৈরির জন্য প্রয়োজন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js প্রজেক্ট</title>
<!-- Crossfilter CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.min.js"></script>
<!-- D3.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<!-- DC.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.js"></script>
<!-- DC.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.css">
</head>
<body>
<h1>DC.js প্রজেক্ট</h1>
<div id="bar-chart"></div>
<script>
// JavaScript কোড এখানে যোগ করুন
</script>
</body>
</html>
২. JavaScript দিয়ে চার্ট তৈরি করা
JavaScript এর মাধ্যমে DC.js চার্ট তৈরি করা হয়। এই প্রজেক্টে একটি বার চার্ট (Bar Chart) তৈরি করা হবে।
ধাপ ১: ডেটাসেট তৈরি
প্রথমে একটি JSON ডেটাসেট তৈরি করুন:
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 20 },
{ category: "E", value: 60 }
];
ধাপ ২: Crossfilter সেটআপ
Crossfilter দিয়ে ডেটাসেট পরিচালনা করুন এবং ডাইমেনশন এবং গ্রুপ তৈরি করুন:
const ndx = crossfilter(data);
const dimension = ndx.dimension(d => d.category);
const group = dimension.group().reduceSum(d => d.value);
ধাপ ৩: DC.js বার চার্ট তৈরি
DC.js ব্যবহার করে একটি বার চার্ট তৈরি করুন এবং এটি কনফিগার করুন:
const barChart = dc.barChart("#bar-chart");
barChart
.width(600) // চার্টের প্রস্থ
.height(300) // চার্টের উচ্চতা
.dimension(dimension) // ডাইমেনশন সেটআপ
.group(group) // গ্রুপ সেটআপ
.x(d3.scaleBand()) // এক্স-অক্ষের স্কেল
.xUnits(dc.units.ordinal) // এক্স-অক্ষের ইউনিট
.xAxisLabel("Categories") // এক্স-অক্ষের লেবেল
.yAxisLabel("Values") // ওয়াই-অক্ষের লেবেল
.renderHorizontalGridLines(true); // গ্রিড লাইন যোগ করা
ধাপ ৪: চার্ট রেন্ডার করা
সব চার্ট রেন্ডার করতে dc.renderAll() ব্যবহার করুন:
dc.renderAll();
৩. সম্পূর্ণ HTML এবং JavaScript উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js প্রজেক্ট</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 প্রজেক্ট</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)
.xAxisLabel("Categories")
.yAxisLabel("Values")
.renderHorizontalGridLines(true);
// চার্ট রেন্ডার
dc.renderAll();
</script>
</body>
</html>
৪. প্রজেক্ট ব্রাউজারে চালানো
- HTML ফাইলটি একটি ফোল্ডারে সংরক্ষণ করুন (যেমন:
index.html)। - ফাইলটি যেকোনো ব্রাউজারে (Chrome, Firefox) ওপেন করুন।
- চার্ট সঠিকভাবে রেন্ডার হয়েছে কিনা তা দেখুন।
সারাংশ
- HTML: প্রজেক্টের জন্য একটি কন্টেইনার ডিভ তৈরি করা হয়।
- JavaScript: DC.js, D3.js, এবং Crossfilter ব্যবহার করে চার্ট তৈরি এবং কনফিগার করা হয়।
- রেন্ডার:
dc.renderAll()ফাংশন চার্ট রেন্ডার করার জন্য ব্যবহার করা হয়।
এই পদ্ধতিতে আপনি সহজেই DC.js ব্যবহার করে ডেটা-ভিজ্যুয়ালাইজেশন প্রজেক্ট চালাতে পারবেন।
Content added By
Read more
