DC.js দিয়ে আপনি ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন এবং সেই সাথে প্রতিটি চার্টের জন্য একটি Legend (লেজেন্ড) তৈরি করতে পারেন। লেজেন্ড চার্টের মানে সম্পর্কিত তথ্য দেখাতে ব্যবহৃত হয় এবং এটি ব্যবহারকারীর জন্য চার্টের বিভিন্ন সিরিজ বা গ্রুপের মধ্যে পার্থক্য স্পষ্ট করে তোলে।
এখানে আমরা DC.js ব্যবহার করে একটি চার্টে Legend (লেজেন্ড) তৈরি করার প্রক্রিয়া দেখাব।
১. প্রয়োজনীয় লাইব্রেরি যোগ করা
প্রথমে HTML ফাইলে DC.js, D3.js, এবং Crossfilter এর সিডিএন লিঙ্ক যোগ করুন:
<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">
২. ডেটাসেট তৈরি এবং Crossfilter ইন্ডেক্স
এখানে একটি সাধারণ ডেটাসেট তৈরি করা হয়েছে, যা Category এবং Value এর সাথে Date ভিত্তিক তথ্য ধারণ করবে।
const data = [
{ date: "2023-01-01", category: "A", value: 30 },
{ date: "2023-01-02", category: "B", value: 50 },
{ date: "2023-01-03", category: "A", value: 70 },
{ date: "2023-01-04", category: "B", value: 20 },
{ date: "2023-01-05", category: "A", value: 60 },
{ date: "2023-01-06", category: "B", value: 90 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
৩. ডাইমেনশন এবং গ্রুপ তৈরি
এখন আমরা Category এবং Date ভিত্তিক ডাইমেনশন এবং গ্রুপ তৈরি করব।
// তারিখের উপর ডাইমেনশন তৈরি
const dateDimension = ndx.dimension(d => d.date);
// ক্যাটেগরি অনুযায়ী গ্রুপ তৈরি
const categoryGroupA = dateDimension.group().reduceSum(d => d.category === "A" ? d.value : 0);
const categoryGroupB = dateDimension.group().reduceSum(d => d.category === "B" ? d.value : 0);
৪. DC.js Line Chart তৈরি এবং Legend যোগ করা
এখন, একটি Line Chart তৈরি করা হবে এবং লেজেন্ড যোগ করা হবে।
// DC.js Line Chart তৈরি
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(categoryGroupA, "Category A")
.stack(categoryGroupB, "Category B")
.x(d3.scaleTime()) // টাইম স্কেল
.xUnits(d3.timeDays)
.xAxisLabel("Date")
.yAxisLabel("Value")
.renderArea(true)
.elasticY(true)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(500).y(20).itemHeight(13).gap(5)) // লেজেন্ড যোগ করা
.on('pretransition', function(chart) {
chart.selectAll('path.line')
.style('stroke-width', '3px');
});
// সমস্ত চার্ট রেন্ডার করা
dc.renderAll();
এখানে, legend() ফাংশন ব্যবহার করা হয়েছে লেজেন্ড তৈরি করার জন্য। লেজেন্ডের অবস্থান, উচ্চতা, এবং গ্যাপ কাস্টমাইজ করা হয়েছে।
x(500)এবংy(20): লেজেন্ডের অবস্থান নির্ধারণ।itemHeight(13): প্রতিটি লেজেন্ড আইটেমের উচ্চতা।gap(5): লেজেন্ড আইটেমগুলির মধ্যে ব্যবধান।
৫. পূর্ণ কোড উদাহরণ
এখন আমরা একটি পূর্ণ কোড উদাহরণ দেখব যেখানে Line Chart এর জন্য লেজেন্ড তৈরি করা হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Line Chart with Legend</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 Line Chart with Legend</h1>
<div id="line-chart"></div>
<script>
const data = [
{ date: "2023-01-01", category: "A", value: 30 },
{ date: "2023-01-02", category: "B", value: 50 },
{ date: "2023-01-03", category: "A", value: 70 },
{ date: "2023-01-04", category: "B", value: 20 },
{ date: "2023-01-05", category: "A", value: 60 },
{ date: "2023-01-06", category: "B", value: 90 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// তারিখের উপর ডাইমেনশন তৈরি
const dateDimension = ndx.dimension(d => d.date);
// ক্যাটেগরি অনুযায়ী গ্রুপ তৈরি
const categoryGroupA = dateDimension.group().reduceSum(d => d.category === "A" ? d.value : 0);
const categoryGroupB = dateDimension.group().reduceSum(d => d.category === "B" ? d.value : 0);
// DC.js Line Chart তৈরি
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(categoryGroupA, "Category A")
.stack(categoryGroupB, "Category B")
.x(d3.scaleTime()) // টাইম স্কেল
.xUnits(d3.timeDays)
.xAxisLabel("Date")
.yAxisLabel("Value")
.renderArea(true)
.elasticY(true)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(500).y(20).itemHeight(13).gap(5)) // লেজেন্ড যোগ করা
.on('pretransition', function(chart) {
chart.selectAll('path.line')
.style('stroke-width', '3px');
});
// সমস্ত চার্ট রেন্ডার করা
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- Legend একটি চার্টে বিভিন্ন সিরিজ বা গ্রুপের মান বুঝতে সহায়ক।
- DC.js দিয়ে Line Chart তৈরি করার সময়, লেজেন্ডের মাধ্যমে ক্যাটেগরি A এবং B এর মধ্যে পার্থক্য স্পষ্ট করা হয়েছে।
legend()ফাংশন ব্যবহার করে লেজেন্ড কাস্টমাইজ করা হয়েছে, যেমন অবস্থান, উচ্চতা, এবং ব্যবধান।
এভাবে DC.js দিয়ে আপনি সহজেই বিভিন্ন চার্টের জন্য Legend তৈরি এবং কাস্টমাইজ করতে পারেন।
Content added By
Read more
