Advanced Interaction Techniques (Zoom, Tooltip)

DC.js ব্যবহার করে আপনি বিভিন্ন Advanced Interaction Techniques যেমন Zoom এবং Tooltip সহ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন। এই টেকনিকগুলো ডেটা বিশ্লেষণ এবং ইন্টারেক্টিভ ফিল্টারিং আরো উন্নত করে তোলে। নিচে Zoom এবং Tooltip ব্যবহারের পদ্ধতি আলোচনা করা হলো।

১. Zoom Implementation in DC.js

Zoom ফিচার ব্যবহার করে আপনি চার্টের বিভিন্ন অংশে স্কেলিং এবং প্যানিং করতে পারেন। এটি D3.js এর scale ফাংশন ব্যবহার করে সহজেই যুক্ত করা যায়।

Line Chart Example with Zoom

এখানে একটি Line Chart তৈরি করা হয়েছে এবং Zoom ফিচার যুক্ত করা হয়েছে:

ডেটাসেট উদাহরণ

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

Zoom Chart Code

const ndx = crossfilter(data);

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

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

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

lineChart
    .width(600)
    .height(300)
    .dimension(dateDimension)
    .group(valueGroup)
    .x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-05")])) // টাইম স্কেল
    .xUnits(d3.timeDays) // টাইম ইউনিট নির্ধারণ
    .renderHorizontalGridLines(true)
    .on("zoom", function() {
        // Zoom ব্যবহারকারীর স্কেল পরিবর্তনের সময়
        console.log("Zoom applied");
    });

dc.renderAll();

Zoom Integration

• Zoom ব্যবহার করতে, dc.lineChart() এর মধ্যে on("zoom", function() {...}) ব্যবহার করা হয়।
• এটি d3.scaleTime() এর মাধ্যমে সময় স্কেল করার সুবিধা দেয় এবং ব্যবহারকারী যখন চার্টের স্কেল পরিবর্তন করে, তখন এটি ইন্টারেক্টিভভাবে রেন্ডার হয়।

২. Tooltip Implementation in DC.js

Tooltip ব্যবহারকারীকে মাউস হোভার করার সময় অতিরিক্ত তথ্য দেখানোর সুযোগ দেয়। DC.js এর সাথে D3.js এর title() ফাংশন ব্যবহার করে টুলটিপ তৈরি করা যায়।

Tooltip Example for Bar Chart

এখানে একটি Bar Chart তৈরি করা হয়েছে এবং প্রতিটি বারের জন্য Tooltip ফিচার যুক্ত করা হয়েছে:

ডেটাসেট উদাহরণ

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

Bar Chart with Tooltip Code

const ndx = crossfilter(data);

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

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

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

barChart
    .width(600)
    .height(300)
    .dimension(categoryDimension)
    .group(categoryGroup)
    .x(d3.scaleBand()) // x axis scale
    .xUnits(dc.units.ordinal)
    .on('postRender', function(chart) {
        chart.selectAll('rect')
            .on('mouseover', function(d) {
                const value = d.data.value;
                const category = d.data.key;
                const tooltipText = `Category: ${category}<br>Value: ${value}`;
                
                // Tooltip তৈরি
                const tooltip = d3.select('body').append('div')
                    .attr('class', 'tooltip')
                    .style('position', 'absolute')
                    .style('background', 'rgba(0, 0, 0, 0.7)')
                    .style('color', '#fff')
                    .style('padding', '5px')
                    .style('border-radius', '4px')
                    .html(tooltipText)
                    .style('left', `${d3.event.pageX + 5}px`)
                    .style('top', `${d3.event.pageY + 5}px`);
            })
            .on('mouseout', function() {
                // Tooltip মুছে ফেলুন
                d3.select('.tooltip').remove();
            });
    });

dc.renderAll();

HTML Code for Bar Chart

<div id="bar-chart"></div>

Tooltip Integration

• এখানে, on('mouseover') ইভেন্টে, প্রতিটি বারের উপর মাউস হোভার করার সময় টুলটিপ দেখানো হয়।
• Tooltip স্টাইল করার জন্য D3.js এর append(), style(), এবং html() ফাংশন ব্যবহার করা হয়েছে।
• mouseout ইভেন্টে, টুলটিপটি সরিয়ে ফেলা হয়।

৩. সম্পূর্ণ কোড উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DC.js Advanced Interactions: Zoom and Tooltip</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 Advanced Interaction Example</h1>
    
    <div id="line-chart"></div>
    <div id="bar-chart"></div>

    <script>
        // Line Chart with Zoom
        const data = [
            { date: "2023-12-01", value: 30 },
            { date: "2023-12-02", value: 50 },
            { date: "2023-12-03", value: 70 },
            { date: "2023-12-04", value: 20 },
            { date: "2023-12-05", value: 60 }
        ];

        const ndx = crossfilter(data);
        const dateDimension = ndx.dimension(d => d.date);
        const valueGroup = dateDimension.group().reduceSum(d => d.value);

        const lineChart = dc.lineChart("#line-chart");
        lineChart
            .width(600)
            .height(300)
            .dimension(dateDimension)
            .group(valueGroup)
            .x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-05")]))
            .xUnits(d3.timeDays)
            .renderHorizontalGridLines(true)
            .on("zoom", function() {
                console.log("Zoom applied");
            });

        // Bar Chart with Tooltip
        const barData = [
            { category: "A", value: 30 },
            { category: "B", value: 50 },
            { category: "C", value: 70 },
            { category: "D", value: 20 },
            { category: "E", value: 60 }
        ];

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

        const barChart = dc.barChart("#bar-chart");
        barChart
            .width(600)
            .height(300)
            .dimension(categoryDimension)
            .group(categoryGroup)
            .x(d3.scaleBand())
            .xUnits(dc.units.ordinal)
            .on('postRender', function(chart) {
                chart.selectAll('rect')
                    .on('mouseover', function(d) {
                        const value = d.data.value;
                        const category = d.data.key;
                        const tooltipText = `Category: ${category}<br>Value: ${value}`;
                        
                        // Tooltip
                        const tooltip = d3.select('body').append('div')
                            .attr('class', 'tooltip')
                            .style('position', 'absolute')
                            .style('background', 'rgba(0, 0, 0, 0.7)')
                            .style('color', '#fff')
                            .style('padding', '5px')
                            .style('border-radius', '4px')
                            .html(tooltipText)
                            .style('left', `${d3.event.pageX + 5}px`)
                            .style('top', `${d3.event.pageY + 5}px`);
                    })
                    .on('mouseout', function() {
                        d3.select('.tooltip').remove();
                    });
            });

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

সারাংশ

• Zoom: DC.js এর সাথে D3.js এর scale ফাংশন ব্যবহার করে ইন্টারেক্টিভ জুম ফিচার তৈরি করা যায়।
• Tooltip: DC.js এর চার্টে D3.js এর mouseover ইভেন্ট ব্যবহার করে টুলটিপ যুক্ত করা হয়, যা মাউস হোভার করলে অতিরিক্ত তথ্য প্রদর্শন করে।

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