DC.js একটি শক্তিশালী লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশনে সহজতা এবং ইন্টারেক্টিভ ফিচার প্রদান করে। DC.js দিয়ে Line Chart এবং Series Chart তৈরি করা সহজ এবং কার্যকর। এখানে Line Chart এবং Series 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">
২. Line Chart তৈরি
Line Chart সাধারণত টাইম সিরিজ ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়, যেখানে সময়ের সাথে ডেটা পরিবর্তন দেখানো হয়।
ডেটাসেট উদাহরণ
এখানে একটি ডেটাসেট ব্যবহার করা হয়েছে, যেখানে সময় (date) এবং মান (value) রয়েছে:
const data = [
{ date: "2023-12-01", value: 30 },
{ date: "2023-12-02", value: 50 },
{ date: "2023-12-03", value: 70 },
{ date: "2023-12-04", value: 20 },
{ date: "2023-12-05", value: 60 }
];
Line Chart কোড
const ndx = crossfilter(data);
// date এর উপর ডাইমেনশন তৈরি
const dateDimension = ndx.dimension(d => d.date);
// value এর উপর গ্রুপ তৈরি
const valueGroup = dateDimension.group().reduceSum(d => d.value);
// Line Chart তৈরি
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-05")])) // টাইম স্কেল ব্যবহার
.xUnits(d3.timeDays) // টাইম ইউনিট নির্ধারণ
.yAxisLabel("Value")
.xAxisLabel("Date")
.render();
HTML কোড
<div id="line-chart"></div>
৩. Series Chart তৈরি
Series Chart তৈরি করতে মূলত lineChart অথবা barChart এর সাথে একাধিক ডেটা সিরিজ যোগ করা হয়। এটি একটি পদ্ধতি যেখানে একাধিক ডেটা সিরিজের মধ্যে তুলনা করা যায়।
ডেটাসেট উদাহরণ (Multiple Series)
এখানে দুটি ভিন্ন সিরিজের ডেটা রয়েছে (সিরিজ ১ এবং সিরিজ ২):
const data = [
{ date: "2023-12-01", series1: 30, series2: 20 },
{ date: "2023-12-02", series1: 50, series2: 40 },
{ date: "2023-12-03", series1: 70, series2: 60 },
{ date: "2023-12-04", series1: 20, series2: 30 },
{ date: "2023-12-05", series1: 60, series2: 50 }
];
Series Chart কোড
const ndx = crossfilter(data);
// date এর উপর ডাইমেনশন তৈরি
const dateDimension = ndx.dimension(d => d.date);
// series1 এবং series2 এর জন্য আলাদা গ্রুপ তৈরি
const series1Group = dateDimension.group().reduceSum(d => d.series1);
const series2Group = dateDimension.group().reduceSum(d => d.series2);
// Line Chart (Multiple Series)
const seriesChart = dc.lineChart("#series-chart");
seriesChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(series1Group, "Series 1") // প্রথম সিরিজ
.stack(series2Group, "Series 2") // দ্বিতীয় সিরিজ
.x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-05")]))
.xUnits(d3.timeDays)
.yAxisLabel("Value")
.xAxisLabel("Date")
.legend(dc.legend()) // লেজেন্ড যোগ করা
.render();
HTML কোড
<div id="series-chart"></div>
৪. সার্বিক কোড উদাহরণ
<!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 and Series Chart 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 Line and Series Chart Example</h1>
<div id="line-chart"></div>
<div id="series-chart"></div>
<script>
// Line Chart ডেটাসেট
const data = [
{ date: "2023-12-01", value: 30 },
{ date: "2023-12-02", value: 50 },
{ date: "2023-12-03", value: 70 },
{ date: "2023-12-04", value: 20 },
{ date: "2023-12-05", value: 60 }
];
const ndx = crossfilter(data);
const dateDimension = ndx.dimension(d => d.date);
const valueGroup = dateDimension.group().reduceSum(d => d.value);
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-05")]))
.xUnits(d3.timeDays)
.yAxisLabel("Value")
.xAxisLabel("Date")
.render();
// Series Chart ডেটাসেট
const multiSeriesData = [
{ date: "2023-12-01", series1: 30, series2: 20 },
{ date: "2023-12-02", series1: 50, series2: 40 },
{ date: "2023-12-03", series1: 70, series2: 60 },
{ date: "2023-12-04", series1: 20, series2: 30 },
{ date: "2023-12-05", series1: 60, series2: 50 }
];
const ndx2 = crossfilter(multiSeriesData);
const dateDimension2 = ndx2.dimension(d => d.date);
const series1Group = dateDimension2.group().reduceSum(d => d.series1);
const series2Group = dateDimension2.group().reduceSum(d => d.series2);
const seriesChart = dc.lineChart("#series-chart");
seriesChart
.width(600)
.height(300)
.dimension(dateDimension2)
.group(series1Group, "Series 1")
.stack(series2Group, "Series 2")
.x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-05")]))
.xUnits(d3.timeDays)
.yAxisLabel("Value")
.xAxisLabel("Date")
.legend(dc.legend())
.render();
</script>
</body>
</html>
সারাংশ
- Line Chart তৈরি করতে x অক্ষে টাইম সিরিজ ডেটা এবং y অক্ষে মান দিয়ে dc.lineChart() ফাংশন ব্যবহার করা হয়।
- Series Chart তৈরি করতে একাধিক ডেটা সিরিজের তুলনা করা যায়, যা
stack()ফাংশন দিয়ে করা হয়। - DC.js দিয়ে ইন্টারেক্টিভ এবং ডাইনামিক চার্ট তৈরি করা সহজ, এবং D3.js এর মাধ্যমে আরও কাস্টমাইজেশন করা যায়।
Content added By
