DC.js একটি শক্তিশালী লাইব্রেরি যা D3.js এর উপর ভিত্তি করে তৈরি এবং ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়। একাধিক চার্ট (যেমন Line Chart, Bar Chart, Area Chart) একত্রে তৈরি করা যায় এবং সেগুলোর মাধ্যমে ডেটার বিভিন্ন দিক বিশ্লেষণ করা যায়।
এখানে আমরা দেখব কীভাবে Multiple Line, Bar, বা Area Chart একত্রে তৈরি করা যায়।
১. প্রয়োজনীয় লাইব্রেরি যোগ করা
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 ইন্ডেক্স
আমরা একটি সাধারণ ডেটাসেট তৈরি করব যা Date, Category এবং Value সহ থাকবে। এর মাধ্যমে বিভিন্ন চার্ট তৈরি করা যাবে।
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);
৩. ডাইমেনশন এবং গ্রুপ তৈরি
ডেটা ফিল্টার এবং গ্রুপ করার জন্য Crossfilter এর মাধ্যমে ডাইমেনশন এবং গ্রুপ তৈরি করা হবে।
// তারিখের উপর ডাইমেনশন তৈরি
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);
এখানে, categoryGroupA এবং categoryGroupB গ্রুপ তৈরি করা হয়েছে, যা category অনুসারে ডেটার যোগফল বের করবে।
৪. Multiple Line, Bar বা Area Chart একত্রে তৈরি
এখন আমরা Multiple Line, Bar, এবং Area চার্ট একত্রে তৈরি করব। সব চার্ট একই পৃষ্ঠায় রেন্ডার করা হবে।
// 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);
// DC.js Bar Chart তৈরি
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(categoryGroupA, "Category A")
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.xAxisLabel("Date")
.yAxisLabel("Value")
.renderHorizontalGridLines(true);
// DC.js Area Chart তৈরি
const areaChart = dc.areaChart("#area-chart");
areaChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(categoryGroupB, "Category B")
.x(d3.scaleTime())
.xUnits(d3.timeDays)
.xAxisLabel("Date")
.yAxisLabel("Value")
.elasticY(true)
.renderArea(true)
.renderHorizontalGridLines(true);
// সমস্ত চার্ট রেন্ডার করা
dc.renderAll();
এখানে আমরা তিনটি চার্ট তৈরি করেছি:
- Line Chart: দুইটি ক্যাটেগরি A এবং B এর জন্য একটি লাইন চার্ট।
- Bar Chart: ক্যাটেগরি A এর জন্য একটি বার চার্ট।
- Area Chart: ক্যাটেগরি B এর জন্য একটি এরিয়া চার্ট।
আমরা stack() ফাংশন ব্যবহার করে Line Chart এ দুটি ক্যাটেগরি (A এবং B) যোগ করেছি, যাতে একটি স্ট্যাকড লাইন চার্ট তৈরি হয়। Bar Chart এবং Area 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 Multiple Line, Bar, and Area Charts</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 Multiple Line, Bar, and Area Charts</h1>
<div id="line-chart"></div>
<div id="bar-chart"></div>
<div id="area-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 }
];
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);
// DC.js Bar Chart
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(categoryGroupA, "Category A")
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.xAxisLabel("Date")
.yAxisLabel("Value")
.renderHorizontalGridLines(true);
// DC.js Area Chart
const areaChart = dc.areaChart("#area-chart");
areaChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(categoryGroupB, "Category B")
.x(d3.scaleTime())
.xUnits(d3.timeDays)
.xAxisLabel("Date")
.yAxisLabel("Value")
.elasticY(true)
.renderArea(true)
.renderHorizontalGridLines(true);
// Render all charts
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- Multiple Line, Bar, and Area Charts একত্রে তৈরি করা হয়েছে।
- Line Chart এ দুটি ক্যাটেগরি (A এবং B)
stack()ফাংশনের মাধ্যমে যোগ করা হয়েছে। - Bar Chart এবং Area Chart তৈরি করা হয়েছে আলাদাভাবে।
- সমস্ত চার্ট DC.js এর
renderAll()ফাংশন ব্যবহার করে রেন্ডার করা হয়েছে।
এভাবে আপনি DC.js ব্যবহার করে একাধিক চার্ট একসঙ্গে তৈরি করতে পারেন এবং interactive data visualization তৈরি করতে পারেন।
Content added By
Read more
