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
