ডিসি.জেএস (DC.js) - Web Development

229

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

১. Legend কাস্টমাইজেশন

Legend হল চার্টের অংশ যা বিভিন্ন সিরিজ বা গ্রুপের নাম প্রদর্শন করে, এবং এটি ব্যবহারকারীদের দ্রুত বুঝতে সাহায্য করে কী ধরনের ডেটা প্রতিটি চার্ট বা বার উপস্থাপন করছে।

Legend কাস্টমাইজেশন করার জন্য কিছু সাধারণ পদ্ধতি:

১.1 Legend প্রাথমিক কনফিগারেশন

DC.js এর মাধ্যমে Legend কাস্টমাইজ করার জন্য legend() ফাংশন ব্যবহার করা হয়। DC.js ডিফল্টভাবে একটি Legend প্রদর্শন করে, তবে আপনি এটি কাস্টমাইজ করতে পারেন।

const barChart = dc.barChart("#chart");

barChart
    .width(600)
    .height(300)
    .dimension(dimension)
    .group(group)
    .x(d3.scaleBand())
    .xUnits(dc.units.ordinal)
    .legend(dc.legend()) // Legend যোগ করা
    .legend()
    .x(500) // Legend এর অবস্থান কাস্টমাইজ করা
    .y(10); // Y-অক্ষের অবস্থান কাস্টমাইজ করা

১.2 Legend কাস্টমাইজেশন (পদক্ষেপসমূহ)

Positioning (অবস্থান): legend().x() এবং legend().y() ব্যবহার করে আপনি Legend এর অবস্থান কাস্টমাইজ করতে পারেন।
Font Size এবং Style: legend().itemHeight() দিয়ে প্রতিটি Legend আইটেমের উচ্চতা এবং legend().itemWidth() দিয়ে আইটেমের প্রস্থ নির্ধারণ করতে পারেন।
Label কাস্টমাইজ: legend().title() ব্যবহার করে Legend এ টাইটেল যোগ করা সম্ভব।

barChart
    .legend()
    .x(500) 
    .y(10)
    .itemHeight(15)  // প্রতিটি আইটেমের উচ্চতা নির্ধারণ
    .itemWidth(120)  // আইটেমের প্রস্থ নির্ধারণ
    .title("Legend Title");  // Legend টাইটেল কাস্টমাইজ

২. Tooltip কাস্টমাইজেশন

Tooltip একটি ইন্টারেক্টিভ উপাদান যা চার্টে মাউস হোভার করলে সঠিক তথ্য প্রদর্শন করে। DC.js এ ডিফল্টভাবে Tooltip থাকে, তবে আপনি D3.js এর সাহায্যে এটি কাস্টমাইজ করতে পারেন।

২.1 Tooltip তৈরি করা

DC.js দিয়ে Tooltip তৈরি করতে on("mouseover") এবং on("mouseout") ইভেন্ট ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে বার চার্টে Tooltip কাস্টমাইজ করা হয়েছে।

const barChart = dc.barChart("#chart");

barChart
    .width(600)
    .height(300)
    .dimension(dimension)
    .group(group)
    .x(d3.scaleBand())
    .xUnits(dc.units.ordinal)
    .on("pretransition", function(chart) {
        // Tooltip সেটআপ
        const tooltip = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0);

        chart.selectAll("rect") // বারগুলোর জন্য Tooltip
            .on("mouseover", function(event, d) {
                tooltip.transition().duration(200).style("opacity", 0.9);
                tooltip.html("Category: " + d.key + "<br>Value: " + d.value)
                    .style("left", (event.pageX + 5) + "px")
                    .style("top", (event.pageY - 28) + "px");
            })
            .on("mouseout", function(event, d) {
                tooltip.transition().duration(200).style("opacity", 0); // Tooltip হাইড
            });
    });

২.2 Tooltip কাস্টমাইজেশন (পদক্ষেপসমূহ)

Tooltip Positioning (অবস্থান): style("left", (event.pageX + 5) + "px") এবং style("top", (event.pageY - 28) + "px") ব্যবহার করে Tooltip এর অবস্থান কাস্টমাইজ করা হয়েছে।
Tooltip Styling: Tooltip এর স্টাইল কাস্টমাইজ করতে, CSS ব্যবহার করা যেতে পারে (যেমন পটভূমি, রঙ, আকার ইত্যাদি)।

.tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    border-radius: 5px;
    pointer-events: none;
}

২.3 Tooltip Styling

CSS ব্যবহার করে Tooltip এর স্টাইল কাস্টমাইজ করতে পারেন, যেমন পটভূমি রঙ, বর্ডার রেডিয়াস, শ্যাডো ইত্যাদি:

.tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    border-radius: 5px;
    pointer-events: none;  /* Tooltip এর ওপর মাউস ক্লিক না হওয়া */
}

৩. Legend এবং Tooltip কাস্টমাইজ করার উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DC.js Legend and Tooltip Customization</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.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">
    <style>
        .tooltip {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px;
            border-radius: 5px;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <h1>DC.js with Legend and Tooltip Customization</h1>
    <div id="chart"></div>
    <script>
        // ডেটাসেট
        const data = [
            { category: "A", value: 30 },
            { category: "B", value: 50 },
            { category: "C", value: 70 },
            { category: "D", value: 40 },
            { category: "E", value: 60 }
        ];

        // Crossfilter সেটআপ
        const ndx = crossfilter(data);
        const dimension = ndx.dimension(d => d.category);
        const group = dimension.group().reduceSum(d => d.value);

        // DC.js বার চার্ট
        const barChart = dc.barChart("#chart");

        barChart
            .width(600)
            .height(300)
            .dimension(dimension)
            .group(group)
            .x(d3.scaleBand())
            .xUnits(dc.units.ordinal)
            .legend(dc.legend()) // Legend কাস্টমাইজেশন
            .legend()
            .x(500)
            .y(10)
            .itemHeight(15)
            .itemWidth(120)
            .title("Category Values") // Legend টাইটেল
            .on("pretransition", function(chart) {
                // Tooltip কাস্টমাইজেশন
                const tooltip = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0);

                chart.selectAll("rect")
                    .style("fill", "steelblue")
                    .on("mouseover", function(event, d) {
                        tooltip.transition().duration(200).style("opacity", 0.9);
                        tooltip.html("Category: " + d.key + "<br>Value: " + d.value)
                            .style("left", (event.pageX + 5) + "px")
                            .style("top", (event.pageY - 28) + "px");
                    })
                    .on("mouseout", function(event, d) {
                        tooltip.transition().duration(200).style("opacity", 0);
                    });
            });

        // চার্ট রেন্ডার
        dc.renderAll();
    </script>
</body>
</html>

সারাংশ

Legend কাস্টমাইজেশন: DC.js এ legend() ফাংশন ব্যবহার করে Legend এর অবস্থান, আকার এবং টেক্সট কাস্টমাইজ করা যায়। legend().itemHeight() এবং legend().itemWidth() দিয়ে আইটেমের আকার এবং legend().title() দিয়ে টাইটেল যোগ করা যায়।
Tooltip কাস্টমাইজেশন: mouseover এবং mouseout ইভেন্টের মাধ্যমে Tooltip কাস্টমাইজ করা হয়। CSS দিয়ে Tooltip এর পটভূমি, রঙ এবং আকার পরিবর্তন করা যায়।

এই পদ্ধতিতে, আপনি DC.js এর মাধ্যমে Legend এবং Tooltip কাস্টমাইজ করে একটি সুন্দর, ইন্টারেক্টিভ চার্ট তৈরি করতে পারেন যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

Content added By

Azizar Rahman Aziz

DC.js চার্টের জন্য Legend তৈরি করা

366

DC.js দিয়ে আপনি ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন এবং সেই সাথে প্রতিটি চার্টের জন্য একটি Legend (লেজেন্ড) তৈরি করতে পারেন। লেজেন্ড চার্টের মানে সম্পর্কিত তথ্য দেখাতে ব্যবহৃত হয় এবং এটি ব্যবহারকারীর জন্য চার্টের বিভিন্ন সিরিজ বা গ্রুপের মধ্যে পার্থক্য স্পষ্ট করে তোলে।

এখানে আমরা DC.js ব্যবহার করে একটি চার্টে Legend (লেজেন্ড) তৈরি করার প্রক্রিয়া দেখাব।

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

প্রথমে HTML ফাইলে 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">

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

এখানে একটি সাধারণ ডেটাসেট তৈরি করা হয়েছে, যা Category এবং Value এর সাথে Date ভিত্তিক তথ্য ধারণ করবে।

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

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

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

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

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

// ক্যাটেগরি অনুযায়ী গ্রুপ তৈরি
const categoryGroupA = dateDimension.group().reduceSum(d => d.category === "A" ? d.value : 0);
const categoryGroupB = dateDimension.group().reduceSum(d => d.category === "B" ? d.value : 0);

৪. DC.js Line Chart তৈরি এবং Legend যোগ করা

এখন, একটি Line Chart তৈরি করা হবে এবং লেজেন্ড যোগ করা হবে।

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

