DC.js একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশন এবং বিশ্লেষণের জন্য ব্যবহৃত হয়। Composite Chart হল একটি বিশেষ ধরনের চার্ট, যেখানে একাধিক চার্ট একত্রে একটি গ্রাফে প্রদর্শিত হয়। এটি ডেটা সেটের বিভিন্ন দিক বিশ্লেষণ এবং তুলনা করার জন্য একটি শক্তিশালী টুল।
Composite Chart এর মধ্যে সাধারণত একাধিক চার্ট (যেমন বার চার্ট, লাইন চার্ট, ইত্যাদি) একসাথে একটানা প্রদর্শিত হয়। এই ধরনের চার্টগুলি ব্যবহারকারীদের একই সময়ে বিভিন্ন ডেটা সেটের তুলনা করার সুযোগ দেয়।
Composite Chart এর বৈশিষ্ট্য
- একাধিক চার্টের সমন্বয়: একাধিক চার্ট যেমন বার চার্ট, লাইন চার্ট, ইত্যাদি একসাথে একটিতে সংযুক্ত করা হয়।
- ডেটার বিভিন্ন দিকের তুলনা: Composite Chart এর মাধ্যমে আপনি একসাথে বিভিন্ন ধরনের ডেটার তুলনা করতে পারেন, যেমন মোট পরিমাণ, প্রবণতা, ইত্যাদি।
- ইন্টারেক্টিভিটি: আপনি যদি একটি চার্টে কোনো পরিবর্তন করেন (যেমন একটি নির্দিষ্ট ক্যাটেগরি নির্বাচন), তবে অন্যান্য চার্টও স্বয়ংক্রিয়ভাবে আপডেট হতে পারে।
- বিশ্লেষণের দক্ষতা: একাধিক ভিজ্যুয়াল উপাদান একত্রে ব্যবহার করা হয় যাতে একই সময়ে ডেটার বিভিন্ন দিক বিশ্লেষণ করা যায়।
Composite Chart তৈরির জন্য ডেটা প্রস্তুতি
DC.js এ Composite Chart তৈরি করতে হলে, প্রথমে একটি ডেটাসেট তৈরি করতে হবে যা বিভিন্ন চার্টের জন্য উপযুক্ত হবে। একটি সাধারণ ডেটাসেট উদাহরণ হতে পারে:
const data = [
{ date: "2023-12-01", value1: 30, value2: 50 },
{ date: "2023-12-02", value1: 70, value2: 80 },
{ date: "2023-12-03", value1: 90, value2: 40 },
{ date: "2023-12-04", value1: 50, value2: 60 },
{ date: "2023-12-05", value1: 60, value2: 90 }
];
এখানে, value1 এবং value2 দুটি পৃথক ডেটা সিরিজ হিসাবে ব্যবহার হবে, যা আমরা Composite Chart এ প্রদর্শন করব।
Composite Chart তৈরির ধাপ
DC.js ব্যবহার করে Composite Chart তৈরি করতে হলে, প্রথমে একাধিক চার্ট তৈরি করতে হবে এবং তারপর সেগুলোকে একত্রিত করতে হবে। নিচে একটি উদাহরণ দেখানো হলো যেখানে একটি Bar Chart এবং একটি Line Chart একত্রে প্রদর্শিত হবে।
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 Composite Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.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 Composite Chart</h1>
<div id="composite-chart"></div>
<script>
// ডেটাসেট
const data = [
{ date: "2023-12-01", value1: 30, value2: 50 },
{ date: "2023-12-02", value1: 70, value2: 80 },
{ date: "2023-12-03", value1: 90, value2: 40 },
{ date: "2023-12-04", value1: 50, value2: 60 },
{ date: "2023-12-05", value1: 60, value2: 90 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
// ডেটার ডাইমেনশন তৈরি
const dateDimension = ndx.dimension(d => new Date(d.date));
// দুইটি গ্রুপ তৈরি
const value1Group = dateDimension.group().reduceSum(d => d.value1);
const value2Group = dateDimension.group().reduceSum(d => d.value2);
// Composite Chart তৈরি
const compositeChart = dc.compositeChart("#composite-chart");
compositeChart
.width(800)
.height(400)
.dimension(dateDimension)
.group(value1Group, "Value 1") // প্রথম গ্রুপ (Value 1)
.stack(value2Group, "Value 2") // দ্বিতীয় গ্রুপ (Value 2)
.x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-05")])) // এক্স-অক্ষের স্কেল
.xAxisLabel("Date") // এক্স-অক্ষের লেবেল
.yAxisLabel("Value") // ওয়াই-অক্ষের লেবেল
.legend(dc.legend()) // লেজেন্ড যোগ
.brushOn(false) // ব্রাশিং (জুমিং) নিষ্ক্রিয়
.renderHorizontalGridLines(true) // গ্রিড লাইন
.render();
</script>
</body>
</html>
ব্যাখ্যা:
- ডেটা: ডেটা সেটে
value1এবংvalue2দুটি ভিন্ন মান রয়েছে। - ডাইমেনশন তৈরি:
dateDimensionতৈরি করা হয়েছে যা ডেটার date প্রোপার্টি থেকে তারিখের ভিত্তিতে ডেটাকে ভাগ করবে। - গ্রুপ তৈরি:
value1Groupগ্রুপে value1 এর যোগফল করা হয়েছে।value2Groupগ্রুপে value2 এর যোগফল করা হয়েছে।
- Composite Chart:
dc.compositeChart()ফাংশন দিয়ে Composite Chart তৈরি করা হয়েছে।group()দিয়ে প্রথম সিরিজ এবংstack()দিয়ে দ্বিতীয় সিরিজ যোগ করা হয়েছে। এতে দুটি ভিন্ন ভিন্ন ডেটা সিরিজ একসাথে এক গ্রাফে প্রদর্শিত হবে।x()এবংy()স্কেল কাস্টমাইজ করা হয়েছে।
Composite Chart এর সুবিধা
- একাধিক ডেটা সিরিজের তুলনা: একাধিক ডেটা সিরিজ বা মেট্রিকের তুলনা করার জন্য Composite Chart উপকারী।
- স্পষ্ট ভিজ্যুয়াল উপস্থাপনা: একসাথে বার এবং লাইন চার্টের মতো ভিজ্যুয়াল উপাদান প্রদর্শন করার মাধ্যমে ডেটা সম্পর্ক আরও স্পষ্ট হয়।
- ইন্টারঅ্যাকটিভিটি: ব্যবহারকারী এক চার্টে পরিবর্তন করলে, অন্যান্য চার্টও আপডেট হতে পারে (যেমন DC.js এর ইন্টারঅ্যাকটিভ ফিল্টারিং)।
- সহজ এবং কার্যকর বিশ্লেষণ: ডেটার বিভিন্ন দিক বিশ্লেষণ করার জন্য এটি একটি সহজ এবং কার্যকর উপায়।
সারাংশ
Composite Chart একটি অত্যন্ত কার্যকর টুল যেখানে একাধিক চার্ট একত্রে প্রদর্শিত হয়। DC.js ব্যবহার করে একাধিক গ্রুপ বা সিরিজের ডেটা Bar Chart এবং Line Chart এর মতো চার্টগুলিকে একসাথে প্রদর্শন করা সম্ভব। এটি ডেটার বিভিন্ন দিক বিশ্লেষণ এবং তুলনা করতে সহায়ক এবং ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরিতে ব্যবহৃত হয়।
Read more
