লাইন চার্ট এবং এর ম্যানিপুলেশন

D3.js একটি শক্তিশালী লাইব্রেরি যা ডেটাকে ভিজ্যুয়াল উপাদানে রূপান্তরিত করতে ব্যবহৃত হয়। লাইন চার্ট একটি সাধারণ কিন্তু গুরুত্বপূর্ণ ভিজ্যুয়ালাইজেশন টাইপ, যা সময় বা ধারাবাহিক ডেটার মধ্যে সম্পর্ক প্রদর্শন করতে সাহায্য করে। D3.js দিয়ে লাইন চার্ট তৈরি এবং ম্যানিপুলেশন খুবই সহজ, এবং এটি ডেটার প্রতি পয়েন্টকে একটি নির্দিষ্ট পজিশনে ম্যাপ করে গ্রাফে লাইনের মাধ্যমে সম্পর্ক দেখায়।

লাইন চার্ট তৈরি করা

লাইন চার্ট তৈরি করতে D3.js-এ সাধারণত line এবং scale ফাংশন ব্যবহার করা হয়। এর মাধ্যমে আপনি ডেটা পয়েন্টগুলির মধ্যে সংযোগ স্থাপন করতে পারেন। নিচে একটি সাধারণ লাইন চার্ট তৈরির উদাহরণ দেওয়া হলো।

১. লাইন ফাংশন তৈরি

D3.js-এ d3.line() ফাংশনটি ব্যবহৃত হয় একটি লাইন ড্র করার জন্য। এটি একটি ডেটা সিরিজের প্রতিটি পয়েন্টের জন্য একটি লাইন তৈরি করে।

উদাহরণ:

// ডেটাসেট
const data = [
  { date: new Date(2020, 0, 1), value: 100 },
  { date: new Date(2020, 1, 1), value: 200 },
  { date: new Date(2020, 2, 1), value: 150 },
  { date: new Date(2020, 3, 1), value: 250 },
  { date: new Date(2020, 4, 1), value: 300 }
];

// SVG ক্যানভাস তৈরি করা
const svg = d3.select("body").append("svg")
              .attr("width", 600)
              .attr("height", 400);

// স্কেল তৈরি
const xScale = d3.scaleTime()
                 .domain(d3.extent(data, d => d.date))
                 .range([0, 600]);

const yScale = d3.scaleLinear()
                 .domain([0, d3.max(data, d => d.value)])
                 .range([400, 0]);

// লাইন ফাংশন তৈরি
const line = d3.line()
              .x(d => xScale(d.date))
              .y(d => yScale(d.value));

// লাইন চার্ট আঁকা
svg.append("path")
   .data([data])
   .attr("class", "line")
   .attr("d", line)
   .style("fill", "none")
   .style("stroke", "steelblue")
   .style("stroke-width", 2);

এই কোডটি একটি লাইন চার্ট তৈরি করবে, যেখানে X-axis এ সময় (date) এবং Y-axis এ মান (value) থাকবে।

২. লাইনের ম্যানিপুলেশন

D3.js-এ লাইন চার্টের বিভিন্ন বৈশিষ্ট্য যেমন রঙ, স্ট্রোক, লাইন টাইপ ইত্যাদি পরিবর্তন করা যায়। পাশাপাশি, আপনি ডেটা আপডেট করলেও লাইনের গতিশীল পরিবর্তন দেখতে পারবেন।

২.১ লাইনের স্টাইল পরিবর্তন

লাইনের স্টাইল, যেমন রঙ, স্ট্রোক প্রস্থ বা স্টাইল পরিবর্তন করতে style() অথবা attr() মেথড ব্যবহার করা হয়।

svg.select(".line")
   .style("stroke", "green") // লাইনের রঙ পরিবর্তন
   .style("stroke-width", 4); // লাইনের প্রস্থ পরিবর্তন

