DC.js ব্যবহার করে আপনার প্রথম ডেটা-ড্রিভেন প্রজেক্ট তৈরি করা সহজ। এখানে ধাপে ধাপে একটি সাধারণ DC.js প্রজেক্ট তৈরি করার পদ্ধতি দেখানো হলো।
১. পরিবেশ প্রস্তুত
প্রয়োজনীয় ফাইল যোগ করা
HTML ফাইলের <head> বা <body> অংশে DC.js, D3.js, এবং Crossfilter এর CDN লিংক যোগ করুন:
<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">
২. HTML ফাইল সেটআপ
HTML ফাইল তৈরি করে চার্ট রাখার জন্য একটি ডিভ (<div>) যোগ করুন। উদাহরণস্বরূপ:
<!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>
// JavaScript কোড এখানে যোগ করুন
</script>
</body>
</html>
৩. ডেটাসেট প্রস্তুত
ডেটা সরাসরি কোডে যুক্ত করা যায় বা একটি আলাদা ফাইল থেকে লোড করা যায়। উদাহরণস্বরূপ, আমরা সরাসরি একটি JSON ডেটাসেট ব্যবহার করব:
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 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() ফাংশন ব্যবহার করুন:
dc.renderAll();
৭. সম্পূর্ণ কোড উদাহরণ
<!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: 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)
.yAxisLabel("Value")
.xAxisLabel("Category")
.renderHorizontalGridLines(true);
// চার্ট রেন্ডার
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- DC.js দিয়ে প্রজেক্ট তৈরি সহজ এবং দ্রুত।
- প্রথম প্রজেক্টে বার চার্ট তৈরি করে শুরু করতে পারেন।
- Crossfilter ডেটা ফিল্টার ও গ্রুপিং পরিচালনা করে।
- D3.js চার্টের জন্য স্কেল এবং অক্ষ নিয়ন্ত্রণ করে।
- সবশেষে,
dc.renderAll()দিয়ে চার্ট রেন্ডার করা হয়।
আপনার প্রথম DC.js প্রজেক্ট তৈরির জন্য এই গাইডটি ব্যবহার করে শুরু করুন।
Content added By
Read more
