Bar Chart এর জন্য Color Scales এবং Legends যোগ করা

D3.js-এ Bar Chart তৈরি করার সময় Color Scales এবং Legends ব্যবহার করা হয় ভিজ্যুয়ালকে আরও বোধগম্য ও ইন্টারঅ্যাকটিভ করার জন্য। Color Scales ব্যবহার করে আপনি বারগুলোর বিভিন্ন মান অনুযায়ী রঙ পরিবর্তন করতে পারেন, এবং Legends যোগ করার মাধ্যমে আপনি গ্রাহকদের কাছে রঙের অর্থ ব্যাখ্যা করতে পারেন।

১. Color Scales ব্যবহার করে Bar Chart এ রঙ যোগ করা

Color Scales ব্যবহার করে আপনি ডেটার বিভিন্ন মানের উপর ভিত্তি করে বারগুলোর রঙ পরিবর্তন করতে পারেন। D3.js-এ সাধারণত d3.scaleSequential(), d3.scaleOrdinal(), d3.scaleLinear() ইত্যাদি স্কেল ব্যবহার করা হয়। এখানে আমরা d3.scaleSequential() স্কেল ব্যবহার করব একটি নির্দিষ্ট রঙের স্কেল তৈরি করতে।

১.১ Color Scale তৈরি করা

// ডেটা
const data = [10, 20, 30, 40, 50];

// Color Scale তৈরি করা (যেমন, রঙের গ্রেডিয়েন্ট)
const colorScale = d3.scaleSequential(d3.interpolateBlues)
                     .domain([0, d3.max(data)]);  // ডেটার সর্বোচ্চ মান পর্যন্ত রঙের রেঞ্জ

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

// বার চার্ট তৈরি
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("width", 50)
   .attr("height", d => d * 5)  // বারগুলোর উচ্চতা ডেটার মান অনুযায়ী
   .attr("x", (d, i) => i * 60) // এক্স কোঅর্ডিনেট
   .attr("y", d => 300 - d * 5) // Y কোঅর্ডিনেট (SVG এর নিচ থেকে উপরে)
   .style("fill", d => colorScale(d)); // Color Scale এর মাধ্যমে রঙ সেট করা

এখানে, d3.interpolateBlues একটি রঙের স্কেল যা ব্লু রঙের বিভিন্ন শেড তৈরি করে। domain() ডেটার মানের রেঞ্জ অনুযায়ী রঙ সেট করে।

২. Legends (লেজেন্ড) যোগ করা

Legends ব্যবহার করা হয় ভিজ্যুয়ালাইজেশনটিতে রঙের মানে স্পষ্টতা আনার জন্য। D3.js-এ লেজেন্ড তৈরি করতে d3.legendColor() মডিউল ব্যবহার করা হয়, যা রঙের স্কেল অনুযায়ী লেজেন্ড তৈরি করে।

২.১ Legend তৈরি করা

// Color Scale তৈরি করা
const colorScale = d3.scaleSequential(d3.interpolateBlues)
                     .domain([0, d3.max(data)]);

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

// বার চার্ট তৈরি
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("width", 50)
   .attr("height", d => d * 5)
   .attr("x", (d, i) => i * 60)
   .attr("y", d => 300 - d * 5)
   .style("fill", d => colorScale(d));

// Legend যোগ করা
const legend = d3.legendColor()
                 .scale(colorScale)  // Color Scale এর মাধ্যমে লেজেন্ড তৈরি
                 .shapeWidth(30)
                 .orient("horizontal")
                 .labelFormat(d3.format(".0f"));

svg.append("g")
   .attr("transform", "translate(50, 320)") // লেজেন্ডের অবস্থান নির্ধারণ
   .call(legend);

এখানে, d3.legendColor() মেথড ব্যবহার করে একটি লেজেন্ড তৈরি করা হয়েছে, যা colorScale অনুযায়ী রঙের অর্থ ব্যাখ্যা করে। shapeWidth(30) দ্বারা লেজেন্ডের প্রতিটি রঙের বক্সের প্রস্থ নির্ধারণ করা হয় এবং labelFormat(d3.format(".0f")) দ্বারা রঙের পাশে ডেটার মান দেখানো হয়।

৩. রঙের গ্রেডিয়েন্ট সহ আরও উন্নত লেজেন্ড

কখনও কখনও আপনি একটি রঙের গ্রেডিয়েন্ট বা রেঞ্জ অনুযায়ী লেজেন্ড চান। এ ধরনের ক্ষেত্রে, d3.scaleLinear() ব্যবহার করে আপনি একটি রঙের গ্রেডিয়েন্ট স্কেল তৈরি করতে পারেন, এবং d3.legendColor() দিয়ে লেজেন্ডে রঙের পরিবর্তন প্রদর্শন করতে পারেন।

// ডেটা
const data = [10, 20, 30, 40, 50];

// Linear Color Scale তৈরি করা
const colorScale = d3.scaleLinear()
                     .domain([0, d3.max(data)])
                     .range(["lightblue", "darkblue"]);  // রঙের গ্রেডিয়েন্ট

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

// বার চার্ট তৈরি
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("width", 50)
   .attr("height", d => d * 5)
   .attr("x", (d, i) => i * 60)
   .attr("y", d => 300 - d * 5)
   .style("fill", d => colorScale(d));  // Color Scale অনুযায়ী রঙ পরিবর্তন

// Legend তৈরি
const legend = d3.legendColor()
                 .scale(colorScale)
                 .shapeWidth(30)
                 .orient("horizontal")
                 .labelFormat(d3.format(".0f"));

svg.append("g")
   .attr("transform", "translate(50, 320)")
   .call(legend);

এখানে, d3.scaleLinear() ব্যবহার করে একটি লিনিয়ার রঙের স্কেল তৈরি করা হয়েছে, এবং d3.legendColor() ব্যবহার করে রঙের গ্রেডিয়েন্টসহ লেজেন্ড যোগ করা হয়েছে।

D3.js-এ Bar Chart তৈরি করার সময় Color Scales এবং Legends যোগ করলে ভিজ্যুয়ালাইজেশনটি আরও তথ্যবহুল এবং সহজবোধ্য হয়ে ওঠে। Color Scales ব্যবহার করে আপনি ডেটার উপর ভিত্তি করে রঙ নির্ধারণ করতে পারেন, এবং Legends ব্যবহার করে রঙের মানে ব্যাখ্যা করতে পারেন, যা ব্যবহারকারীদের ভিজ্যুয়ালাইজেশন বুঝতে সাহায্য করে। D3.js এর বিভিন্ন স্কেল এবং লেজেন্ড ফিচারের মাধ্যমে আপনি শক্তিশালী এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়াল তৈরি করতে পারেন।