Multiple Data Sets এর জন্য Color এবং Legend ব্যবস্থাপনা

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-এর শক্তিশালী স্কেলিং এবং ডেটা বাইন্ডিং ক্ষমতা ব্যবহার করে আপনি সহজেই ডাইনামিক এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করতে পারবেন।