মাল্টি-সিরিজ চার্ট এবং গ্রিড লাইন

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

১. মাল্টি-সিরিজ চার্ট কি?

মাল্টি-সিরিজ চার্ট হলো এমন একটি চার্ট যা একাধিক ডেটা সিরিজ বা কোলামকে একত্রে প্রদর্শন করে। সাধারণত লাইন চার্ট বা বার চার্টে একাধিক সিরিজ প্রদর্শন করতে দেখা যায়। এতে প্রতিটি সিরিজের জন্য আলাদা আলাদা লাইন বা বার ব্যবহৃত হয়, যাতে তুলনা করা সহজ হয়।

উদাহরণ:

ধরা যাক, আপনার কাছে দুটি সিরিজের ডেটা আছে—একটি সিরিজ হলো বিক্রির পরিমাণ এবং অন্যটি হলো লাভ। আপনি এই দুটি সিরিজের উপর একটি মাল্টি-সিরিজ লাইন চার্ট তৈরি করতে পারেন।

২. মাল্টি-সিরিজ লাইন চার্ট তৈরি করা

এখন, আমরা একটি মাল্টি-সিরিজ লাইন চার্ট তৈরি করব যেখানে দুটি ভিন্ন সিরিজের ডেটা থাকবে: Sales (বিক্রয়) এবং Profit (লাভ)।

উদাহরণ: মাল্টি-সিরিজ লাইন চার্ট

// ডেটা তৈরি করা
const data = [
  { year: 2010, sales: 200, profit: 50 },
  { year: 2011, sales: 300, profit: 80 },
  { year: 2012, sales: 400, profit: 120 },
  { year: 2013, sales: 500, profit: 150 },
  { year: 2014, sales: 600, profit: 200 }
];

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

// X এবং Y স্কেল তৈরি করা
const x = d3.scaleLinear()
            .domain([2010, 2014])
            .range([0, width]);

const y = d3.scaleLinear()
            .domain([0, 650])
            .range([height, 0]);

// লাইন জেনারেটর তৈরি করা
const lineSales = d3.line()
                    .x(d => x(d.year))
                    .y(d => y(d.sales));

const lineProfit = d3.line()
                     .x(d => x(d.year))
                     .y(d => y(d.profit));

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

svg.append("path")
   .data([data])
   .attr("d", lineProfit)
   .attr("fill", "none")
   .attr("stroke", "green")
   .attr("stroke-width", 2);

// X এবং Y অক্ষের জন্য ট্যাগ এবং গ্রিড লাইন যোগ করা
svg.append("g")
   .attr("transform", "translate(0," + height + ")")
   .call(d3.axisBottom(x));

svg.append("g")
   .call(d3.axisLeft(y));

// গ্রিড লাইন যোগ করা
const gridLines = svg.append("g").attr("class", "grid");

gridLines.append("g")
          .attr("class", "x-axis-grid")
          .call(d3.axisBottom(x)
                .ticks(5)
                .tickSize(-height)
                .tickFormat("")
          );

gridLines.append("g")
          .attr("class", "y-axis-grid")
          .call(d3.axisLeft(y)
                .ticks(5)
                .tickSize(-width)
                .tickFormat("")
          );

এখানে:

• দুটি ভিন্ন লাইন তৈরি করা হয়েছে: বিক্রয় (Sales) এবং লাভ (Profit)।
• d3.line() মেথড ব্যবহার করে আমরা প্রতিটি সিরিজের জন্য লাইন জেনারেটর তৈরি করেছি।
• গ্রিড লাইন তৈরি করার জন্য d3.axisBottom() এবং d3.axisLeft() ব্যবহার করা হয়েছে, যা x-axis এবং y-axis তে গ্রিড লাইন যোগ করেছে।

৩. গ্রিড লাইন কী?

গ্রিড লাইন হলো এমন লাইন যা চার্টের ভিতরে রেখা হিসেবে প্রদর্শিত হয়, এবং তা আপনার ডেটার তুলনা করতে সহায়তা করে। গ্রিড লাইন সাধারণত অক্ষের প্রতি বরাবর চলে এবং এটি ডেটার সঠিক মান চিহ্নিত করতে সাহায্য করে। গ্রিড লাইন একাধিক সিরিজের চার্টে ডেটার তুলনা করা সহজ করে তোলে।

গ্রিড লাইন যোগ করার সুবিধা:

• তুলনা সহজ করে: একাধিক সিরিজ থাকলে গ্রিড লাইন ডেটার মধ্যে সঠিক তুলনা করতে সহায়তা করে।
• চোখের জন্য পরিষ্কার: গ্রিড লাইন চার্টকে আরো স্পষ্ট এবং সুসংহত করে।

৪. মাল্টি-সিরিজ বার চার্ট তৈরি করা

এখন আমরা একটি মাল্টি-সিরিজ বার চার্ট তৈরি করব, যেখানে দুইটি ভিন্ন সিরিজ থাকবে—Sales এবং Profit।