এটি লাইনের রঙ এবং প্রস্থ পরিবর্তন করবে।

২.২ লাইনের ড্যাশ স্টাইল

লাইনের স্টাইলকে ড্যাশ লাইন করতে stroke-dasharray অ্যাট্রিবিউট ব্যবহার করা হয়।

svg.select(".line")
   .style("stroke-dasharray", "5,5"); // লাইনে ড্যাশ ইফেক্ট যোগ করা

এটি লাইনে ড্যাশ ইফেক্ট যোগ করবে, যেমন ৫ পিক্সেল লম্বা লাইন এবং ৫ পিক্সেল স্পেস।

২.৩ ডেটার আপডেটের মাধ্যমে লাইনের পরিবর্তন

ডেটা পরিবর্তিত হলে লাইনও আপডেট হতে পারে। এটি করার জন্য, transition() ফাংশন ব্যবহার করে লাইন ম্যানিপুলেট করা যায়।

// নতুন ডেটা সেট
const newData = [
  { date: new Date(2020, 0, 1), value: 120 },
  { date: new Date(2020, 1, 1), value: 220 },
  { date: new Date(2020, 2, 1), value: 180 },
  { date: new Date(2020, 3, 1), value: 260 },
  { date: new Date(2020, 4, 1), value: 310 }
];

// লাইনে ট্রানজিশন অ্যাপ্লাই করা
svg.select(".line")
   .data([newData])
   .transition()
   .duration(1000) // 1 সেকেন্ড ধরে ট্রানজিশন
   .attr("d", line); // লাইনের ডেটা আপডেট

এটি লাইনের উপর ডেটা পরিবর্তনের পর একটি অ্যানিমেশন ইফেক্ট তৈরি করবে, যা 1 সেকেন্ডে লাইনের মান পরিবর্তন করবে।

৩. লাইন চার্টে পয়েন্ট যোগ করা

লাইন চার্টে পয়েন্টগুলো প্রদর্শন করতে circle উপাদান ব্যবহার করা হয়।

svg.selectAll("circle")
   .data(data)
   .enter()
   .append("circle")
   .attr("cx", d => xScale(d.date))
   .attr("cy", d => yScale(d.value))
   .attr("r", 5)
   .style("fill", "red");

এটি প্রতিটি ডেটা পয়েন্টের উপর একটি লাল রঙের গোলাকার পয়েন্ট তৈরি করবে।

৪. লাইন চার্টে অক্ষ যোগ করা

লাইন চার্টে X এবং Y অক্ষ (axis) যোগ করতে D3.js এর axisBottom() এবং axisLeft() ফাংশন ব্যবহার করা হয়।

// X অক্ষ তৈরি
const xAxis = d3.axisBottom(xScale);

// Y অক্ষ তৈরি
const yAxis = d3.axisLeft(yScale);

// X অক্ষ SVG-তে যোগ করা
svg.append("g")
   .attr("transform", "translate(0, 400)") // X অক্ষকে নিচে স্থানান্তরিত করা
   .call(xAxis);

// Y অক্ষ SVG-তে যোগ করা
svg.append("g")
   .call(yAxis);

এটি X এবং Y অক্ষ যোগ করবে যা ডেটাকে আরও স্পষ্টভাবে ভিজ্যুয়ালাইজ করবে।

D3.js ব্যবহার করে লাইন চার্ট তৈরি এবং ম্যানিপুলেশন করা একটি শক্তিশালী কৌশল, যা ডেটার মধ্যে সম্পর্ক এবং প্রবণতা স্পষ্টভাবে প্রদর্শন করতে সহায়ক। স্কেল, লাইন ফাংশন, স্টাইলিং এবং ডেটার ডাইনামিক আপডেটের মাধ্যমে লাইনের বিভিন্ন বৈশিষ্ট্য পরিবর্তন করা সম্ভব। D3.js এর মাধ্যমে লাইনের উপর অ্যানিমেশন, পয়েন্ট যুক্ত করা, অক্ষ যোগ করা এবং অন্যান্য ম্যানিপুলেশন কার্যকরভাবে করা যায়, যা ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ এবং প্রাঞ্জল করে তোলে।

D3.js ব্যবহার করে Line Chart তৈরি করা একটি সাধারণ এবং জনপ্রিয় ভিজ্যুয়ালাইজেশন পদ্ধতি। Line Chart সাধারণত কন্টিনিউয়াস ডেটার মধ্যে সম্পর্ক বা প্রবণতা দেখাতে ব্যবহৃত হয়, যেমন সময়ের সাথে সাথে বিক্রির পরিমাণ, তাপমাত্রা পরিবর্তন ইত্যাদি।

D3.js এর মাধ্যমে একটি Line Chart তৈরি করতে, সাধারণত আপনাকে ডেটা, স্কেল, লাইন জেনারেটর এবং SVG উপাদান ব্যবহার করতে হয়। এখানে প্রতিটি পদক্ষেপ বিস্তারিতভাবে আলোচনা করা হয়েছে।

১. প্রয়োজনীয় লাইব্রেরি ইনক্লুড করা

প্রথমেই আপনাকে D3.js লাইব্রেরি আপনার HTML ফাইলে ইনক্লুড করতে হবে। আপনি CDN বা npm ব্যবহার করে এটি অন্তর্ভুক্ত করতে পারেন।

<script src="https://d3js.org/d3.v7.min.js"></script>

২. ডেটা প্রস্তুত করা

Line Chart তৈরির জন্য ডেটা একটি অ্যারে হিসেবে প্রস্তুত করতে হবে। এখানে আমরা একটি সাধারণ ডেটাসেট ব্যবহার করবো যা সময়ের সাথে সাথে কিছু পরিমাণ পরিবর্তন দেখায়।

const data = [
  { date: new Date(2020, 0, 1), value: 30 },
  { date: new Date(2020, 1, 1), value: 40 },
  { date: new Date(2020, 2, 1), value: 35 },
  { date: new Date(2020, 3, 1), value: 50 },
  { date: new Date(2020, 4, 1), value: 60 },
  { date: new Date(2020, 5, 1), value: 80 }
];

এখানে ডেটা দুটি ফিল্ড নিয়ে তৈরি:

1. date: তারিখ (যে সময়ের ভিত্তিতে চার্ট তৈরি হবে)
2. value: পরিমাণ (যে ডেটা ভ্যালু আমরা চিত্রিত করতে চাই)

৩. SVG এলিমেন্ট তৈরি করা

SVG উপাদান ব্যবহার করে চার্টের ক্যানভাস তৈরি করতে হবে। D3.js এই ক্যানভাসে ডেটা প্লট করবে।

const margin = { top: 20, right: 30, bottom: 40, left: 40 };
const width = 800 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

// SVG ক্যানভাস তৈরি
const svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

এখানে:

• margin চারপাশে স্পেস সেট করে।
• width এবং height স্কেল এবং ভিউপোর্ট সাইজ নির্ধারণ করে।
• svg ক্যানভাস তৈরি করা হয়, যেখানে আমাদের চার্ট আঁকা হবে।

৪. স্কেল তৈরি করা

স্কেল ব্যবহার করে ডেটাকে SVG ক্যানভাসের পরিসরে রূপান্তরিত করা হয়। এখানে, x অক্ষের জন্য time scale এবং y অক্ষের জন্য linear scale ব্যবহার করা হবে।

// X অক্ষের জন্য সময় স্কেল
const x = d3.scaleTime()
  .domain(d3.extent(data, d => d.date))  // ডেটার মধ্যে প্রথম এবং শেষ তারিখ বের করা
  .range([0, width]);

// Y অক্ষের জন্য লিনিয়ার স্কেল
const y = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])  // ডেটার মধ্যে সর্বোচ্চ মান বের করা
  .range([height, 0]);

এখানে:

• x স্কেল date ফিল্ডের জন্য সময়ের ভিত্তিতে স্কেল তৈরি করবে।
• y স্কেল value ফিল্ডের জন্য পরিমাণের ভিত্তিতে স্কেল তৈরি করবে।

৫. লাইন জেনারেটর তৈরি করা

D3.js-এ line() ফাংশন ব্যবহার করে একটি লাইন জেনারেটর তৈরি করা হয়, যা ডেটা পয়েন্টগুলির মধ্যে লাইন আঁকবে।

// লাইন জেনারেটর তৈরি
const line = d3.line()
  .x(d => x(d.date))  // x অক্ষের জন্য ডেটার তারিখ ব্যবহার করা
  .y(d => y(d.value));  // y অক্ষের জন্য ডেটার মান ব্যবহার করা

৬. লাইন চার্ট আঁকা

এখন svg ক্যানভাসে ডেটা আঁকতে হবে। line() ফাংশনটি ব্যবহার করে লাইন আঁকা হবে।

// লাইন আঁকা
svg.append("path")
  .data([data])
  .enter()
  .append("path")
  .attr("class", "line")
  .attr("d", line)  // লাইন জেনারেটরের আউটপুট
  .style("fill", "none")
  .style("stroke", "steelblue")
  .style("stroke-width", 2);

এখানে:

• path উপাদান দিয়ে ডেটার লাইন আঁকা হয়।
• d অ্যাট্রিবিউটটি line() ফাংশনের আউটপুট হবে, যা লাইনটিকে আঁকবে।

৭. অক্ষ (Axis) যোগ করা

লিনিয়ার এবং টাইম স্কেলগুলোর জন্য অক্ষ (axis) যোগ করা প্রয়োজন।

// X অক্ষ তৈরি
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

// Y অক্ষ তৈরি
svg.append("g")
  .call(d3.axisLeft(y));

এখানে:

• axisBottom(x) ব্যবহার করে x অক্ষ এবং axisLeft(y) ব্যবহার করে y অক্ষ তৈরি করা হচ্ছে।

৮. সম্পূর্ণ কোড

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3.js Line Chart</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 2;
    }
  </style>
</head>
<body>
  <script>
    const data = [
      { date: new Date(2020, 0, 1), value: 30 },
      { date: new Date(2020, 1, 1), value: 40 },
      { date: new Date(2020, 2, 1), value: 35 },
      { date: new Date(2020, 3, 1), value: 50 },
      { date: new Date(2020, 4, 1), value: 60 },
      { date: new Date(2020, 5, 1), value: 80 }
    ];

    const margin = { top: 20, right: 30, bottom: 40, left: 40 };
    const width = 800 - margin.left - margin.right;
    const height = 400 - margin.top - margin.bottom;

    const svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    const x = d3.scaleTime()
      .domain(d3.extent(data, d => d.date))
      .range([0, width]);

    const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .range([height, 0]);

    const line = d3.line()
      .x(d => x(d.date))
      .y(d => y(d.value));

    svg.append("path")
      .data([data])
      .enter()
      .append("path")
      .attr("class", "line")
      .attr("d", line);

    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

    svg.append("g")
      .call(d3.axisLeft(y));
  </script>
</body>
</html>

D3.js এর মাধ্যমে Line Chart তৈরি করা একটি সাধারণ এবং কার্যকর উপায় ডেটা ভিজ্যুয়ালাইজ করতে। এই প্রক্রিয়াটি ডেটা প্রস্তুতি, স্কেল সেটআপ, লেখন স্কেল এবং SVG এলিমেন্ট ব্যবহারের মাধ্যমে সম্পন্ন হয়। এটি ডেটার প্রবণতা বা সম্পর্ক সহজেই দেখানোর জন্য একটি চমৎকার টুল।

D3.js-এ Line Generator একটি গুরুত্বপূর্ণ মেথড যা একটি ডেটা সেটের উপর ভিত্তি করে লাইন ভিজ্যুয়াল তৈরি করতে ব্যবহৃত হয়। এটি সাধারণত line chart বা path chart তৈরি করতে ব্যবহৃত হয়, যেখানে একটি নির্দিষ্ট ডেটা সেটের পয়েন্টগুলির মধ্যে একটি লাইন আঁকা হয়।

Line Generator মেথডটি ডেটা পয়েন্টগুলির মধ্যে একটি গ্রাফিকাল লাইন তৈরি করে এবং এটি আপনাকে SVG path (দ্বিমাত্রিক গ্রাফিক্যাল পাথ) তৈরি করতে সহায়ক। D3.js-এ, d3.line() ফাংশনটি ব্যবহৃত হয় লাইন জেনারেট করতে।

Line Generator তৈরি করা

d3.line() মেথড

d3.line() একটি line generator ফাংশন তৈরি করে যা ডেটা পয়েন্টের উপর ভিত্তি করে একটি SVG path তৈরি করে। এই মেথডটি আপনাকে ডেটা পয়েন্টগুলির উপর ভিত্তি করে লাইন ড্র করার জন্য একটি পাথ (path) আউটপুট দেয়।

সিনট্যাক্স:

const lineGenerator = d3.line()
                        .x(function(d) { return d.x; })   // x-অক্ষের জন্য মান
                        .y(function(d) { return d.y; });  // y-অক্ষের জন্য মান

এখানে:

• .x() মেথড x-অক্ষের জন্য ডেটার মান নির্ধারণ করে।
• .y() মেথড y-অক্ষের জন্য ডেটার মান নির্ধারণ করে।

Line Generator উদাহরণ

এখানে একটি সহজ উদাহরণ দেখানো হলো যেখানে কিছু ডেটা পয়েন্টের ভিত্তিতে একটি লাইন চার্ট তৈরি করা হয়েছে।

উদাহরণ: ডেটা পয়েন্টের মাধ্যমে লাইন তৈরি

// ডেটাসেট
const data = [
    {x: 10, y: 50},
    {x: 20, y: 80},
    {x: 30, y: 100},
    {x: 40, y: 90},
    {x: 50, y: 70}
];

// SVG তৈরি করা
const svg = d3.select("body").append("svg")
              .attr("width", 600)
              .attr("height", 200);

// Line Generator তৈরি করা
const lineGenerator = d3.line()
                        .x(function(d) { return d.x * 10; })  // x-অক্ষের জন্য মান (স্কেলিং)
                        .y(function(d) { return d.y; });      // y-অক্ষের জন্য মান

// path তৈরি করা এবং লাইন আঁকা
svg.append("path")
   .data([data])                      // ডেটা পাস করা
   .attr("d", lineGenerator)          // লাইন জেনারেটর কল করা
   .attr("fill", "none")              // পূর্ণতা না থাকুক
   .attr("stroke", "blue")            // লাইন স্ট্রোকের রঙ
   .attr("stroke-width", 2);          // স্ট্রোকের প্রস্থ

এখানে:

• d3.line() লাইন জেনারেটর তৈরি করেছে।
• .x(function(d) { return d.x * 10; }) এবং .y(function(d) { return d.y; }) লাইন পয়েন্টগুলির x এবং y মান নির্ধারণ করে।
• svg.append("path") পাথ তৈরি করে এবং lineGenerator এর মাধ্যমে লাইন আঁকা হয়।

এই কোডটি 5টি ডেটা পয়েন্টের উপর ভিত্তি করে একটি সোজা লাইন আঁকবে।

Line Generator এর অতিরিক্ত কনফিগারেশন

D3.js-এ লাইন জেনারেটরের সাহায্যে আরও কিছু কনফিগারেশন করা যায়, যেমন curve এবং defined।

১. curve – লাইন সোজা না বাঁকা হবে তা নির্ধারণ করে

আপনি curve() মেথডের মাধ্যমে লাইনটিকে বাঁকা বা সোজা করতে পারেন। D3.js বেশ কয়েকটি বক্ররেখা সমর্থন করে, যেমন curveLinear, curveBasis, curveCardinal ইত্যাদি।

উদাহরণ:

const lineGenerator = d3.line()
                        .curve(d3.curveBasis)   // বক্ররেখা ব্যবহার করা
                        .x(function(d) { return d.x; })
                        .y(function(d) { return d.y; });

এখানে curve(d3.curveBasis) এর মাধ্যমে বক্ররেখা নির্ধারণ করা হয়েছে, যা একটি মসৃণ বক্র লাইন তৈরি করবে।

২. defined – undefined বা NaN মানগুলিকে ফিল্টার করা

আপনি defined() মেথডের মাধ্যমে কোন পয়েন্টগুলিকে লাইন তৈরির জন্য বৈধ বা অকার্যকর (undefined) হিসেবে চিহ্নিত করতে পারেন। এটি ডেটাতে কোন অগ্রহণযোগ্য মান (যেমন, NaN বা undefined) থাকলে সেগুলি ফিল্টার করতে সাহায্য করে।

উদাহরণ:

const lineGenerator = d3.line()
                        .defined(function(d) { return d.y >= 0; }) // শুধুমাত্র ধনাত্মক y-মান গ্রহণ
                        .x(function(d) { return d.x; })
                        .y(function(d) { return d.y; });

এখানে defined(function(d) { return d.y >= 0; }) দ্বারা শুধুমাত্র ধনাত্মক y মানগুলোকে বৈধ হিসেবে চিহ্নিত করা হয়েছে।

Line Generator-এর সাথে Scale ব্যবহার

লিনিয়ার স্কেল বা অন্যান্য স্কেল ব্যবহার করে আপনি ডেটার মানকে SVG প্যানেলে আরও ভালভাবে মানচিত্রিত করতে পারেন। উদাহরণস্বরূপ, ডেটা পয়েন্টগুলি স্কেল করে সেগুলিকে গ্রাফিক্যালভাবে উপস্থাপন করা।

const xScale = d3.scaleLinear()
                 .domain([0, d3.max(data, d => d.x)])
                 .range([0, 500]);

const yScale = d3.scaleLinear()
                 .domain([0, d3.max(data, d => d.y)])
                 .range([200, 0]);

const lineGenerator = d3.line()
                        .x(d => xScale(d.x))   // x-অক্ষ স্কেল করা
                        .y(d => yScale(d.y));  // y-অক্ষ স্কেল করা

এখানে xScale এবং yScale ডেটাকে স্কেল করে, যা লাইন তৈরিতে ব্যবহার করা হচ্ছে।

D3.js-এ Line Generator মেথড (d3.line()) একটি শক্তিশালী টুল যা ডেটা পয়েন্টগুলির উপর ভিত্তি করে লাইন তৈরি করতে ব্যবহৃত হয়। এটি আপনাকে ডেটার domain এবং range অনুযায়ী লাইন আঁকতে সহায়ক। আপনি লাইন তৈরির সময় curve এবং defined ফিচারের মাধ্যমে আরও কাস্টমাইজেশন করতে পারেন, যেমন বক্ররেখা তৈরি করা বা অগ্রহণযোগ্য মানগুলো ফিল্টার করা।

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-এ বিভিন্ন ধরনের ইন্টারপোলেশন মেথড রয়েছে:

1. curveLinear: সরল রেখা
2. curveBasis: মসৃণ বক্ররেখা
3. curveCardinal: বক্ররেখা নিয়ন্ত্রণ সহ
4. curveCatmullRom: মসৃণ কিউব কিউরভ
5. curveMonotoneX, curveMonotoneY: নির্দিষ্ট দিকের জন্য মোনোটোন ইন্টারপোলেশন