lineChart
    .width(600)
    .height(300)
    .dimension(dateDimension)
    .group(categoryGroupA, "Category A")
    .stack(categoryGroupB, "Category B")
    .x(d3.scaleTime()) // টাইম স্কেল
    .xUnits(d3.timeDays)
    .xAxisLabel("Date")
    .yAxisLabel("Value")
    .renderArea(true)
    .elasticY(true)
    .renderHorizontalGridLines(true)
    .legend(dc.legend().x(500).y(20).itemHeight(13).gap(5)) // লেজেন্ড যোগ করা
    .on('pretransition', function(chart) {
        chart.selectAll('path.line')
            .style('stroke-width', '3px');
    });

// সমস্ত চার্ট রেন্ডার করা
dc.renderAll();

এখানে, legend() ফাংশন ব্যবহার করা হয়েছে লেজেন্ড তৈরি করার জন্য। লেজেন্ডের অবস্থান, উচ্চতা, এবং গ্যাপ কাস্টমাইজ করা হয়েছে।

x(500) এবং y(20): লেজেন্ডের অবস্থান নির্ধারণ।
itemHeight(13): প্রতিটি লেজেন্ড আইটেমের উচ্চতা।
gap(5): লেজেন্ড আইটেমগুলির মধ্যে ব্যবধান।

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

এখন আমরা একটি পূর্ণ কোড উদাহরণ দেখব যেখানে Line Chart এর জন্য লেজেন্ড তৈরি করা হয়েছে।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DC.js Line Chart with Legend</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 Line Chart with Legend</h1>
    <div id="line-chart"></div>

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

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

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

        // ক্যাটেগরি অনুযায়ী গ্রুপ তৈরি
        const categoryGroupA = dateDimension.group().reduceSum(d => d.category === "A" ? d.value : 0);
        const categoryGroupB = dateDimension.group().reduceSum(d => d.category === "B" ? d.value : 0);

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

        lineChart
            .width(600)
            .height(300)
            .dimension(dateDimension)
            .group(categoryGroupA, "Category A")
            .stack(categoryGroupB, "Category B")
            .x(d3.scaleTime()) // টাইম স্কেল
            .xUnits(d3.timeDays)
            .xAxisLabel("Date")
            .yAxisLabel("Value")
            .renderArea(true)
            .elasticY(true)
            .renderHorizontalGridLines(true)
            .legend(dc.legend().x(500).y(20).itemHeight(13).gap(5)) // লেজেন্ড যোগ করা
            .on('pretransition', function(chart) {
                chart.selectAll('path.line')
                    .style('stroke-width', '3px');
            });

        // সমস্ত চার্ট রেন্ডার করা
        dc.renderAll();
    </script>
</body>
</html>

সারাংশ

Legend একটি চার্টে বিভিন্ন সিরিজ বা গ্রুপের মান বুঝতে সহায়ক।
DC.js দিয়ে Line Chart তৈরি করার সময়, লেজেন্ডের মাধ্যমে ক্যাটেগরি A এবং B এর মধ্যে পার্থক্য স্পষ্ট করা হয়েছে।
legend() ফাংশন ব্যবহার করে লেজেন্ড কাস্টমাইজ করা হয়েছে, যেমন অবস্থান, উচ্চতা, এবং ব্যবধান।

এভাবে DC.js দিয়ে আপনি সহজেই বিভিন্ন চার্টের জন্য Legend তৈরি এবং কাস্টমাইজ করতে পারেন।

Content added By

Azizar Rahman Aziz

Custom Legend Styling এবং Interaction

249

DC.js এর Legend বা লেজেন্ড চার্টের বিভিন্ন সিরিজ বা গ্রুপের নাম প্রদর্শন করার জন্য ব্যবহৃত হয়। সাধারণত, লেজেন্ডের মাধ্যমে ব্যবহারকারীরা চার্টের বিভিন্ন সিরিজের মধ্যে পার্থক্য বুঝতে পারেন। এখানে, আমরা Custom Legend Styling এবং Legend Interaction এর মাধ্যমে লেজেন্ড কাস্টমাইজ এবং ইন্টারঅ্যাকশন তৈরি করার প্রক্রিয়া দেখব।

১. Custom Legend Styling

DC.js ব্যবহার করে লেজেন্ডের স্টাইল কাস্টমাইজ করা খুব সহজ। আপনি CSS ব্যবহার করে লেজেন্ডের রঙ, আকার, টাইপ, এবং অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারেন।

উদাহরণ: Custom Legend Styling (লেজেন্ড কাস্টমাইজেশন)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DC.js Custom Legend Styling</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">
    <style>
        /* Custom legend styling */
        .dc-legend-item {
            font-size: 14px;
            font-weight: bold;
            color: #34495e;
            display: flex;
            align-items: center;
            margin-right: 10px;
        }

        .dc-legend-item .legend-symbol {
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }

        .dc-legend-item .legend-symbol.circle {
            border-radius: 50%;
        }

        .dc-legend-item .legend-symbol.square {
            background-color: #3498db;
        }

        .dc-legend-item .legend-text {
            font-size: 12px;
            color: #2c3e50;
        }
    </style>
