DC.js এর Line Chart ডেটা ভিজ্যুয়ালাইজেশনে একটি গুরুত্বপূর্ণ উপাদান। কখনও কখনও, সরাসরি ডেটা পয়েন্টগুলির মধ্যে একটি মসৃণ বা ইন্টারপোলেটেড লাইন দেখানোর প্রয়োজন হয়, বিশেষ করে যখন আপনার ডেটাসেটটি কিছুটা অনিয়মিত বা বিচ্ছিন্ন হয়। এর জন্য Interpolation এবং Smoothing Techniques ব্যবহার করা যেতে পারে।
Interpolation এবং Smoothing এর গুরুত্ব:
- Interpolation: এটি ডেটার মধ্যে "ফাঁকা" স্থান পূর্ণ করার একটি প্রক্রিয়া। একাধিক ডেটা পয়েন্টের মধ্যে মসৃণভাবে লাইন আঁকার জন্য এটি ব্যবহৃত হয়।
- Smoothing: এটি ডেটাকে মসৃণ করতে ব্যবহৃত হয়, যা ডেটার মধ্যে ছোট ছোট র্যান্ডম পরিবর্তন বা noise কমিয়ে দেয় এবং পরিষ্কার এবং সুসংগত ট্রেন্ড প্রদর্শন করে।
DC.js এর Line Chart-এ Interpolation এবং Smoothing ব্যবহার করতে D3.js এর d3.line() ফাংশন এবং বিভিন্ন ধরনের curve functions ব্যবহার করা যেতে পারে।
১. Interpolation এবং Smoothing এর জন্য Curve Types
D3.js এর d3.line() ফাংশন ব্যবহার করে, বিভিন্ন ধরনের interpolation বা curve টেকনিক ব্যবহার করা যেতে পারে:
- d3.curveLinear: সরল লিনিয়ার ইন্টারপোলেশন, পয়েন্টগুলির মধ্যে সরল রেখা আঁকবে।
- d3.curveMonotoneX: এক্স-অক্ষের বরাবর মসৃণ ইন্টারপোলেশন।
- d3.curveBasis: একটি মসৃণ, বেসিস কার্ভ যা অনেকটা একটি বেইজিয়ান বেজ কিউবের মতো দেখতে।
- d3.curveCardinal: একটি কার্ডিনাল বেজিস কার্ভ, যা বিভিন্ন পয়েন্টের মাধ্যমে একটি মসৃণ সেগমেন্ট তৈরি করে।
- d3.curveCatmullRom: কটমুল-রোম কার্ভ, যা বেশ মসৃণ এবং ক্রমাগত বক্ররেখা তৈরি করে।
২. DC.js Line Chart এ Interpolation এবং Smoothing যোগ করা
DC.js এর Line Chart তৈরি করতে এবং এতে interpolation এবং smoothing যোগ করতে নিম্নলিখিত কোড ব্যবহার করা যেতে পারে:
১. HTML এবং JavaScript Setup
<!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 Interpolation and Smoothing</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 Line Chart with Interpolation and Smoothing</h1>
<div id="line-chart"></div>
<script>
// Example dataset (Date and Value)
const data = [
{ date: "2023-01-01", value: 30 },
{ date: "2023-02-01", value: 50 },
{ date: "2023-03-01", value: 70 },
{ date: "2023-04-01", value: 40 },
{ date: "2023-05-01", value: 60 },
{ date: "2023-06-01", value: 90 },
{ date: "2023-07-01", value: 50 },
{ date: "2023-08-01", value: 80 }
];
// Crossfilter Setup
const ndx = crossfilter(data);
const dateDimension = ndx.dimension(d => new Date(d.date));
const valueGroup = dateDimension.group().reduceSum(d => d.value);
// DC.js Line Chart Setup
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(800)
.height(400)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-08-01")]))
.xUnits(d3.timeMonths) // Setting the time scale to months
.yAxisLabel("Value")
.xAxisLabel("Date")
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.elasticY(true)
.ordinalColors(["#4682B4"])
// Interpolation technique: d3.curveBasis for smoothing the line
.curve(d3.curveBasis);
// Render the chart
dc.renderAll();
</script>
</body>
</html>
৩. কোড ব্যাখ্যা
- ডেটাসেট: এখানে একটি সাধারন Date এবং Value এর সাথে ডেটাসেট তৈরি করা হয়েছে।
- Crossfilter Setup:
crossfilter()ফাংশন দিয়ে ডেটা লোড করা হয়েছে এবংdateDimensionএর মাধ্যমে date অনুযায়ী ডেটা গ্রুপ করা হয়েছে।valueGroupডেটার মানের উপর ভিত্তি করে সুম করা হয়েছে। - Line Chart Setup:
dimension(): এটি একটি ডাইমেনশন তৈরি করে যা date অনুসারে ডেটাকে গ্রুপ করবে।group(): এটি ডেটার মানগুলোর উপর sum (যোগফল) করবে।x(d3.scaleTime().domain([...])): সময়ের স্কেলে X-অক্ষের জন্য time scale সেট করা হয়েছে।curve(d3.curveBasis): এটি ডেটার মধ্যবর্তী পয়েন্টগুলির জন্য smoothing বা interpolation যোগ করে। এখানে curveBasis ব্যবহার করা হয়েছে, যা মসৃণ এবং ভাল দেখানো লাইন তৈরি করবে।
- Redraw:
dc.renderAll()ব্যবহার করা হয়েছে যাতে সমস্ত DC.js চার্ট রেন্ডার হয়।
৪. Interpolation এবং Smoothing এর অন্যান্য প্রযুক্তি
d3.curveLinear: সরল, সোজা লাইন তৈরি করে।d3.curveMonotoneX: এক্স-অক্ষের বরাবর মসৃণ লাইন তৈরি করে।d3.curveCardinal: অনেক বেশি মসৃণ, কার্ডিনাল বেসিস কার্ভ ব্যবহার করে।d3.curveCatmullRom: ক্রমাগত এবং মসৃণ বক্ররেখা তৈরি করতে ব্যবহৃত হয়।
আপনি এই কোডের মধ্যে অন্য কোনও curve টেকনিক ব্যবহার করতে পারেন, যেমন d3.curveLinear, d3.curveCardinal অথবা d3.curveCatmullRom, এবং চেক করতে পারেন যে কোনটি আপনার প্রয়োজনের জন্য সবচেয়ে ভালো কাজ করে।
সারাংশ
DC.js এর Line Chart এ interpolation এবং smoothing টেকনিক যোগ করা খুবই সহজ। D3.js এর curve ফাংশন ব্যবহার করে আপনি আপনার চার্টের লাইনগুলিকে মসৃণ এবং আরও ভালোভাবে উপস্থাপন করতে পারেন। d3.curveBasis এর মতো curve ফাংশন ডেটার মধ্যে সোজা বা ইন্টারপোলেটেড লাইন তৈরি করতে সহায়ক।
Read more
