D3.js-এ Multiple Lines এবং Interpolation Techniques ব্যবহৃত হয় ডেটাকে ভিজ্যুয়ালাইজ করতে এবং গ্রাফে বিভিন্ন লাইন বা পথ আঁকতে। এটি বিশেষ করে লাইন চার্ট, পলিনোমিয়াল কিউব কিউরভ, এবং অন্যান্য গ্রাফিকাল ভিজ্যুয়ালাইজেশনে ব্যবহার করা হয় যেখানে ডেটার বিভিন্ন সিকোয়েন্সের উপর ভিত্তি করে সোজা বা মসৃণ রেখা আঁকা হয়।
Multiple Lines
Multiple lines অর্থ হল একাধিক ডেটাসেটের উপর ভিত্তি করে একাধিক লাইন গ্রাফ তৈরি করা। D3.js-এ একাধিক লাইন একসাথে আঁকার জন্য আপনি line বা lineGenerator ব্যবহার করতে পারেন এবং বিভিন্ন ডেটা সেটের জন্য বিভিন্ন লাইন তৈরি করতে পারেন।
উদাহরণ: Multiple Lines আঁকা
ধরা যাক, আমাদের কাছে দুটি ডেটাসেট আছে এবং আমরা দুটি লাইন আঁকতে চাই।
ডেটা:
const data1 = [
{ x: 10, y: 30 },
{ x: 20, y: 80 },
{ x: 30, y: 50 },
{ x: 40, y: 120 },
{ x: 50, y: 70 }
];
const data2 = [
{ x: 10, y: 60 },
{ x: 20, y: 90 },
{ x: 30, y: 40 },
{ x: 40, y: 100 },
{ x: 50, y: 50 }
];
D3.js কোড:
const svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 200);
// লাইন তৈরি করার জন্য একটি line generator
const lineGenerator = d3.line()
.x(d => d.x * 10) // x axis position
.y(d => 200 - d.y); // y axis position (reverse Y to fit SVG)
// প্রথম ডেটা সেটের জন্য লাইন আঁকা
svg.append("path")
.data([data1]) // ডেটা বাইন্ডিং
.attr("d", lineGenerator) // ডেটা অনুযায়ী path তৈরি
.attr("fill", "none")
.attr("stroke", "blue")
.attr("stroke-width", 2);
// দ্বিতীয় ডেটা সেটের জন্য লাইন আঁকা
svg.append("path")
.data([data2])
.attr("d", lineGenerator)
.attr("fill", "none")
.attr("stroke", "red")
.attr("stroke-width", 2);
এখানে:
lineGeneratorএকটি ফাংশন যা ডেটার উপর ভিত্তি করে লাইন তৈরি করে।- দুটি আলাদা ডেটাসেট (
data1এবংdata2) এর জন্য আলাদা লাইন আঁকা হচ্ছে। - প্রতিটি লাইন
pathএলিমেন্ট হিসেবে SVG তে আঁকা হচ্ছে, যেখানেdঅ্যাট্রিবিউটের মাধ্যমে লাইনের পথ (path) নির্ধারণ করা হয়েছে।
Interpolation Techniques
Interpolation হল একটি পদ্ধতি যার মাধ্যমে আপনি ডেটার মধ্যে মসৃণ এবং ক্রমাগত লাইন বা কিউরভ তৈরি করতে পারেন। D3.js বিভিন্ন ধরনের ইন্টারপোলেশন (যেমন linear, basis, cardinal) সমর্থন করে, যা লাইন বা পথের গতি বা আকৃতি পরিবর্তন করতে সাহায্য করে।
১. Linear Interpolation
Linear interpolation হল একে অপরের সাথে সোজা লাইন তৈরি করা, যেখানে ডেটার দুটি পয়েন্টের মধ্যে সরল রেখা ব্যবহার করা হয়।
উদাহরণ:
const lineGenerator = d3.line()
.x(d => d.x * 10)
.y(d => 200 - d.y)
.curve(d3.curveLinear); // লিনিয়ার ইন্টারপোলেশন
// লাইন আঁকা
svg.append("path")
.data([data1])
.attr("d", lineGenerator)
.attr("fill", "none")
.attr("stroke", "green")
.attr("stroke-width", 2);
এখানে:
curve(d3.curveLinear)ব্যবহার করে সরল (লিনিয়ার) ইন্টারপোলেশন প্রয়োগ করা হচ্ছে।
২. Basis Interpolation
Basis interpolation একটি মসৃণ এবং সোজা না হওয়া কিউরভ তৈরি করে, যা ডেটার পয়েন্টগুলোর মধ্যে বেশি গ্র্যাডিয়েন্ট এবং মসৃণভাবে আর্চড লাইন তৈরি করে।
উদাহরণ:
const lineGenerator = d3.line()
.x(d => d.x * 10)
.y(d => 200 - d.y)
.curve(d3.curveBasis); // বেসিস ইন্টারপোলেশন
// লাইন আঁকা
svg.append("path")
.data([data1])
.attr("d", lineGenerator)
.attr("fill", "none")
.attr("stroke", "purple")
.attr("stroke-width", 2);
এখানে:
curve(d3.curveBasis)ব্যবহার করে একটি মসৃণ এবং আর্চড লাইন তৈরি করা হচ্ছে।
৩. Cardinal Interpolation
Cardinal interpolation একটি বক্ররেখা তৈরি করে যা Basis এর মতো, তবে এটি প্রথম এবং শেষ পয়েন্টের জন্য আরও নিয়ন্ত্রণ প্রদান করে। এটি সাধারণত খুবই উপকারী যখন আপনি সোজা কোণ সৃষ্টি করতে চান না, তবে মসৃণ বক্ররেখার জন্য নিয়ন্ত্রণ চান।
উদাহরণ:
const lineGenerator = d3.line()
.x(d => d.x * 10)
.y(d => 200 - d.y)
.curve(d3.curveCardinal); // কার্ডিনাল ইন্টারপোলেশন
// লাইন আঁকা
svg.append("path")
.data([data1])
.attr("d", lineGenerator)
.attr("fill", "none")
.attr("stroke", "orange")
.attr("stroke-width", 2);
এখানে:
curve(d3.curveCardinal)ব্যবহার করে একটি মসৃণ এবং নিয়ন্ত্রিত বক্ররেখা তৈরি হচ্ছে।
Interpolation Types:
D3.js-এ বিভিন্ন ধরনের ইন্টারপোলেশন মেথড রয়েছে:
- curveLinear: সরল রেখা
- curveBasis: মসৃণ বক্ররেখা
- curveCardinal: বক্ররেখা নিয়ন্ত্রণ সহ
- curveCatmullRom: মসৃণ কিউব কিউরভ
- curveMonotoneX, curveMonotoneY: নির্দিষ্ট দিকের জন্য মোনোটোন ইন্টারপোলেশন
আপনি যে ধরনের ইন্টারপোলেশন ব্যবহার করবেন, তা আপনার ডেটার প্রকৃতি এবং গ্রাফের চাহিদার ওপর নির্ভর করবে।
D3.js-এ Multiple Lines এবং Interpolation Techniques ব্যবহারের মাধ্যমে আপনি ডেটাকে বিভিন্ন পদ্ধতিতে ভিজ্যুয়ালাইজ করতে পারেন। আপনি একাধিক ডেটা সেটের উপর ভিত্তি করে একাধিক লাইন আঁকতে পারেন এবং বিভিন্ন ইন্টারপোলেশন পদ্ধতি ব্যবহার করে লাইনকে মসৃণ বা সোজা করতে পারেন। এটি ডেটার ভিজ্যুয়াল রিপ্রেজেন্টেশনের যথার্থতা এবং সৌন্দর্য বৃদ্ধি করে।