</head>
<body>
    <h1>Custom Legend Styling with DC.js</h1>
    <div id="chart"></div>
    <script>
        // ডেটাসেট
        const data = [
            { category: "A", value: 30 },
            { category: "B", value: 50 },
            { category: "A", value: 70 },
            { category: "C", value: 90 },
            { category: "B", value: 60 }
        ];

        // Crossfilter সেটআপ
        const ndx = crossfilter(data);
        const categoryDimension = ndx.dimension(d => d.category);
        const categoryGroup = categoryDimension.group().reduceSum(d => d.value);

        // DC.js বার চার্ট তৈরি
        const barChart = dc.barChart("#chart");

        barChart
            .width(600)
            .height(300)
            .dimension(categoryDimension)
            .group(categoryGroup)
            .x(d3.scaleBand())
            .xUnits(dc.units.ordinal)
            .xAxisLabel("Category")
            .yAxisLabel("Value");

        // লেজেন্ড কাস্টমাইজেশন
        barChart.legend(dc.legend())
            .itemHeight(20) // লেজেন্ড আইটেমের উচ্চতা
            .gap(5) // আইটেমগুলির মধ্যে ব্যবধান
            .horizontal(true) // লেজেন্ড অনুভূমিকভাবে প্রদর্শন
            .setCustomLegend(function (chart) {
                return chart.legend().item().selectAll('.dc-legend-item')
                    .style('font-size', '16px')  // কাস্টম ফন্ট সাইজ
                    .style('font-weight', 'bold') // কাস্টম ফন্ট ওয়েট
                    .style('color', '#2c3e50'); // কাস্টম টেক্সট কালার
            });

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

কাস্টম লেজেন্ড স্টাইলিং ব্যাখ্যা:

CSS ক্লাস: .dc-legend-item, .legend-symbol, .legend-text ইত্যাদি ব্যবহার করে লেজেন্ডের আইটেম, সিম্বল এবং টেক্সট কাস্টমাইজ করা হয়েছে।
লেজেন্ড সিম্বল: .legend-symbol.circle এবং .legend-symbol.square ক্লাস ব্যবহার করে লেজেন্ড সিম্বলের আকার এবং রঙ নির্ধারণ করা হয়েছে।
লেজেন্ডের ফন্ট: font-size, font-weight, এবং color প্রপার্টি দিয়ে লেজেন্ডের টেক্সটের ফন্ট সাইজ এবং রঙ কাস্টমাইজ করা হয়েছে।

২. Legend Interaction (লেজেন্ড ইন্টারঅ্যাকশন)

DC.js এ লেজেন্ডের সাথে ইন্টারঅ্যাকশন যোগ করা যায়। এর মাধ্যমে ব্যবহারকারীরা লেজেন্ডের মাধ্যমে সিরিজগুলো সিলেক্ট বা ডিসিলেক্ট করতে পারেন, যা চার্টের ডেটা পরিবর্তন করে।

উদাহরণ: Legend Interaction (লেজেন্ড ইন্টারঅ্যাকশন)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DC.js Legend Interaction</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>Legend Interaction with DC.js</h1>
    <div id="interactive-chart"></div>
    <script>
        // ডেটাসেট
        const data = [
            { category: "A", value: 30 },
            { category: "B", value: 50 },
            { category: "A", value: 70 },
            { category: "C", value: 90 },
            { category: "B", value: 60 }
        ];

        // Crossfilter সেটআপ
        const ndx = crossfilter(data);
        const categoryDimension = ndx.dimension(d => d.category);
        const categoryGroup = categoryDimension.group().reduceSum(d => d.value);

        // DC.js বার চার্ট তৈরি
        const barChart = dc.barChart("#interactive-chart");

        barChart
            .width(600)
            .height(300)
            .dimension(categoryDimension)
            .group(categoryGroup)
            .x(d3.scaleBand())
            .xUnits(dc.units.ordinal)
            .xAxisLabel("Category")
            .yAxisLabel("Value");

        // লেজেন্ড ইন্টারঅ্যাকশন
        barChart.legend(dc.legend())
            .itemHeight(20)
            .gap(5)
            .horizontal(true)
            .highlightSelected(true) // সিলেক্ট করা আইটেম হাইলাইট করা
            .toggleable(true); // লেজেন্ডের মাধ্যমে সিরিজ টগল (on/off) করা

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

লেজেন্ড ইন্টারঅ্যাকশন ব্যাখ্যা:

toggleable(true): এই অপশনটি দিয়ে লেজেন্ডে ক্লিক করলে সিরিজটি টগল হবে, অর্থাৎ এটি অ্যাকটিভ বা ডিএ্যাকটিভ করা যাবে।
highlightSelected(true): যখন লেজেন্ডের কোন আইটেমে ক্লিক করা হবে, তখন সেটি হাইলাইট হবে এবং কেবল সেই সিরিজের ডেটা প্রদর্শিত হবে।

৩. আরও কাস্টম স্টাইলিং এবং ইন্টারঅ্যাকশন

লেজেন্ডের টেক্সট এবং রঙ পরিবর্তন: .itemText() এবং .itemColor() ব্যবহার করে লেজেন্ডের টেক্সট এবং রঙ কাস্টমাইজ করা যায়।
গ্রেডিয়েন্ট বা ইমেজ ব্যবহার: লেজেন্ড আইটেমের জন্য গ্রেডিয়েন্ট বা কাস্টম ইমেজ ব্যবহার করতে পারেন।

সারাংশ

Custom Legend Styling: DC.js দিয়ে লেজেন্ডের স্টাইল সহজে কাস্টমাইজ করা যায় CSS এর মাধ্যমে, যেমন ফন্ট সাইজ, রঙ, এবং সিম্বল আকার।
Legend Interaction: toggleable(true) এবং highlightSelected(true) ব্যবহার করে লেজেন্ডের মাধ্যমে ইন্টারঅ্যাকশন তৈরি করা যায়, যাতে ব্যবহারকারীরা সিরিজ সিলেক্ট বা ডিসিলেক্ট করতে পারেন।

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

Content added By

Azizar Rahman Aziz

259

DC.js দিয়ে Tooltip তৈরি এবং Data Points এ Hover Interaction যোগ করা ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব করে তোলে। Tooltip ব্যবহার করে আপনি ব্যবহারকারীদের জন্য ডেটা পয়েন্টের সাথে সম্পর্কিত অতিরিক্ত তথ্য প্রদর্শন করতে পারেন। Hover interaction ব্যবহার করে, যখন ব্যবহারকারী চার্টে কোনো ডেটা পয়েন্টের উপর মাউস রাখেন, তখন নির্দিষ্ট তথ্য বা ভিজ্যুয়াল প্রতিক্রিয়া প্রদান করা হয়।

১. Tooltip তৈরি

Tooltip সাধারণত একটি ছোট পপ-আপ উইন্ডো হিসেবে ডেটা পয়েন্টের সাথে সম্পর্কিত অতিরিক্ত তথ্য প্রদর্শন করে। DC.js এর মাধ্যমে Tooltip তৈরি করতে D3.js ব্যবহার করা হয়, কারণ DC.js D3.js এর উপর ভিত্তি করে কাজ করে।

২. DC.js দিয়ে Tooltip তৈরি

DC.js এর on('mouseover') ইভেন্ট ব্যবহার করে আপনি টুলটিপ তৈরি করতে পারেন। এখানে একটি সহজ উদাহরণ দেয়া হয়েছে যেখানে বার চার্টে মাউসওভার করার সময় টুলটিপ দেখা যাবে:

উদাহরণ: Tooltip তৈরি

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DC.js Tooltip Example</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">
    <style>
        .tooltip {
            position: absolute;
            padding: 5px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border-radius: 5px;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <h1>DC.js Tooltip Example</h1>
    <div id="bar-chart"></div>

    <div class="tooltip" id="tooltip"></div> <!-- Tooltip div -->

    <script>
        // ডেটাসেট
        const data = [
            { category: "A", value: 30 },
            { category: "B", value: 80 },
            { category: "C", value: 45 },
            { category: "D", value: 60 },
            { category: "E", value: 20 },
            { category: "F", value: 90 }
        ];

        // Crossfilter সেটআপ
        const ndx = crossfilter(data);
        const dimension = ndx.dimension(d => d.category);
        const group = dimension.group().reduceSum(d => d.value);

        // DC.js বার চার্ট তৈরি
        const barChart = dc.barChart("#bar-chart");

        barChart
            .width(600)
            .height(300)
            .dimension(dimension)
            .group(group)
            .x(d3.scaleBand())
            .xUnits(dc.units.ordinal)
            .xAxisLabel("Categories")
            .yAxisLabel("Values");

        // Tooltip interaction
        const tooltip = d3.select("#tooltip");

        barChart.selectAll("rect")
            .on('mouseover', function(event, d) {
                const x = event.pageX + 10; // X অবস্থান
                const y = event.pageY + 10; // Y অবস্থান
                tooltip.style("visibility", "visible")
                    .style("top", `${y}px`)
                    .style("left", `${x}px`)
                    .text(`Category: ${d.key}, Value: ${d.value}`);
            })
            .on('mouseout', function() {
                tooltip.style("visibility", "hidden");
            });

        // চার্ট রেন্ডার
        dc.renderAll();
    </script>
</body>
</html>

কোড ব্যাখ্যা:

Tooltip স্টাইল: .tooltip ক্লাস ব্যবহার করে একটি সিম্পল পপ-আপ উইন্ডো তৈরি করা হয়েছে, যা ডেটা পয়েন্টের উপর মাউস রাখলে প্রদর্শিত হবে।
Hover Interaction: mouseover এবং mouseout ইভেন্ট ব্যবহার করে টুলটিপটি সক্রিয় এবং নিষ্ক্রিয় করা হয়েছে। mouseover ইভেন্টে মাউসের পজিশন অনুযায়ী টুলটিপের অবস্থান এবং তথ্য আপডেট করা হয়।

৩. Data Points এ Hover Interaction যোগ করা

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

উদাহরণ: Hover Interaction

// Hover interaction (bar chart)
barChart.selectAll("rect")
    .on('mouseover', function(event, d) {
        d3.select(this).attr('fill', 'orange'); // Hovering bar color change
        tooltip.style("visibility", "visible")
            .text(`Category: ${d.key}, Value: ${d.value}`);
    })
    .on('mouseout', function() {
        d3.select(this).attr('fill', 'steelblue'); // Reset bar color
        tooltip.style("visibility", "hidden");
    });

কোড ব্যাখ্যা:

mouseover: যখন ডেটা পয়েন্টের উপর মাউস যাবে, তখন ওই পয়েন্টের রঙ পরিবর্তন হবে এবং টুলটিপ প্রদর্শিত হবে।
mouseout: মাউস ডেটা পয়েন্ট থেকে চলে গেলে রঙ পুনরায় পূর্বাবস্থায় ফিরে আসবে এবং টুলটিপটি লুকিয়ে যাবে।

৪. Tooltip কাস্টমাইজ করা

আপনি Tooltip এর ডিজাইন কাস্টমাইজ করতে পারেন, যেমন:

রঙ: টুলটিপের ব্যাকগ্রাউন্ড, টেক্সট রঙ কাস্টমাইজ করা।
পদবী: টুলটিপের সীমানা বা বর্ডার আকার কাস্টমাইজ করা।
অ্যানিমেশন: টুলটিপের প্রদর্শন এবং অদৃশ্য হওয়া মসৃণ করতে CSS অ্যানিমেশন যোগ করা।

উদাহরণ: কাস্টম স্টাইল টুলটিপ

.tooltip {
    position: absolute;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-radius: 5px;
    pointer-events: none;
    font-size: 14px;
    transition: opacity 0.3s ease;
}

এই স্টাইল টুলটিপে ব্যাকগ্রাউন্ড কালার, প্যাডিং, টেক্সট রঙ এবং বর্ডার রেডিয়াস নির্ধারণ করে এবং transition প্রপার্টি দিয়ে টুলটিপের প্রদর্শন মসৃণ করে।

সারাংশ

Tooltip এবং Hover Interaction ডেটা পয়েন্টের সাথে যোগাযোগ করার জন্য অত্যন্ত কার্যকর।
mouseover এবং mouseout ইভেন্ট ব্যবহার করে টুলটিপ এবং হোভার ইন্টারঅ্যাকশন তৈরি করা হয়।
DC.js এবং D3.js এর মাধ্যমে ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব ভিজ্যুয়ালাইজেশন তৈরি করা সম্ভব।

Content added By

Azizar Rahman Aziz

333

DC.js ব্যবহার করে ডেটা ভিজ্যুয়ালাইজেশনে Custom Tooltip (কাস্টম টুলটিপ) তৈরি করা এবং styling করা সহজ। টুলটিপগুলি চার্টের উপর মাউস হোভার করলে প্রদর্শিত হয় এবং ব্যবহারকারীদের জন্য তথ্য প্রদানের একটি কার্যকর উপায়।

এখানে আমরা দেখব কিভাবে DC.js এর মাধ্যমে কাস্টম টুলটিপ কন্টেন্ট তৈরি করা যায় এবং তার স্টাইল কাস্টমাইজ করা যায়।

১. টুলটিপ কন্টেন্ট কাস্টমাইজেশন

DC.js দ্বারা তৈরি চার্টে ডিফল্ট টুলটিপ সাধারণত D3.js এর title অ্যাট্রিবিউটের মাধ্যমে তৈরি হয়। তবে আপনি কাস্টম টুলটিপ কন্টেন্ট তৈরি করতে D3.js এর mouseover এবং mouseout ইভেন্ট ব্যবহার করতে পারেন।

২. DC.js: Custom Tooltip Content এবং Styling

নিচে একটি উদাহরণ দেওয়া হল, যেখানে একটি Bar Chart তৈরি করা হয়েছে এবং কাস্টম টুলটিপ কন্টেন্ট এবং স্টাইল যোগ করা হয়েছে।

৩. HTML এবং JavaScript কোড

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DC.js Custom Tooltip and Styling</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">
    <style>
        .tooltip {
            position: absolute;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 5px;
            border-radius: 4px;
            display: none;
            pointer-events: none;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h1>DC.js Custom Tooltip and Styling</h1>
    <div id="bar-chart"></div>
    <div class="tooltip" id="tooltip"></div>

    <script>
        // ডেটাসেট
        const data = [
            { category: "A", value: 30 },
            { category: "B", value: 50 },
            { category: "C", value: 70 },
            { category: "D", value: 20 },
            { category: "E", value: 60 }
        ];

        // Crossfilter সেটআপ
        const ndx = crossfilter(data);
        const categoryDimension = ndx.dimension(d => d.category);
        const categoryGroup = categoryDimension.group().reduceSum(d => d.value);

        // DC.js বার চার্ট
        const barChart = dc.barChart("#bar-chart");

        barChart
            .width(600)
            .height(300)
            .dimension(categoryDimension)
            .group(categoryGroup)
            .x(d3.scaleBand())
            .xUnits(dc.units.ordinal)
            .xAxisLabel("Categories")
            .yAxisLabel("Values")
            .renderHorizontalGridLines(true);

        // চার্ট রেন্ডার
        dc.renderAll();

        // টুলটিপ কাস্টমাইজেশন
        const tooltip = d3.select("#tooltip");

        barChart.on("pretransition", function(chart) {
            chart.selectAll("rect")
                .on("mouseover", function(event, d) {
                    const xPosition = event.pageX + 5;
                    const yPosition = event.pageY - 28;
                    
                    // টুলটিপ কন্টেন্ট
                    tooltip.html(`Category: ${d.key}<br>Value: ${d.value}`)
                        .style("left", `${xPosition}px`)
                        .style("top", `${yPosition}px`)
                        .style("display", "inline-block");
                })
                .on("mouseout", function() {
                    tooltip.style("display", "none");
                });
        });
    </script>
</body>
</html>

৪. কোডের ব্যাখ্যা

১. ডেটাসেট তৈরি এবং Crossfilter সেটআপ:

এখানে একটি সাধারণ ডেটাসেট তৈরি করা হয়েছে, যেখানে প্রতিটি ক্যাটেগরি (category) এর সাথে একটি মান (value) যুক্ত করা হয়েছে। crossfilter() ব্যবহার করে ডেটা ইন্ডেক্স করা হয়েছে এবং dimension ও group তৈরি করা হয়েছে।

const data = [
    { category: "A", value: 30 },
    { category: "B", value: 50 },
    { category: "C", value: 70 },
    { category: "D", value: 20 },
    { category: "E", value: 60 }
];

const ndx = crossfilter(data);
const categoryDimension = ndx.dimension(d => d.category);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);

২. DC.js বার চার্ট কনফিগারেশন:

DC.js এর barChart() ফাংশন ব্যবহার করে একটি বার চার্ট তৈরি করা হয়েছে এবং সেই অনুযায়ী ডাইমেনশন এবং গ্রুপ সেট করা হয়েছে।

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

barChart
    .width(600)
    .height(300)
    .dimension(categoryDimension)
    .group(categoryGroup)
    .x(d3.scaleBand())
    .xUnits(dc.units.ordinal)
    .xAxisLabel("Categories")
    .yAxisLabel("Values")
    .renderHorizontalGridLines(true);

৩. কাস্টম টুলটিপ কন্টেন্ট:

mouseover ইভেন্টের মাধ্যমে টুলটিপ কাস্টম কন্টেন্ট সেট করা হয়েছে। টুলটিপের কন্টেন্টে category এবং value দেখানো হচ্ছে।

const tooltip = d3.select("#tooltip");

barChart.on("pretransition", function(chart) {
    chart.selectAll("rect")
        .on("mouseover", function(event, d) {
            const xPosition = event.pageX + 5;
            const yPosition = event.pageY - 28;
            
            // টুলটিপ কন্টেন্ট
            tooltip.html(`Category: ${d.key}<br>Value: ${d.value}`)
                .style("left", `${xPosition}px`)
                .style("top", `${yPosition}px`)
                .style("display", "inline-block");
        })
        .on("mouseout", function() {
            tooltip.style("display", "none");
        });
});

এখানে, টুলটিপের কন্টেন্ট এবং পজিশন mouseover ইভেন্টের মাধ্যমে কাস্টমাইজ করা হয়েছে।

৪. টুলটিপ স্টাইলিং:

টুলটিপের জন্য একটি CSS ক্লাস tooltip ব্যবহার করা হয়েছে, যেখানে ব্যাকগ্রাউন্ড কালার, প্যাডিং, স্ট্রোক এবং অন্যান্য স্টাইল প্রোপার্টি দেওয়া হয়েছে।

.tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px;
    border-radius: 4px;
    display: none;
    pointer-events: none;
    font-size: 14px;
}

