DC.js একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি যা D3.js এবং Crossfilter এর উপর ভিত্তি করে তৈরি, এবং এটি ডেটা ভিজ্যুয়ালাইজেশন তৈরিতে অত্যন্ত কার্যকর। এই গাইডে, আমরা Color Scale এবং Legends যোগ করার প্রক্রিয়া দেখব, যা DC.js এর মাধ্যমে চার্টে ডেটা ভিজ্যুয়ালাইজেশনকে আরও তথ্যপূর্ণ এবং ইন্টারঅ্যাক্টিভ করে তোলে।
১. Color Scale যোগ করা
Color Scale ব্যবহার করে আমরা ডেটার মানের উপর ভিত্তি করে বিভিন্ন রঙ প্রদান করতে পারি। এটি সাধারণত ডেটার মানের বিস্তার এবং তার প্রেক্ষিতে একটি রঙের পরিসর তৈরি করতে ব্যবহৃত হয়।
১.১ Color Scale সেটআপ
Color Scale সেটআপ করতে আমরা d3.scaleSequential() বা d3.scaleLinear() ব্যবহার করতে পারি। নিচে একটি উদাহরণ দেখানো হলো।
উদাহরণ: Pie Chart এ Color Scale যোগ করা
প্রথমে একটি Pie Chart তৈরি করি এবং সেটিতে Color Scale যোগ করি।
১.২ 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 Color Scale Example</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 Color Scale Example</h1>
<div id="pie-chart"></div>
<script>
// JavaScript কোড এখানে হবে
</script>
</body>
</html>
১.৩ ডেটাসেট তৈরি
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 20 },
{ category: "D", value: 70 }
];
১.৪ DC.js Pie Chart তৈরি এবং Color Scale যোগ করা
const ndx = crossfilter(data);
const dimension = ndx.dimension(d => d.category);
const group = dimension.group().reduceSum(d => d.value);
const pieChart = dc.pieChart("#pie-chart");
pieChart
.width(400)
.height(300)
.dimension(dimension)
.group(group)
.radius(100)
.label(d => d.key + ": " + d.value)
.colorScale(d3.scaleSequential(d3.interpolateViridis).domain([0, 100])) // Color Scale যোগ করা
.render();
এখানে, colorScale(d3.scaleSequential(d3.interpolateViridis).domain([0, 100])) দিয়ে একটি color scale তৈরি করা হয়েছে, যা ডেটার মানের উপর ভিত্তি করে স্লাইসের রঙ পরিবর্তন করবে।
২. Legend যোগ করা
Legend একটি ছোট অংশ যা চার্টের পাশে রঙ এবং তার মান দেখায়। এটি চার্টের রঙের মান বুঝতে সহায়ক হয়, বিশেষত যখন আপনি Color Scale ব্যবহার করেন।
উদাহরণ: Pie Chart এ Legend যোগ করা
প্রথমে একটি Pie Chart তৈরি করি এবং সেটিতে Legend যোগ করি।
২.১ HTML ফাইল সেটআপ (উপরে দেখানো হয়েছে)
২.২ ডেটাসেট এবং Pie Chart তৈরি
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 20 },
{ category: "D", value: 70 }
];
const ndx = crossfilter(data);
const dimension = ndx.dimension(d => d.category);
const group = dimension.group().reduceSum(d => d.value);
const pieChart = dc.pieChart("#pie-chart");
pieChart
.width(400)
.height(300)
.dimension(dimension)
.group(group)
.radius(100)
.label(d => d.key + ": " + d.value)
.colorScale(d3.scaleSequential(d3.interpolateViridis).domain([0, 100]))
.legend(dc.legend().x(350).y(50).itemHeight(13).gap(5)) // Legend যোগ করা
.render();
এখানে legend(dc.legend().x(350).y(50).itemHeight(13).gap(5)) দিয়ে Legend যোগ করা হয়েছে। এটি Pie Chart এর পাশে Legend প্রদর্শন করবে, যেখানে প্রতিটি স্লাইসের রঙ এবং মান থাকবে।
৩. Bar Chart এ Color Scale এবং Legend যোগ করা
Bar Chart এও Color Scale এবং Legend যোগ করা যায়। নিচে একটি উদাহরণ দেয়া হল।
৩.১ 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 Bar Chart Color Scale</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 Scale and Legend</h1>
<div id="bar-chart"></div>
<script>
// JavaScript কোড এখানে হবে
</script>
</body>
</html>
৩.২ ডেটাসেট তৈরি
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 20 },
{ category: "D", value: 70 }
];
৩.৩ DC.js Bar Chart তৈরি এবং Color Scale ও Legend যোগ করা
const ndx = crossfilter(data);
const dimension = ndx.dimension(d => d.category);
const group = dimension.group().reduceSum(d => d.value);
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(dimension)
.group(group)
.x(d3.scaleBand().domain(data.map(d => d.category)))
.xUnits(dc.units.ordinal)
.barPadding(0.1)
.outerPadding(0.05)
.label(d => d.value)
.colorScale(d3.scaleSequential(d3.interpolateCool).domain([0, 100])) // Color Scale যোগ করা
.legend(dc.legend().x(510).y(50).itemHeight(13).gap(5)) // Legend যোগ করা
.render();
এখানে, colorScale(d3.scaleSequential(d3.interpolateCool).domain([0, 100])) ব্যবহার করে Color Scale যোগ করা হয়েছে এবং legend(dc.legend()) দিয়ে Legend যুক্ত করা হয়েছে।
সারাংশ
- Color Scale: ডেটার মান অনুযায়ী বিভিন্ন রঙের স্কেল তৈরি করা হয়, যা Pie Chart, Bar Chart, এবং অন্যান্য ভিজ্যুয়ালাইজেশনকে আরো তথ্যপূর্ণ করে তোলে।
- Legend: ডেটার রঙের মান দেখানোর জন্য legends ব্যবহার করা হয়, যা ব্যবহারকারীকে রঙের অর্থ বুঝতে সাহায্য করে।
এভাবে, DC.js ব্যবহার করে Color Scale এবং Legend সহজেই যোগ করা যায় এবং ডেটা ভিজ্যুয়ালাইজেশন আরও স্পষ্ট এবং অর্থপূর্ণ করা যায়।
Read more