উদাহরণ: মাল্টি-সিরিজ বার চার্ট

// ডেটা তৈরি করা
const data = [
  { year: 2010, sales: 200, profit: 50 },
  { year: 2011, sales: 300, profit: 80 },
  { year: 2012, sales: 400, profit: 120 },
  { year: 2013, sales: 500, profit: 150 },
  { year: 2014, sales: 600, profit: 200 }
];

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

// X এবং Y স্কেল তৈরি করা
const x = d3.scaleBand()
            .domain(data.map(d => d.year))
            .range([0, width])
            .padding(0.2);

const y = d3.scaleLinear()
            .domain([0, 650])
            .range([height, 0]);

// Sales এর বার তৈরি করা
svg.selectAll(".bar-sales")
   .data(data)
   .enter()
   .append("rect")
   .attr("class", "bar-sales")
   .attr("x", d => x(d.year))
   .attr("y", d => y(d.sales))
   .attr("width", x.bandwidth() / 2)
   .attr("height", d => height - y(d.sales))
   .attr("fill", "blue");

// Profit এর বার তৈরি করা
svg.selectAll(".bar-profit")
   .data(data)
   .enter()
   .append("rect")
   .attr("class", "bar-profit")
   .attr("x", d => x(d.year) + x.bandwidth() / 2)
   .attr("y", d => y(d.profit))
   .attr("width", x.bandwidth() / 2)
   .attr("height", d => height - y(d.profit))
   .attr("fill", "green");

// X এবং Y অক্ষ যোগ করা
svg.append("g")
   .attr("transform", "translate(0," + height + ")")
   .call(d3.axisBottom(x));

svg.append("g")
   .call(d3.axisLeft(y));

// গ্রিড লাইন যোগ করা
const gridLines = svg.append("g").attr("class", "grid");

gridLines.append("g")
          .attr("class", "x-axis-grid")
          .call(d3.axisBottom(x)
                .ticks(5)
                .tickSize(-height)
                .tickFormat("")
          );

gridLines.append("g")
          .attr("class", "y-axis-grid")
          .call(d3.axisLeft(y)
                .ticks(5)
                .tickSize(-width)
                .tickFormat("")
          );

এখানে:

• দুটি ভিন্ন বার তৈরি করা হয়েছে: Sales এবং Profit।
• গ্রিড লাইন যোগ করা হয়েছে, যা তুলনা সহজ করে দেয় এবং ডেটার মধ্যে স্পষ্টতা আনতে সহায়ক হয়।

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

সঠিকতা এবং সুস্পষ্টতা নিশ্চিত করে। D3.js-এ মাল্টি-সিরিজ লাইন চার্ট, বার চার্ট, এবং এরিয়া চার্ট তৈরি করা সম্ভব, যা ডেটাকে আরও কার্যকরভাবে উপস্থাপন করতে সাহায্য করে।

D3.js ব্যবহার করে Multi-series Line Chart এবং Multi-series Bar Chart তৈরি করা সম্ভব, যেখানে একাধিক ডেটা সিরিজ বা ক্যাটেগরি উপস্থাপন করা হয়। এই ধরনের চার্ট বিভিন্ন ডেটা পয়েন্টের তুলনা করার জন্য খুবই উপকারী।

এখানে আমরা দুইটি উদাহরণ দেখব:

• Multi-series Line Chart: যেখানে একাধিক লাইন গ্রাফ ব্যবহার করে বিভিন্ন ডেটা সিরিজ প্রদর্শন করা হয়।
• Multi-series Bar Chart: যেখানে একাধিক বার সিরিজ দিয়ে ডেটা তুলনা করা হয়।

১. Multi-series Line Chart

Multi-series Line Chart-এ একাধিক লাইন গ্রাফ থাকবে, যেখানে প্রতিটি সিরিজের জন্য আলাদা রং এবং ডেটা পয়েন্ট থাকবে। এটি সময় বা অন্যান্য ভেরিয়েবলের উপর একাধিক ডেটা সিরিজের পরিবর্তন দেখানোর জন্য উপযুক্ত।

উদাহরণ: Multi-series Line Chart

HTML ফাইল:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-series Line Chart with D3.js</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <h1>Multi-series Line Chart with D3.js</h1>
    <div id="chart"></div>
    <script src="multiSeriesLineChart.js"></script>
</body>
</html>

JavaScript ফাইল (multiSeriesLineChart.js):

// ডেটাসেট (Multiple series)
const data = [
    { year: 2000, series1: 30, series2: 40 },
    { year: 2001, series1: 50, series2: 60 },
    { year: 2002, series1: 70, series2: 80 },
    { year: 2003, series1: 90, series2: 100 },
    { year: 2004, series1: 110, series2: 120 }
];

// SVG ক্যানভাস তৈরি
const width = 500, height = 300;
const margin = { top: 20, right: 30, bottom: 40, left: 40 };