৫. `dc.renderAll()` দিয়ে চার্ট রেন্ডার:

সবশেষে, dc.renderAll() ফাংশন দিয়ে চার্ট রেন্ডার করা হয়।

dc.renderAll();

Custom Tooltip Content: আপনি যেকোনো ডেটা কন্টেন্ট কাস্টমাইজ করে টুলটিপে প্রদর্শন করতে পারেন। এখানে, আমরা ক্যাটেগরি এবং মান দেখাচ্ছি।
Tooltip Styling: টুলটিপের ব্যাকগ্রাউন্ড, প্যাডিং, স্টাইল এবং অবস্থান কাস্টমাইজ করা হয়েছে।
Interactive Tooltips: টুলটিপটি মাউসের অবস্থানের সাথে অটোমেটিক্যালি স্থানান্তরিত হয় এবং মাউস আউট করলে নিভে যায়।

এই প্রক্রিয়া ব্যবহার করে আপনি DC.js এর বিভিন্ন চার্টে Custom Tooltip কন্টেন্ট এবং Styling যোগ করতে পারেন।

Content added By

Azizar Rahman Aziz

DC.js পরিচিতি DC.js সেটআপ এবং ইনস্টলেশন Crossfilter এর মাধ্যমে ডেটা হ্যান্ডলিং DC.js এর বেসিক চার্ট তৈরি ডায়নামিক চার্ট ইন্টারঅ্যাকশন