আপনি যে ধরনের ইন্টারপোলেশন ব্যবহার করবেন, তা আপনার ডেটার প্রকৃতি এবং গ্রাফের চাহিদার ওপর নির্ভর করবে।

D3.js-এ Multiple Lines এবং Interpolation Techniques ব্যবহারের মাধ্যমে আপনি ডেটাকে বিভিন্ন পদ্ধতিতে ভিজ্যুয়ালাইজ করতে পারেন। আপনি একাধিক ডেটা সেটের উপর ভিত্তি করে একাধিক লাইন আঁকতে পারেন এবং বিভিন্ন ইন্টারপোলেশন পদ্ধতি ব্যবহার করে লাইনকে মসৃণ বা সোজা করতে পারেন। এটি ডেটার ভিজ্যুয়াল রিপ্রেজেন্টেশনের যথার্থতা এবং সৌন্দর্য বৃদ্ধি করে।

D3.js ব্যবহার করে ডেটা পয়েন্ট (data points) এবং টুলটিপস (tooltips) যোগ করা একটি গুরুত্বপূর্ণ অংশ ডেটা ভিজ্যুয়ালাইজেশনের ক্ষেত্রে। ডেটা পয়েন্ট আমাদের ডেটার প্রতিটি উপাদানকে প্রদর্শন করতে সাহায্য করে এবং টুলটিপস ডেটা পয়েন্টের সঙ্গে ইন্টারঅ্যাকশন করে অতিরিক্ত তথ্য প্রদর্শন করতে সহায়ক।

ডেটা পয়েন্ট (Data Points) তৈরি করা

D3.js-এ ডেটা পয়েন্ট তৈরি করার জন্য সাধারণত enter() মেথড ব্যবহার করা হয়, যা ডেটাসেটের প্রতিটি উপাদানের জন্য DOM উপাদান তৈরি করতে সাহায্য করে। এটি বিশেষভাবে বিকল্প গ্রাফ বা চার্ট যেমন বার চার্ট, লাইন গ্রাফ ইত্যাদির জন্য প্রযোজ্য।

উদাহরণ: ডেটা পয়েন্ট (বার) তৈরি করা

// ডেটাসেট
const data = [100, 200, 150, 250, 300];

// SVG তৈরি
const svg = d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 400);

// X এবং Y স্কেল তৈরি
const xScale = d3.scaleBand()
                 .domain(d3.range(data.length))
                 .range([0, 400])
                 .padding(0.1);

const yScale = d3.scaleLinear()
                 .domain([0, d3.max(data)])
                 .range([300, 0]);

// বার চার্ট তৈরি (ডেটা পয়েন্ট তৈরি করা)
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", (d, i) => i * 60 + 50)
   .attr("y", d => 300 - d)
   .attr("width", 50)
   .attr("height", d => d)
   .style("fill", "steelblue");

এই উদাহরণে, data এর প্রতিটি মানের জন্য একটি বার তৈরি করা হয়েছে।

টুলটিপস (Tooltips) যোগ করা

টুলটিপস হল একটি ছোট পপ-আপ উইন্ডো যা ব্যবহারকারীর মাউস পয়েন্টারের কাছাকাছি প্রদর্শিত হয় এবং এটি ডেটা পয়েন্ট সম্পর্কিত অতিরিক্ত তথ্য দেখায়। D3.js-এ টুলটিপস তৈরি করতে mouseover, mousemove, এবং mouseout ইভেন্ট ব্যবহার করা হয়।

উদাহরণ: টুলটিপস তৈরি করা

// ডেটাসেট
const data = [100, 200, 150, 250, 300];

// SVG তৈরি
const svg = d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 400);

// টুলটিপের জন্য div তৈরি করা
const tooltip = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("position", "absolute")
  .style("visibility", "hidden")
  .style("background-color", "lightgray")
  .style("border", "1px solid black")
  .style("padding", "5px")
  .style("border-radius", "4px");

// X এবং Y স্কেল তৈরি
const xScale = d3.scaleBand()
                 .domain(d3.range(data.length))
                 .range([0, 400])
                 .padding(0.1);

const yScale = d3.scaleLinear()
                 .domain([0, d3.max(data)])
                 .range([300, 0]);

// বার চার্ট তৈরি এবং টুলটিপ যোগ করা
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", (d, i) => i * 60 + 50)
   .attr("y", d => 300 - d)
   .attr("width", 50)
   .attr("height", d => d)
   .style("fill", "steelblue")
   .on("mouseover", function(event, d) {
       tooltip.style("visibility", "visible")
              .text("Value: " + d); // টুলটিপে মান প্রদর্শন
   })
   .on("mousemove", function(event) {
       tooltip.style("top", (event.pageY + 5) + "px")
              .style("left", (event.pageX + 5) + "px"); // টুলটিপের পজিশন
   })
   .on("mouseout", function() {
       tooltip.style("visibility", "hidden"); // টুলটিপ হাইড করা
   });

এটি কী করে:

• mouseover ইভেন্টে টুলটিপের দৃশ্যমানতা সক্রিয় হয় এবং ডেটা পয়েন্টের মান দেখানো হয়।
• mousemove ইভেন্টে টুলটিপটি মাউসের অবস্থান অনুযায়ী চলতে থাকে।
• mouseout ইভেন্টে টুলটিপটি হাইড হয়ে যায়।

টুলটিপ কাস্টমাইজেশন

D3.js-এ টুলটিপের দৃশ্য এবং আচরণ কাস্টমাইজ করা যায়। কিছু সাধারণ কাস্টমাইজেশন পয়েন্ট হল:

• স্টাইল: টুলটিপের ব্যাকগ্রাউন্ড, বর্ডার, প্যাডিং ইত্যাদি পরিবর্তন করা।
• টেক্সট কন্টেন্ট: ডেটা পয়েন্টের বিভিন্ন অংশ (যেমন নাম, পরিমাণ) টুলটিপে দেখানো।
• অ্যানিমেশন: টুলটিপের দৃশ্যমানতার জন্য অ্যানিমেশন ব্যবহার করা (যেমন ধীরে ধীরে প্রদর্শিত হওয়া)।

উদাহরণ: টুলটিপের স্টাইল পরিবর্তন

// টুলটিপের ব্যাকগ্রাউন্ড এবং বর্ডার কাস্টমাইজেশন
tooltip.style("background-color", "#333")
       .style("color", "#fff")
       .style("border", "2px solid #fff")
       .style("padding", "10px")
       .style("border-radius", "5px")
       .style("box-shadow", "0 0 10px rgba(0, 0, 0, 0.5)");

এটি টুলটিপের ব্যাকগ্রাউন্ড রঙ, টেক্সট রঙ, বর্ডার, প্যাডিং এবং শ্যাডো কাস্টমাইজ করবে।

D3.js ব্যবহার করে ডেটা পয়েন্ট এবং টুলটিপস যোগ করা খুবই সহজ এবং শক্তিশালী একটি পদ্ধতি ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে। enter() মেথডের মাধ্যমে ডেটা পয়েন্ট তৈরি করা যায় এবং mouseover, mousemove, এবং mouseout ইভেন্ট ব্যবহার করে ইন্টারঅ্যাকটিভ টুলটিপস তৈরি করা যায়। এই টুলটিপসগুলি ডেটা পয়েন্টের সাথে সম্পর্কিত অতিরিক্ত তথ্য প্রদর্শন করতে সহায়ক। D3.js এর সাহায্যে আপনি ভিজ্যুয়ালাইজেশনটি আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করতে পারেন।