Sorting Techniques এবং Custom Filters যোগ করা

DC.js ডেটা ভিজ্যুয়ালাইজেশনের জন্য একটি শক্তিশালী লাইব্রেরি যা D3.js এবং Crossfilter এর উপর ভিত্তি করে তৈরি। DC.js-এ sorting এবং custom filters যোগ করা খুবই সহজ এবং এটি ডেটার উপর নির্দিষ্ট ক্রমে (ascending বা descending) সাজানোর এবং নির্দিষ্ট শর্তে ডেটা ফিল্টার করার সুবিধা প্রদান করে। এই ফিচারগুলি ব্যবহারকারীদের ডেটা বিশ্লেষণ আরো ইন্টারেক্টিভ এবং কাস্টমাইজড করে তোলে।

এখানে, Sorting Techniques এবং Custom Filters যোগ করার পদ্ধতি দেখানো হয়েছে।

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

প্রথমে DC.js, D3.js, এবং Crossfilter লাইব্রেরির সিডিএন লিঙ্ক HTML ফাইলে যোগ করুন:

<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">

২. ডেটাসেট তৈরি এবং Crossfilter ইন্ডেক্স

এখন, একটি ডেটাসেট তৈরি করি যা Category, Value, এবং Date নিয়ে থাকবে। পরে, Crossfilter ব্যবহার করে ডেটা ইন্ডেক্স করা হবে।

const data = [
    { category: "A", value: 30, date: "2023-01-01" },
    { category: "B", value: 50, date: "2023-01-02" },
    { category: "A", value: 70, date: "2023-01-03" },
    { category: "B", value: 20, date: "2023-01-04" },
    { category: "A", value: 60, date: "2023-01-05" },
    { category: "B", value: 90, date: "2023-01-06" }
];

// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);

৩. ডাইমেনশন এবং গ্রুপ তৈরি

Category এবং Date এর উপর ডাইমেনশন এবং গ্রুপ তৈরি করা হবে।

// category এর উপর ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);

// date এর উপর ডাইমেনশন তৈরি
const dateDimension = ndx.dimension(d => d.date);

// category ভিত্তিক গ্রুপ তৈরি
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);

// date ভিত্তিক গ্রুপ তৈরি
const dateGroup = dateDimension.group().reduceSum(d => d.value);

এখন আমাদের কাছে category এবং date এর উপর ভিত্তি করে গ্রুপ এবং ডাইমেনশন রয়েছে।

৪. Sorting Techniques যোগ করা

DC.js চার্টের ডেটা সজানোর জন্য sorting ব্যবহার করা হয়। আমরা ascending বা descending অনুসারে ডেটা সাজাতে পারি।

১. Category অনুযায়ী সোজা সাজানো (Ascending Sorting):

const categoryDimensionAsc = ndx.dimension(d => d.category);

// category গ্রুপ তৈরি এবং সাজানো
const categoryGroupAsc = categoryDimensionAsc.group().reduceSum(d => d.value);

// Category গ্রুপ সোজা সাজানো
const categorySorted = categoryGroupAsc.top(Infinity).sort((a, b) => a.key.localeCompare(b.key));
console.log(categorySorted);

এখানে, categoryGroupAsc-এ ডেটা সোজা সাজানোর জন্য sort() ফাংশন ব্যবহার করা হয়েছে।

২. Value অনুযায়ী উল্টো সাজানো (Descending Sorting):

const categoryGroupDesc = categoryDimension.group().reduceSum(d => d.value);

// Value গ্রুপ উল্টো সাজানো
const categorySortedDesc = categoryGroupDesc.top(Infinity).sort((a, b) => b.value - a.value);
console.log(categorySortedDesc);

এখানে, categoryGroupDesc-এ ডেটা উল্টো সাজানোর জন্য sort() ফাংশন ব্যবহার করা হয়েছে, যাতে value অনুসারে descending অর্ডারে সাজানো যায়।

৫. Custom Filters যোগ করা

DC.js চার্টের জন্য custom filters যোগ করা যায়, যা ব্যবহারকারীদের নির্দিষ্ট শর্ত অনুযায়ী ডেটা ফিল্টার করতে সাহায্য করে। Crossfilter দিয়ে ডেটা ফিল্টারিং করতে dimension.filter() ব্যবহার করা হয়।

১. Category এর জন্য Custom Filter:

// Category A এর জন্য ফিল্টার
categoryDimension.filter("A");
console.log(categoryDimension.top(Infinity));

এখানে, categoryDimension.filter("A") দিয়ে ক্যাটেগরি A এর ডেটা ফিল্টার করা হয়েছে।

২. Date এর জন্য Custom Filter:

// "2023-01-01" তারিখের জন্য ফিল্টার
dateDimension.filter("2023-01-01");
console.log(dateDimension.top(Infinity));

এখানে, dateDimension.filter("2023-01-01") দিয়ে নির্দিষ্ট তারিখের জন্য ডেটা ফিল্টার করা হয়েছে।

৩. Filter Clear করা:

যেকোনো ফিল্টার ক্লিয়ার করতে dimension.filterAll() ব্যবহার করা হয়:

categoryDimension.filterAll();  // ক্যাটেগরি ফিল্টার ক্লিয়ার
dateDimension.filterAll();      // তারিখ ফিল্টার ক্লিয়ার

৬. DC.js চার্ট তৈরি এবং Sorting & Custom Filters ব্যবহার

এখন DC.js দিয়ে Bar Chart এবং Line Chart তৈরি করি এবং সেখানে sorting techniques এবং custom filters যোগ করি।

Bar Chart তৈরি:

// DC.js Bar Chart তৈরি
const barChart = dc.barChart("#bar-chart");

barChart
    .width(600)
    .height(300)
    .dimension(categoryDimension)
    .group(categoryGroup)
    .x(d3.scaleBand())
    .xUnits(dc.units.ordinal)
    .xAxisLabel("Category")
    .yAxisLabel("Value")
    .on("filtered", function() {
        // Custom filter 적용 করার পর Line Chart আপডেট হবে
        lineChart.redraw();
    });

Line Chart তৈরি:

// DC.js Line Chart তৈরি
const lineChart = dc.lineChart("#line-chart");

lineChart
    .width(600)
    .height(300)
    .dimension(dateDimension)
    .group(dateGroup)
    .x(d3.scaleTime())
    .xUnits(d3.timeDays)
    .xAxisLabel("Date")
    .yAxisLabel("Value")
    .on("filtered", function() {
        // Custom filter করার পর Bar Chart আপডেট হবে
        barChart.redraw();
    });

সমস্ত চার্ট রেন্ডার:

dc.renderAll();

৭. পূর্ণ কোড উদাহরণ

এখানে একটি পূর্ণ কোড উদাহরণ দেখানো হলো যেখানে Sorting Techniques এবং Custom Filters ব্যবহার করা হয়েছে।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DC.js Sorting and Custom Filters</title>
    <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">
</head>
<body>
    <h1>DC.js Sorting and Custom Filters</h1>
    <div id="bar-chart"></div>
    <div id="line-chart"></div>

    <script>
        const data = [
            { category: "A", date: "2023-01-01", value: 30 },
            { category: "B", date: "2023-01-02", value: 50 },
            { category: "A", date: "2023-01-03", value: 70 },
            { category: "B", date: "2023-01-04", value: 20 },
            { category: "A", date: "2023-01-05", value: 60 },
            { category: "B", date: "2023-01-06", value: 90 }
        ];

        const ndx = crossfilter(data);
        const categoryDimension = ndx.dimension(d => d.category);
        const dateDimension = ndx.dimension(d => d.date);

        const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
        const dateGroup = dateDimension.group().reduceSum(d => d.value);

        // Sorting
        const categorySorted = categoryGroup.top(Infinity).sort((a, b) => b.value - a.value);
        console.log(categorySorted);

        // DC.js Bar Chart
        const barChart = dc.barChart("#bar-chart");

        barChart
            .width(600)
            .height(300)
            .dimension(categoryDimension)
            .group(categoryGroup)
            .x(d3.scaleBand())
            .xUnits(dc.units.ordinal)
            .xAxisLabel("Category")
            .yAxisLabel("Value")
            .on("filtered", function() {
                lineChart.redraw();
            });

        // DC.js Line Chart
        const lineChart = dc.lineChart("#line-chart");

        lineChart
            .width(600)
            .height(300)
            .dimension(dateDimension)
            .group(dateGroup)
            .x(d3.scaleTime())
            .xUnits(d3.timeDays)
            .xAxisLabel("Date")
            .yAxisLabel("Value")
            .on("filtered", function() {
                barChart.redraw();
            });

        dc.renderAll();
    </script>
</body>
</html>

সারাংশ

• Sorting Techniques: sort() ফাংশন ব্যবহার করে ascending বা descending সাজার জন্য ডেটা সাজানো হয়।
• Custom Filters: dimension.filter() বা dimension.filterAll() ব্যবহার করে কাস্টম ফিল্টার যোগ করা হয়।
• DC.js এর মাধ্যমে আপনি সহজে Sorting এবং Custom Filters যোগ করতে পারেন, যা ডেটা বিশ্লেষণকে আরো ইন্টারেক্টিভ এবং কাস্টমাইজড করে তোলে।