Legend এবং Tooltip কাস্টমাইজেশন

১. Legend কাস্টমাইজেশন

Legend কাস্টমাইজেশন করার জন্য কিছু সাধারণ পদ্ধতি:

১.1 Legend প্রাথমিক কনফিগারেশন

১.2 Legend কাস্টমাইজেশন (পদক্ষেপসমূহ)

২. Tooltip কাস্টমাইজেশন

২.1 Tooltip তৈরি করা

২.2 Tooltip কাস্টমাইজেশন (পদক্ষেপসমূহ)

২.3 Tooltip Styling

৩. Legend এবং Tooltip কাস্টমাইজ করার উদাহরণ

সারাংশ

DC.js চার্টের জন্য Legend তৈরি করা

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

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

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

৪. DC.js Line Chart তৈরি এবং Legend যোগ করা

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

সারাংশ

Custom Legend Styling এবং Interaction

১. Custom Legend Styling

উদাহরণ: Custom Legend Styling (লেজেন্ড কাস্টমাইজেশন)

কাস্টম লেজেন্ড স্টাইলিং ব্যাখ্যা:

২. Legend Interaction (লেজেন্ড ইন্টারঅ্যাকশন)

উদাহরণ: Legend Interaction (লেজেন্ড ইন্টারঅ্যাকশন)

লেজেন্ড ইন্টারঅ্যাকশন ব্যাখ্যা:

৩. আরও কাস্টম স্টাইলিং এবং ইন্টারঅ্যাকশন

সারাংশ

Tooltip তৈরি এবং Data Points এ Hover Interaction যোগ করা

১. Tooltip তৈরি

২. DC.js দিয়ে Tooltip তৈরি

উদাহরণ: Tooltip তৈরি

কোড ব্যাখ্যা:

৩. Data Points এ Hover Interaction যোগ করা

উদাহরণ: Hover Interaction

কোড ব্যাখ্যা:

৪. Tooltip কাস্টমাইজ করা

উদাহরণ: কাস্টম স্টাইল টুলটিপ

সারাংশ

Custom Tooltip Content এবং Styling

১. টুলটিপ কন্টেন্ট কাস্টমাইজেশন

২. DC.js: Custom Tooltip Content এবং Styling

৩. HTML এবং JavaScript কোড

৪. কোডের ব্যাখ্যা

১. ডেটাসেট তৈরি এবং Crossfilter সেটআপ:

২. DC.js বার চার্ট কনফিগারেশন:

৩. কাস্টম টুলটিপ কন্টেন্ট:

৪. টুলটিপ স্টাইলিং:

৫. dc.renderAll() দিয়ে চার্ট রেন্ডার:

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!

৫. `dc.renderAll()` দিয়ে চার্ট রেন্ডার: