DC.js দিয়ে Heatmap তৈরি করা

DC.js ব্যবহার করে Heatmap তৈরি করা সম্ভব। Heatmap একটি শক্তিশালী ভিজ্যুয়ালাইজেশন টুল, যা ডেটার ঘনত্ব বা ঘরানার বৈশিষ্ট্যগুলো প্রদর্শন করতে সহায়ক। DC.js এর সাথে D3.js এর ক্ষমতা ব্যবহারের মাধ্যমে Heatmap সহজেই তৈরি করা যায়, যেখানে Crossfilter ডেটার ফিল্টারিং এবং গ্রুপিং এর জন্য ব্যবহৃত হয়।

Heatmap কাস্টমাইজেশন

DC.js দিয়ে Heatmap তৈরি করতে, আপনাকে একটি 2D গ্রিডে ডেটার ঘনত্ব বা মান দেখাতে হবে। এটি করতে barChart বা rowChart ব্যবহার করা যেতে পারে, যেখানে color scaling এবং grid size কাস্টমাইজ করা হবে।

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

প্রথমে DC.js, D3.js এবং Crossfilter এর জন্য সিডিএন লিঙ্ক যোগ করতে হবে।

<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.css">

২. ডেটাসেট তৈরি করা

Heatmap তৈরি করতে একটি 2D ডেটাসেট বা ম্যাট্রিক্স তৈরি করতে হবে। উদাহরণস্বরূপ:

const data = [
    { x: 0, y: 0, value: 30 },
    { x: 0, y: 1, value: 40 },
    { x: 0, y: 2, value: 50 },
    { x: 1, y: 0, value: 60 },
    { x: 1, y: 1, value: 70 },
    { x: 1, y: 2, value: 80 },
    { x: 2, y: 0, value: 90 },
    { x: 2, y: 1, value: 100 },
    { x: 2, y: 2, value: 110 }
];

এখানে, x এবং y এর মানের উপর ভিত্তি করে ডেটা ম্যাট্রিক্স তৈরি করা হয়েছে। value ডেটার মান যা Heatmap এ প্রদর্শিত হবে।

৩. Crossfilter এবং DC.js সেটআপ

ডেটাসেট লোড করা এবং Crossfilter ডাইমেনশন তৈরি করা:

const ndx = crossfilter(data);

// ডাইমেনশন তৈরি করা
const xDimension = ndx.dimension(d => d.x);
const yDimension = ndx.dimension(d => d.y);

// গ্রুপ তৈরি
const group = xDimension.group().reduceSum(d => d.value);

৪. Heatmap তৈরি করা

DC.js দিয়ে Heatmap তৈরি করার জন্য, আমরা barChart বা rowChart ব্যবহার করব এবং তার মধ্যে color scaling সেট করব।

উদাহরণ: Heatmap তৈরি করা

const heatmapChart = dc.barChart("#heatmap-chart");

heatmapChart
    .width(600)  // চার্টের প্রস্থ
    .height(300) // চার্টের উচ্চতা
    .dimension(xDimension) // x ডাইমেনশন
    .group(group)  // গ্রুপ
    .x(d3.scaleBand()) // এক্স-অক্ষ স্কেল
    .y(d3.scaleLinear()) // ওয়াই-অক্ষ স্কেল
    .colorRange(["white", "blue", "green", "yellow", "red"]) // রঙ কাস্টমাইজেশন
    .xUnits(dc.units.ordinal)  // এক্স-অক্ষের ইউনিট
    .on('renderlet', function(chart) {
        chart.selectAll("rect")
            .style("fill", function(d) {
                return d.value > 100 ? "red" : d.value > 50 ? "yellow" : "green";
            });
    });

dc.renderAll();

এখানে, colorRange ব্যবহার করে বিভিন্ন মানের জন্য বিভিন্ন রঙ নির্ধারণ করা হয়েছে, এবং renderlet ইভেন্ট ব্যবহার করে rect গুলোর রঙ কাস্টমাইজ করা হয়েছে।

৫. বিকল্পভাবে RowChart ব্যবহার করা

আপনি rowChart ব্যবহার করে Heatmap তৈরি করতে পারেন যেখানে ডেটার ঘনত্ব বিভিন্ন রঙে প্রকাশিত হবে:

const heatmapRowChart = dc.rowChart("#heatmap-row-chart");

heatmapRowChart
    .width(600)
    .height(300)
    .dimension(yDimension) // y ডাইমেনশন
    .group(group)
    .colorRange(["white", "blue", "green", "yellow", "red"])  // রঙ কাস্টমাইজেশন
    .renderLabel(true);

dc.renderAll();

এখানে, rowChart ব্যবহার করে yDimension এর উপর ভিত্তি করে একটি Heatmap তৈরি করা হয়েছে।

৬. তথ্য দেখানো এবং ফলাফল

উপরের কোডে, DC.js এবং Crossfilter এর সাহায্যে Heatmap তৈরি করা হয়েছে, যা ভিজ্যুয়ালভাবে ডেটার ঘনত্ব বা মান দেখানোর জন্য রঙ পরিবর্তন করবে। আপনি যখন ডেটা এবং গ্রাফের রঙ কাস্টমাইজ করবেন, তখন একটি ইন্টারেক্টিভ Heatmap তৈরি হবে।

সারাংশ

• DC.js এবং D3.js ব্যবহার করে সহজে Heatmap তৈরি করা যায়।
• Crossfilter ডেটা ফিল্টারিং এবং গ্রুপিং ব্যবস্থাপনা সহজ করে তোলে।
• colorRange এবং color scaling ব্যবহার করে রঙ কাস্টমাইজ করা যায়।
• Heatmap তৈরি করতে barChart অথবা rowChart ব্যবহার করা যেতে পারে।

এই পদ্ধতিতে আপনি সহজে ডেটার ভিজ্যুয়াল উপস্থাপনা হিসাবে Heatmap তৈরি করতে পারবেন, যা ডেটার ঘনত্ব বা মানের উপর ভিত্তি করে বিভিন্ন রঙে প্রভাবিত হবে।