const svg = d3.select("#chart")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

// X এবং Y স্কেল
const x = d3.scaleLinear()
    .domain([2000, 2004]) // ডেটার রেঞ্জ
    .range([margin.left, width - margin.right]);

const y = d3.scaleLinear()
    .domain([0, 130]) // ডেটার রেঞ্জ
    .range([height - margin.bottom, margin.top]);

// লাইন জেনারেটর
const line = d3.line()
    .x(d => x(d.year))
    .y(d => y(d.series1));

const line2 = d3.line()
    .x(d => x(d.year))
    .y(d => y(d.series2));

// X এবং Y অক্ষ তৈরি
svg.append("g")
    .selectAll(".x-axis")
    .data([data])
    .enter()
    .append("g")
    .attr("class", "x-axis")
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x));

svg.append("g")
    .selectAll(".y-axis")
    .data([data])
    .enter()
    .append("g")
    .attr("class", "y-axis")
    .attr("transform", `translate(${margin.left}, 0)`)
    .call(d3.axisLeft(y));

// লাইন ১ এবং লাইন ২ আঁকা
svg.append("path")
    .data([data])
    .attr("class", "line")
    .attr("d", line)
    .style("fill", "none")
    .style("stroke", "blue")
    .style("stroke-width", 2);

svg.append("path")
    .data([data])
    .attr("class", "line")
    .attr("d", line2)
    .style("fill", "none")
    .style("stroke", "orange")
    .style("stroke-width", 2);

ব্যাখ্যা:

• এখানে দুটি ডেটা সিরিজ রয়েছে (series1 এবং series2)।
• line এবং line2 জেনারেটর দুটি আলাদা আলাদা লাইন তৈরি করছে।
• x স্কেল বছরের জন্য এবং y স্কেল ডেটা সিরিজের জন্য ব্যবহার করা হয়েছে।
• দুটি আলাদা লাইন রঙ (নীল এবং কমলা) দিয়ে প্রদর্শিত হচ্ছে।

২. Multi-series Bar Chart

Multi-series Bar Chart-এ একাধিক বার সিরিজ থাকবে এবং এই সিরিজগুলো সাধারণত পাশে পাশে প্রদর্শিত হয়। এটি তুলনামূলকভাবে ডেটা সিরিজের মধ্যে পার্থক্য দেখানোর জন্য ব্যবহৃত হয়।

উদাহরণ: Multi-series Bar Chart

JavaScript ফাইল (multiSeriesBarChart.js):

// ডেটাসেট (Multiple series)
const data = [
    { year: 2000, series1: 30, series2: 40 },
    { year: 2001, series1: 50, series2: 60 },
    { year: 2002, series1: 70, series2: 80 },
    { year: 2003, series1: 90, series2: 100 },
    { year: 2004, series1: 110, series2: 120 }
];

// SVG ক্যানভাস তৈরি
const width = 500, height = 300;
const margin = { top: 20, right: 30, bottom: 40, left: 40 };

const svg = d3.select("#chart")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

// X এবং Y স্কেল
const x0 = d3.scaleBand()
    .domain(data.map(d => d.year))
    .range([margin.left, width - margin.right])
    .padding(0.1);

const x1 = d3.scaleBand()
    .domain(["series1", "series2"])
    .range([0, x0.bandwidth()])
    .padding(0.05);

const y = d3.scaleLinear()
    .domain([0, 130]) // ডেটার রেঞ্জ
    .range([height - margin.bottom, margin.top]);

// X এবং Y অক্ষ তৈরি
svg.append("g")
    .selectAll(".x-axis")
    .data([data])
    .enter()
    .append("g")
    .attr("class", "x-axis")
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x0));

svg.append("g")
    .selectAll(".y-axis")
    .data([data])
    .enter()
    .append("g")
    .attr("class", "y-axis")
    .attr("transform", `translate(${margin.left}, 0)`)
    .call(d3.axisLeft(y));

// বার চার্ট তৈরি
svg.append("g")
    .selectAll("g")
    .data(data)
    .enter()
    .append("g")
    .attr("transform", d => `translate(${x0(d.year)}, 0)`)
    .selectAll("rect")
    .data(d => [d.series1, d.series2])
    .enter()
    .append("rect")
    .attr("x", (d, i) => x1(i === 0 ? "series1" : "series2"))
    .attr("y", d => y(d))
    .attr("width", x1.bandwidth())
    .attr("height", d => height - margin.bottom - y(d))
    .style("fill", (d, i) => i === 0 ? "steelblue" : "orange");

ব্যাখ্যা:

• এখানে আমরা দুটি সিরিজের বার চার্ট তৈরি করছি (series1 এবং series2)।
• x0 স্কেল বছরের জন্য এবং x1 স্কেল সিরিজের জন্য ব্যবহৃত হচ্ছে।
• bandwidth() মেথড ব্যবহার করে বারগুলোর প্রস্থ এবং তাদের স্থান নির্ধারণ করা হয়েছে।
• দুটি সিরিজের জন্য আলাদা রং (নীল এবং কমলা) ব্যবহার করা হয়েছে।

Multi-series Line Chart এবং Multi-series Bar Chart তৈরি করতে D3.js-এর স্কেল, ডেটা বাইন্ডিং, এবং আর্কিটেকচারাল কৌশল ব্যবহার করা হয়।

• Line Chart-এ একাধিক লাইন দিয়ে সময় বা অন্যান্য ভেরিয়েবলের উপর বিভিন্ন ডেটা সিরিজ দেখানো হয়।
• Bar Chart-এ একাধিক বার সিরিজ ব্যবহার করে ডেটা তুলনা করা হয়, যেখানে প্রতিটি সিরিজ একে অপরের পাশে প্রদর্শিত হয়। D3.js এই ধরনের চার্ট তৈরির জন্য অত্যন্ত নমনীয় এবং কাস্টমাইজেবল।

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

১. গ্রিড লাইন তৈরি

গ্রিড লাইন সাধারণত axes-এর সাথে সোজা লাইনে প্রদর্শিত হয় এবং ডেটা পয়েন্টগুলোকে পরিমাপ করতে সাহায্য করে। D3.js-এ scale এবং axis মেথড ব্যবহার করে গ্রিড লাইন তৈরি করা সম্ভব।

১.১ গ্রিড লাইন তৈরি করার জন্য কোড

// ডেটা এবং SVG এলিমেন্ট
const data = [30, 50, 70, 90, 120, 150, 200];

// SVG এলিমেন্ট তৈরি
const svg = d3.select("body").append("svg")
              .attr("width", 500)
              .attr("height", 300);

// স্কেল এবং অ্যাক্সিস তৈরি
const xScale = d3.scaleLinear()
                 .domain([0, d3.max(data)])
                 .range([0, 400]);

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

// গ্রিড লাইন তৈরি করা
const xAxisGrid = d3.axisBottom(xScale)
                    .ticks(5)
                    .tickSize(-250) // গ্রিড লাইন গুলো কতটা লম্বা হবে
                    .tickFormat(""); // টিক মার্কের টেক্সট ফরম্যাটিং

const yAxisGrid = d3.axisLeft(yScale)
                    .ticks(5)
                    .tickSize(-400) // গ্রিড লাইন গুলো কতটা লম্বা হবে
                    .tickFormat(""); // টিক মার্কের টেক্সট ফরম্যাটিং

// X-axis গ্রিড লাইন আঁকা
svg.append("g")
   .attr("transform", "translate(50, 250)")
   .call(xAxisGrid);

// Y-axis গ্রিড লাইন আঁকা
svg.append("g")
   .attr("transform", "translate(50, 0)")
   .call(yAxisGrid);

এখানে, tickSize() মেথড ব্যবহার করে গ্রিড লাইনগুলোর দৈর্ঘ্য নির্ধারণ করা হয়েছে এবং tickFormat("") দিয়ে টিক মার্কের পাশে কোনো টেক্সট না দেখানোর ব্যবস্থা করা হয়েছে। গ্রিড লাইনগুলি X-axis এবং Y-axis এর সাথে সোজা এবং সমান্তরালভাবে প্রদর্শিত হয়।

২. গাইডলাইন তৈরি

গাইডলাইন সাধারণত অক্ষের সাথে সম্পর্কিত একটি সাহায্যকারী লাইন হিসেবে ব্যবহৃত হয়, যা ডেটার প্রদর্শনী আরও স্পষ্ট করে। গাইডলাইনগুলি অ্যানিমেশন বা ডেটার উপর নির্ভরশীল হতে পারে।

২.১ গাইডলাইন তৈরি করার জন্য কোড

// ডেটা এবং SVG এলিমেন্ট
const data = [30, 50, 70, 90, 120, 150, 200];

// SVG এলিমেন্ট তৈরি
const svg = d3.select("body").append("svg")
              .attr("width", 500)
              .attr("height", 300);

// স্কেল এবং অ্যাক্সিস তৈরি
const xScale = d3.scaleLinear()
                 .domain([0, d3.max(data)])
                 .range([0, 400]);

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

// গাইডলাইন তৈরি করার জন্য একটি ফাংশন
function makeGuideline(scale, axis, transform) {
  return svg.append("g")
            .attr("transform", transform)
            .selectAll(".guideline")
            .data(scale.ticks(5))
            .enter().append("line")
            .attr("x1", d => axis(d))
            .attr("y1", 0)
            .attr("x2", d => axis(d))
            .attr("y2", 250)
            .attr("stroke", "#ddd")
            .attr("stroke-dasharray", "4");
}

// X-axis গাইডলাইন তৈরি
makeGuideline(xScale, xScale, "translate(50, 250)");

// Y-axis গাইডলাইন তৈরি
makeGuideline(yScale, yScale, "translate(50, 0)");

এখানে, makeGuideline একটি সাধারণ ফাংশন তৈরি করা হয়েছে, যা scale এবং axis এর সাহায্যে গাইডলাইন তৈরি করে। এই গাইডলাইনগুলি line এলিমেন্ট ব্যবহার করে তৈরি হয় এবং stroke-dasharray দিয়ে ড্যাশি লাইন তৈরি করা হয়।

৩. গ্রিড লাইন এবং গাইডলাইন আলাদা করার উপায়

ডেটা ভিজ্যুয়ালাইজেশনে কখনও কখনও আপনি গ্রিড লাইন এবং গাইডলাইন আলাদাভাবে দেখতে চান, যাতে গ্রিড লাইনগুলি বরং ব্যাকগ্রাউন্ড হিসেবে থাকে এবং গাইডলাইনগুলি স্পষ্টভাবে ডেটা পয়েন্টের সাথে সম্পর্কিত হয়।

৩.১ গ্রিড লাইন এবং গাইডলাইন আলাদা করা

// X-axis গ্রিড লাইন
svg.append("g")
   .attr("transform", "translate(50, 250)")
   .call(xAxisGrid)
   .selectAll(".tick")
   .attr("stroke", "#ddd");  // গ্রিড লাইনকে আলাদা করে দেখানো

// Y-axis গ্রিড লাইন
svg.append("g")
   .attr("transform", "translate(50, 0)")
   .call(yAxisGrid)
   .selectAll(".tick")
   .attr("stroke", "#ddd");  // গ্রিড লাইনকে আলাদা করে দেখানো

// X-axis গাইডলাইন
makeGuideline(xScale, xScale, "translate(50, 250)")
   .attr("stroke", "#888")
   .attr("stroke-width", 1);

// Y-axis গাইডলাইন
makeGuideline(yScale, yScale, "translate(50, 0)")
   .attr("stroke", "#888")
   .attr("stroke-width", 1);

এখানে, গ্রিড লাইনগুলির জন্য আমরা হালকা রঙ (#ddd) ব্যবহার করেছি এবং গাইডলাইনগুলির জন্য একটু গা dark ় রঙ (#888) ব্যবহার করেছি, যাতে তারা সহজেই আলাদা হয়ে যায়।

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

D3.js ব্যবহার করে একাধিক ডেটা সেটের জন্য রঙ (color) এবং লিজেন্ড (legend) তৈরি করা খুবই গুরুত্বপূর্ণ, বিশেষত যখন আপনি একাধিক সিরিজ বা শ্রেণীভুক্ত ডেটা প্রদর্শন করছেন। এই টপিকে, আমরা দেখব কীভাবে D3.js-এ একাধিক ডেটা সেটের জন্য রঙ নির্ধারণ করতে হয় এবং সেগুলোর জন্য একটি লিজেন্ড তৈরি করতে হয়।

একাধিক ডেটা সেটের জন্য রঙ ব্যবস্থাপনা

একাধিক ডেটা সেটের জন্য রঙ ব্যবস্থাপনা করার জন্য, আপনি D3.js এর স্কেল (Scale) এবং স্টাইলিং ব্যবহার করতে পারেন। D3.js এ রঙ নির্ধারণের জন্য d3.scaleOrdinal() এবং d3.scaleLinear() স্কেল ফাংশন ব্যবহার করা হয়।

১. রঙ স্কেল তৈরি

একাধিক ডেটা সেটের জন্য রঙ স্কেল তৈরি করতে d3.scaleOrdinal() ব্যবহার করা হয়। এটি ডেটার বিভিন্ন ক্যাটেগরি বা সিরিজের জন্য আলাদা আলাদা রঙ নির্ধারণ করে।

উদাহরণ: একাধিক সিরিজের জন্য রঙ নির্ধারণ

// ডেটাসেট
const data = [
  { year: 2020, category: "A", value: 100 },
  { year: 2020, category: "B", value: 200 },
  { year: 2021, category: "A", value: 150 },
  { year: 2021, category: "B", value: 250 },
  { year: 2022, category: "A", value: 200 },
  { year: 2022, category: "B", value: 300 }
];

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

// রঙ স্কেল তৈরি
const colorScale = d3.scaleOrdinal()
                     .domain(["A", "B"])  // ইনপুট ক্যাটেগরি
                     .range(["steelblue", "orange"]);  // আউটপুট রঙ

// বার চার্ট আঁকা
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", (d, i) => i * 60 + 50)
   .attr("y", d => 400 - d.value)
   .attr("width", 50)
   .attr("height", d => d.value)
   .style("fill", d => colorScale(d.category));  // রঙ নির্ধারণ

এখানে, colorScale স্কেলটি "A" এবং "B" ক্যাটেগরি জন্য আলাদা আলাদা রঙ নির্ধারণ করে, এবং বারগুলির রঙ সেই অনুযায়ী পরিবর্তিত হয়।

লিজেন্ড তৈরি

লিজেন্ড (Legend) হলো একটি গ্রাফের উপাদান যা প্রতিটি রঙ বা চিহ্নের অর্থ ব্যাখ্যা করে, যেমন কোন রঙ কোন ডেটা সিরিজ বা ক্যাটেগরির জন্য নির্ধারিত।

D3.js-এ লিজেন্ড তৈরি করার জন্য, সাধারণত append() এবং text() মেথড ব্যবহার করা হয়। এছাড়া, রঙের জন্য বক্স বা স্লাইডারের মতো বিভিন্ন উপাদানও ব্যবহার করা যেতে পারে।

২. লিজেন্ড তৈরি

লিজেন্ড তৈরি করতে, সাধারণত একটি কোর্স রঙ স্কেল ব্যবহার করা হয় এবং সেই অনুযায়ী প্রতিটি ক্যাটেগরি বা সিরিজের জন্য একটি টেক্সট বা চিহ্ন তৈরি করা হয়।

উদাহরণ: রঙের লিজেন্ড তৈরি

// লিজেন্ডের জন্য একটি গ্রুপ (g) তৈরি
const legend = svg.append("g")
                  .attr("transform", "translate(500, 50)");

// লিজেন্ডে রঙ বক্স তৈরি করা
legend.selectAll("rect")
      .data(colorScale.domain())
      .enter()
      .append("rect")
      .attr("x", 0)
      .attr("y", (d, i) => i * 25)
      .attr("width", 20)
      .attr("height", 20)
      .style("fill", d => colorScale(d));

// লিজেন্ডে টেক্সট যোগ করা
legend.selectAll("text")
      .data(colorScale.domain())
      .enter()
      .append("text")
      .attr("x", 30)
      .attr("y", (d, i) => i * 25 + 15)
      .text(d => d)
      .style("font-size", "12px")
      .style("fill", "black");

এখানে, একটি গ্রুপ (g) তৈরি করা হয়েছে যেখানে রঙের বক্স এবং তাদের সাথে টেক্সট (ক্যাটেগরি নাম) প্রদর্শন করা হয়েছে। colorScale.domain() দ্বারা প্রতিটি ক্যাটেগরির জন্য রঙ নির্ধারণ করা হয় এবং সেটি লিজেন্ডে প্রদর্শিত হয়।

একাধিক ডেটা সিরিজের জন্য লিজেন্ড এবং রঙ ব্যবস্থাপনা

যদি আপনার একাধিক ডেটা সিরিজ থাকে, তবে আপনি রঙ স্কেল ব্যবহার করে প্রতিটি সিরিজের জন্য আলাদা রঙ এবং লিজেন্ড তৈরি করতে পারেন।

উদাহরণ: একাধিক ডেটা সিরিজের জন্য রঙ এবং লিজেন্ড

// ডেটাসেট
const dataset1 = [
  { year: 2020, value: 100 },
  { year: 2021, value: 150 },
  { year: 2022, value: 200 }
];

const dataset2 = [
  { year: 2020, value: 120 },
  { year: 2021, value: 180 },
  { year: 2022, value: 220 }
];

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

// রঙ স্কেল তৈরি
const colorScale = d3.scaleOrdinal()
                     .domain(["Dataset 1", "Dataset 2"])
                     .range(["steelblue", "green"]);

// Dataset 1 বার চার্ট আঁকা
svg.selectAll("rect.dataset1")
   .data(dataset1)
   .enter()
   .append("rect")
   .attr("x", (d, i) => i * 60 + 50)
   .attr("y", d => 400 - d.value)
   .attr("width", 50)
   .attr("height", d => d.value)
   .style("fill", colorScale("Dataset 1"));

// Dataset 2 বার চার্ট আঁকা
svg.selectAll("rect.dataset2")
   .data(dataset2)
   .enter()
   .append("rect")
   .attr("x", (d, i) => i * 60 + 150)
   .attr("y", d => 400 - d.value)
   .attr("width", 50)
   .attr("height", d => d.value)
   .style("fill", colorScale("Dataset 2"));

// লিজেন্ড তৈরি
const legend = svg.append("g")
                  .attr("transform", "translate(500, 50)");

legend.selectAll("rect")
      .data(colorScale.domain())
      .enter()
      .append("rect")
      .attr("x", 0)
      .attr("y", (d, i) => i * 25)
      .attr("width", 20)
      .attr("height", 20)
      .style("fill", d => colorScale(d));

legend.selectAll("text")
      .data(colorScale.domain())
      .enter()
      .append("text")
      .attr("x", 30)
      .attr("y", (d, i) => i * 25 + 15)
      .text(d => d)
      .style("font-size", "12px")
      .style("fill", "black");

এই উদাহরণে, আমরা দুটি আলাদা ডেটা সিরিজের জন্য আলাদা রঙ ব্যবহার করেছি এবং একটি লিজেন্ড তৈরি করেছি যা প্রতিটি সিরিজের নাম এবং রঙ প্রদর্শন করবে।

D3.js-এ একাধিক ডেটা সেটের জন্য রঙ এবং লিজেন্ড ব্যবস্থাপনা করা খুবই সহজ। রঙ স্কেল ব্যবহার করে আপনি ডেটার শ্রেণী বা সিরিজ অনুযায়ী রঙ নির্ধারণ করতে পারেন এবং লিজেন্ড তৈরি করে ব্যবহারকারীকে বিভিন্ন রঙের অর্থ ব্যাখ্যা করতে পারেন। D3.js-এর শক্তিশালী স্কেলিং এবং ডেটা বাইন্ডিং ক্ষমতা ব্যবহার করে আপনি সহজেই ডাইনামিক এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করতে পারবেন।

D3.js: Data Synchronization এবং Interaction Techniques

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

এখানে আমরা আলোচনা করবো ডেটা সিঙ্ক্রোনাইজেশন এবং বিভিন্ন ইন্টারঅ্যাকটিভ টেকনিকের বিষয়ে, যা D3.js ব্যবহার করে সহজেই বাস্তবায়িত করা যায়।

১. Data Synchronization (ডেটা সিঙ্ক্রোনাইজেশন)

Data Synchronization হচ্ছে বিভিন্ন ভিজ্যুয়ালাইজেশন বা উপাদানগুলির মধ্যে ডেটা একে অপরের সাথে সিঙ্ক্রোনাইজ করা। D3.js এ একাধিক চার্ট বা উপাদানকে একে অপরের সাথে সিঙ্ক্রোনাইজ করা অনেক সহজ, যেখানে একটি উপাদানের পরিবর্তন অন্য উপাদানে প্রভাব ফেলে।

উদাহরণ: একাধিক চার্টের মধ্যে ডেটা সিঙ্ক্রোনাইজ করা

ধরা যাক, আমাদের একটি বার চার্ট এবং লাইন চার্ট রয়েছে, এবং আমরা চাই যে যখন বার চার্টের কোনো নির্দিষ্ট বার হোভার করা হয়, তখন লাইন চার্টে সেই ডেটা পয়েন্টটি হাইলাইট হোক।

const barChart = d3.select("#barChart");
const lineChart = d3.select("#lineChart");

// বার চার্ট ডেটা এবং লাইন চার্ট ডেটা
const barData = [...];  // বার চার্টের জন্য ডেটা
const lineData = [...]; // লাইন চার্টের জন্য ডেটা

// বার চার্ট তৈরি করা
barChart.selectAll("rect")
  .data(barData)
  .enter().append("rect")
  .on("mouseover", function(event, d) {
    // যখন বার হোভার করা হবে, লাইন চার্টে ডেটা সিঙ্ক্রোনাইজ করা
    syncLineChart(d);
  });

// লাইন চার্ট তৈরি করা
function syncLineChart(d) {
  lineChart.selectAll("path")
    .style("stroke", function(lineData) {
      return lineData.some(data => data === d) ? "red" : "steelblue";
    });
}

এখানে, যখন বার চার্টের কোনো বার হোভার করা হয়, তখন লাইন চার্টে সংশ্লিষ্ট ডেটা পয়েন্ট হাইলাইট হয়। এটি একটি উদাহরণ যেখানে দুটি ভিজ্যুয়ালাইজেশনের মধ্যে ডেটা সিঙ্ক্রোনাইজেশন ঘটছে।

২. Interaction Techniques (ইন্টারঅ্যাকশন টেকনিকস)

D3.js এ ইন্টারঅ্যাকটিভিটি যোগ করতে অনেক ধরনের টেকনিক রয়েছে, যার মাধ্যমে ব্যবহারকারীদের জন্য আরও আকর্ষণীয় এবং তথ্যপূর্ণ ভিজ্যুয়ালাইজেশন তৈরি করা যায়। এখানে কিছু গুরুত্বপূর্ণ ইন্টারঅ্যাকশন টেকনিকস তুলে ধরা হলো:

১. Hover Interaction (মাউস হোভার ইন্টারঅ্যাকশন)

মাউস হোভার ইন্টারঅ্যাকশন ব্যবহার করে আপনি ব্যবহারকারীকে ডেটা সম্পর্কে আরও বিস্তারিত তথ্য প্রদর্শন করতে পারেন। এটি সাধারণত টুলটিপ ব্যবহার করে করা হয়।

svg.selectAll("circle")
  .data(data)
  .enter().append("circle")
  .attr("cx", d => x(d.date))
  .attr("cy", d => y(d.value))
  .attr("r", 5)
  .style("fill", "steelblue")
  .on("mouseover", function(event, d) {
    d3.select(this).transition().duration(200).attr("r", 10);
    tooltip.transition().duration(200).style("opacity", 1);
    tooltip.html("Date: " + d.date.toLocaleDateString() + "<br>Value: " + d.value)
      .style("left", (event.pageX + 5) + "px")
      .style("top", (event.pageY - 28) + "px");
  })
  .on("mouseout", function() {
    d3.select(this).transition().duration(200).attr("r", 5);
    tooltip.transition().duration(500).style("opacity", 0);
  });

এখানে, একটি circle উপাদান তৈরি করা হয়েছে, যা মাউস হোভার করলে তার আকার পরিবর্তন হবে এবং টুলটিপের মাধ্যমে ডেটার মান প্রদর্শিত হবে।

২. Click Interaction (ক্লিক ইন্টারঅ্যাকশন)

ক্লিক ইন্টারঅ্যাকশন ব্যবহার করে ব্যবহারকারীকে ডেটার কোনো নির্দিষ্ট পয়েন্টে ক্লিক করার সুযোগ দেওয়া হয়, যেখানে কোনো নির্দিষ্ট ঘটনা বা তথ্য প্রদর্শিত হতে পারে।

svg.selectAll("circle")
  .data(data)
  .enter().append("circle")
  .attr("cx", d => x(d.date))
  .attr("cy", d => y(d.value))
  .attr("r", 5)
  .style("fill", "steelblue")
  .on("click", function(event, d) {
    alert("You clicked on: " + d.date.toLocaleDateString() + " with value: " + d.value);
  });

এখানে, একটি circle উপাদান তৈরি করা হয়েছে, এবং যখন ব্যবহারকারী ক্লিক করবে, তখন একটি এলার্ট বার্তা প্রদর্শিত হবে।

৩. Zoom Interaction (জুম ইন্টারঅ্যাকশন)

D3.js এ zoom ফিচার ব্যবহার করে আপনি পুরো চার্ট বা তার নির্দিষ্ট অংশকে জুম ইন বা জুম আউট করতে পারবেন।

const zoom = d3.zoom()
  .scaleExtent([1, 10])  // স্কেলিং সীমা
  .on("zoom", function(event) {
    svg.attr("transform", event.transform);
  });

svg.call(zoom);

এখানে, zoom ইন্টারঅ্যাকশন দ্বারা ব্যবহারকারী পুরো চার্টটি জুম ইন বা জুম আউট করতে পারবেন।

৪. Drag Interaction (ড্র্যাগ ইন্টারঅ্যাকশন)

D3.js এ drag ফিচার ব্যবহার করে ডেটার বিভিন্ন উপাদানকে ব্যবহারকারী নিজের ইচ্ছেমত স্থানান্তর করতে পারেন। এটি সাধারণত ডেটার মান বা অবস্থান পরিবর্তন করার জন্য ব্যবহৃত হয়।

svg.selectAll("circle")
  .data(data)
  .enter().append("circle")
  .attr("cx", d => x(d.date))
  .attr("cy", d => y(d.value))
  .attr("r", 5)
  .style("fill", "steelblue")
  .call(d3.drag()
    .on("drag", function(event, d) {
      d3.select(this)
        .attr("cx", event.x)
        .attr("cy", event.y);
    }));

এখানে, একটি circle উপাদানকে ড্র্যাগ করার মাধ্যমে তার অবস্থান পরিবর্তন করা হয়েছে।

৩. ডেটা সিঙ্ক্রোনাইজেশন এবং ইন্টারঅ্যাকশন একসাথে ব্যবহার করা

একটি উদাহরণে, আমরা ডেটা সিঙ্ক্রোনাইজেশন এবং ইন্টারঅ্যাকটিভ টেকনিক একসাথে ব্যবহার করবো। ধরুন, আমাদের একটি লাইন চার্ট এবং একটি বার চার্ট রয়েছে, এবং আমরা চাই যে একটি চার্টের পরিবর্তন অন্য চার্টে সিঙ্ক্রোনাইজ করা হোক, আর একে অন্যের সাথে ইন্টারঅ্যাক্ট করতে দেওয়া হোক।

// বার চার্ট তৈরি
const barChart = d3.select("#barChart")
  .selectAll("rect")
  .data(data)
  .enter().append("rect")
  .attr("x", d => x(d.date))
  .attr("y", d => y(d.value))
  .attr("width", x.bandwidth())
  .attr("height", d => height - y(d.value))
  .style("fill", "lightblue")
  .on("mouseover", function(event, d) {
    // লাইন চার্টে ডেটা সিঙ্ক্রোনাইজ করা
    syncLineChart(d);
  });

// লাইন চার্ট তৈরি
const lineChart = d3.select("#lineChart")
  .append("path")
  .data([data])
  .enter().append("path")
  .attr("d", line)
  .style("fill", "none")
  .style("stroke", "steelblue")
  .style("stroke-width", 2);

এখানে, একটি bar chart তৈরি করা হয়েছে যেখানে বার হোভার করলে সংশ্লিষ্ট line chart আপডেট হবে।

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