Time Series Visualization

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

273

DC.js একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি যা D3.js এবং Crossfilter এর সাহায্যে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়ক। Time Series Visualization (টাইম সিরিজ ভিজ্যুয়ালাইজেশন) হল একটি ডেটা ভিজ্যুয়ালাইজেশন পদ্ধতি যা সময়ের সাথে সাথে ডেটার পরিবর্তন প্রদর্শন করতে ব্যবহৃত হয়। DC.js-এ টাইম সিরিজ ডেটার ভিজ্যুয়ালাইজেশন সাধারণত Line Chart বা Bar Chart এর মাধ্যমে করা হয়।

এখানে, আমরা DC.js ব্যবহার করে Time Series Visualization তৈরি করার প্রক্রিয়া নিয়ে আলোচনা করব।

Time Series Visualization তৈরি করার জন্য ধাপ

১. ডেটাসেট প্রস্তুতি

টাইম সিরিজ ডেটা সাধারণত Date বা Timestamp সহ থাকে, এবং এটি নির্দিষ্ট সময়ের মধ্যে একটি চলমান পরিবর্তন দেখায়। এখানে আমরা একটি উদাহরণ ডেটাসেট তৈরি করব যেখানে প্রতিটি ডেটা পয়েন্ট একটি নির্দিষ্ট তারিখের জন্য মান রয়েছে।

const data = [
    { date: "2023-01-01", value: 30 },
    { date: "2023-02-01", value: 45 },
    { date: "2023-03-01", value: 60 },
    { date: "2023-04-01", value: 80 },
    { date: "2023-05-01", value: 100 },
    { date: "2023-06-01", value: 120 }
];

এখানে, date এবং value নামে দুটি ফিল্ড রয়েছে। date টাইম সিরিজ ডেটা পয়েন্টের জন্য সময় নির্দেশ করে এবং value হলো সেই সময়ে থাকা ডেটার মান।

২. Crossfilter সেটআপ

Crossfilter ডেটাসেটের উপর ফিল্টার এবং গ্রুপিং পরিচালনা করে। টাইম সিরিজ ডেটা জন্য Crossfilter ব্যবহারের মাধ্যমে Date ডাইমেনশন তৈরি করা হবে।

const ndx = crossfilter(data);

// Date ডাইমেনশন তৈরি
const dateDimension = ndx.dimension(d => d3.timeParse("%Y-%m-%d")(d.date));

এখানে d3.timeParse("%Y-%m-%d") ব্যবহার করে তারিখ স্ট্রিংটি একটি JavaScript Date Object তে রূপান্তর করা হচ্ছে।

৩. DC.js Line Chart তৈরি

DC.js এর lineChart() ফাংশন ব্যবহার করে টাইম সিরিজ ডেটার ভিজ্যুয়ালাইজেশন তৈরি করা হয়। এখানে আমরা X-অক্ষে Date এবং Y-অক্ষে Value প্রদর্শন করব।

const lineChart = dc.lineChart("#line-chart");

lineChart
    .width(600) // চার্টের প্রস্থ
    .height(300) // চার্টের উচ্চতা
    .dimension(dateDimension) // ডাইমেনশন হিসেবে Date ব্যবহার
    .group(dateDimension.group().reduceSum(d => d.value)) // মানের যোগফল
    .x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-06-01")])) // X-অক্ষে সময়
    .xAxisLabel("Date") // X-অক্ষের লেবেল
    .yAxisLabel("Value") // Y-অক্ষের লেবেল
    .renderTitle(true); // টাইটেল প্রদর্শন

এখানে scaleTime() ব্যবহার করে Date এর জন্য একটি টাইম স্কেল তৈরি করা হয়েছে। domain([startDate, endDate]) দিয়ে টাইম রেঞ্জ নির্ধারণ করা হয়েছে। এটি টাইম সিরিজ ডেটার জন্য সময়কে সঠিকভাবে স্কেল করে।

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DC.js Time Series Visualization</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 Time Series Visualization</h1>
    <div id="line-chart"></div>
    <script>
        // ডেটাসেট
        const data = [
            { date: "2023-01-01", value: 30 },
            { date: "2023-02-01", value: 45 },
            { date: "2023-03-01", value: 60 },
            { date: "2023-04-01", value: 80 },
            { date: "2023-05-01", value: 100 },
            { date: "2023-06-01", value: 120 }
        ];

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

        // Date ডাইমেনশন তৈরি
        const dateDimension = ndx.dimension(d => d3.timeParse("%Y-%m-%d")(d.date));

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

        lineChart
            .width(600) // চার্টের প্রস্থ
            .height(300) // চার্টের উচ্চতা
            .dimension(dateDimension) // ডাইমেনশন হিসেবে Date ব্যবহার
            .group(dateDimension.group().reduceSum(d => d.value)) // মানের যোগফল
            .x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-06-01")])) // X-অক্ষে সময়
            .xAxisLabel("Date") // X-অক্ষের লেবেল
            .yAxisLabel("Value") // Y-অক্ষের লেবেল
            .renderTitle(true); // টাইটেল প্রদর্শন

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

৫. Time Series Visualization এর সুবিধা

ট্রেন্ড প্রদর্শন: টাইম সিরিজ ভিজ্যুয়ালাইজেশন সময়ের সাথে ডেটার পরিবর্তন, প্যাটার্ন এবং ট্রেন্ড সহজে প্রদর্শন করে।
ডেটার গভীর বিশ্লেষণ: ব্যবহারকারীরা ডেটার সাথে ইন্টারঅ্যাক্ট করে অতীতের প্রবণতা দেখতে পারে এবং ভবিষ্যতের জন্য পূর্বাভাস তৈরি করতে পারে।
ইন্টারেক্টিভ ফিল্টারিং: DC.js-এ Crossfilter ব্যবহার করে ডেটা ইন্টারঅ্যাক্টিভভাবে ফিল্টার করা যায়, যা ডেটার নির্দিষ্ট অংশের উপর বিশ্লেষণ করা সহজ করে তোলে।

সারাংশ

Time Series Visualization টাইম ডেটা বিশ্লেষণে ব্যবহৃত হয়, যেখানে Line Chart অথবা Bar Chart এর মাধ্যমে সময়ের সাথে ডেটার পরিবর্তন প্রদর্শন করা হয়।
DC.js এ d3.scaleTime() এবং Crossfilter ব্যবহার করে টাইম সিরিজ ডেটা চমৎকারভাবে ভিজ্যুয়ালাইজ করা যায়।
টাইম সিরিজ ডেটার জন্য DC.js এর lineChart() ব্যবহার করে সঠিকভাবে ডেটা স্কেল এবং রেঞ্জ নির্ধারণ করা হয়।

এইভাবে, আপনি DC.js ব্যবহার করে সহজেই Time Series Visualization তৈরি করতে পারেন।

Content added By

Azizar Rahman Aziz

Time Series Data নিয়ে কাজ করা

226

DC.js একটি শক্তিশালী লাইব্রেরি, যা D3.js এবং Crossfilter এর উপর ভিত্তি করে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করে। Time Series Data বা সময়ভিত্তিক ডেটার সাথে কাজ করার জন্য DC.js অত্যন্ত কার্যকর, বিশেষ করে যখন ডেটার পরিবর্তন এবং প্রবণতা নিরীক্ষণ করতে হয়।

Time Series Data এর সাথে কাজ করার জন্য Line Chart বা Scatter Plot সহ বিভিন্ন ধরনের গ্রাফ ব্যবহার করা যেতে পারে। এখানে Time Series Data নিয়ে কাজ করার জন্য একটি উদাহরণ দেওয়া হয়েছে, যেখানে DC.js ব্যবহার করে Time Series ডেটার উপর একটি Line Chart তৈরি করা হবে।

১. Time Series Data প্রস্তুত

Time Series Data হল এমন ডেটা, যেখানে প্রতিটি রেকর্ডের সাথে একটি নির্দিষ্ট সময় বা তারিখ যুক্ত থাকে। উদাহরণস্বরূপ, আপনার কাছে যদি কোনও কোম্পানির শেয়ারের দাম প্রতি দিন পরিবর্তিত হয়, তাহলে এটি একটি টাইম সিরিজ ডেটা হবে।

উদাহরণ Time Series Data

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

এখানে, প্রতিটি রেকর্ডে date এবং value রয়েছে। date এর মাধ্যমে আমরা সময়ের সাথে ডেটার পরিবর্তন ট্র্যাক করব এবং value দিয়ে আমরা সেই সময়ের মান দেখাবো।

২. Crossfilter দিয়ে ডেটা ইন্ডেক্স করা

Time Series Data ব্যবহারের জন্য Crossfilter দিয়ে ডেটা ইন্ডেক্স করতে হবে। date এবং value এর ওপর ভিত্তি করে ডাইমেনশন তৈরি করা হবে।

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

এখানে, dateDimension তৈরি করা হয়েছে যেখানে ডেটার তারিখ (date) অনুসারে ডাইমেনশন তৈরি হয়েছে এবং valueGroup দিয়ে তার মানের (value) যোগফল বের করা হচ্ছে।

৩. Line Chart তৈরি করা

Time Series Data প্রদর্শন করার জন্য Line Chart সবচেয়ে উপযুক্ত চার্ট। DC.js এর lineChart ব্যবহার করে Time Series Data এর উপর একটি লাইন চার্ট তৈরি করা হবে।

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-06")]))  // এক্স-অক্ষের জন্য সময় ভিত্তিক স্কেল
    .xAxisLabel("Date") // এক্স-অক্ষের লেবেল
    .yAxisLabel("Value") // ওয়াই-অক্ষের লেবেল
    .elasticY(true) // Y অক্ষের স্কেল স্বয়ংক্রিয়ভাবে সামঞ্জস্য হবে
    .renderArea(true) // চার্টের নিচে আংশিক পূর্ণতা দেখাবে
    .on("filtered", function() {
        console.log("Chart filtered");
    });

এখানে:

d3.scaleTime() ব্যবহার করে এক্স-অক্ষের জন্য সময় ভিত্তিক স্কেল তৈরি করা হয়েছে।
elasticY(true) দিয়ে Y অক্ষের স্কেল স্বয়ংক্রিয়ভাবে সামঞ্জস্য হচ্ছে।

৪. চার্ট রেন্ডার করা

ডেটা লোড এবং কাস্টমাইজেশনের পরে, dc.renderAll() ব্যবহার করে সমস্ত চার্ট রেন্ডার করতে হবে।

dc.renderAll();

এটি সমস্ত DC.js চার্ট রেন্ডার করবে এবং ডেটা ভিজ্যুয়ালাইজেশন দেখাবে।

৫. সম্পূর্ণ উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DC.js Time Series 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">
</head>
<body>
    <h1>DC.js Time Series Chart</h1>

    <!-- Time Series Line Chart -->
    <div id="line-chart"></div>

    <script>
        // Time Series Data
        const data = [
            { date: "2023-12-01", value: 30 },
            { date: "2023-12-02", value: 45 },
            { date: "2023-12-03", value: 50 },
            { date: "2023-12-04", value: 70 },
            { date: "2023-12-05", value: 65 },
            { date: "2023-12-06", value: 90 }
        ];

        // Crossfilter Indexing
        const ndx = crossfilter(data);
        const dateDimension = ndx.dimension(d => new Date(d.date));
        const valueGroup = dateDimension.group().reduceSum(d => d.value);

        // Line Chart Setup
        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-06")]))
            .xAxisLabel("Date")
            .yAxisLabel("Value")
            .elasticY(true)
            .renderArea(true);

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

৬. Time Series Data কাস্টমাইজেশন

Time Series ডেটার জন্য আরও কাস্টমাইজেশন করা যেতে পারে, যেমন:

Date Format: d3.timeFormat() ব্যবহার করে তারিখের ফরম্যাট কাস্টমাইজ করা।
Tooltip: tooltip() ব্যবহার করে ডেটা পয়েন্টের উপর টুলটিপ দেখানো।
Zooming and Panning: D3.js ব্যবহার করে চার্টে জুম এবং প্যান ফিচার যোগ করা।

lineChart
    .x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-06")]))
    .xAxisLabel("Date")
    .yAxisLabel("Value")
    .elasticY(true)
    .renderArea(true)
    .on("renderlet", function(chart) {
        chart.selectAll("g.x text")
            .style("text-anchor", "middle")
            .style("font-size", "12px")
            .style("fill", "blue");
    });

সারাংশ

DC.js Time Series Data এর জন্য Line Chart তৈরি করতে খুবই কার্যকর।
Crossfilter এর মাধ্যমে ডেটা ফিল্টার এবং গ্রুপিং করা হয়।
D3.js এর সাহায্যে সময় ভিত্তিক স্কেল এবং অন্যান্য কাস্টমাইজেশন করা হয়।
renderArea(true) এবং elasticY(true) ফিচার ব্যবহার করে আরও উন্নত ভিজ্যুয়ালাইজেশন তৈরি করা যায়।

এই পদ্ধতিতে আপনি Time Series Data এর উপর ভিত্তি করে একটি ডাইনামিক এবং ইন্টারেক্টিভ চার্ট তৈরি করতে পারবেন।

Content added By

Azizar Rahman Aziz

Line এবং Bar Chart এ Time Series ভিজ্যুয়ালাইজ করা

214

DC.js দিয়ে Time Series Data ভিজ্যুয়ালাইজ করা খুবই সহজ এবং শক্তিশালী। Time Series Data সাধারণত সময় (date, time) অনুসারে সংগৃহীত ডেটা, যেমন মাসিক বিক্রয়, তাপমাত্রা পরিবর্তন, স্টক মার্কেটের ডেটা ইত্যাদি। DC.js ব্যবহার করে আমরা Line Chart এবং Bar Chart এ Time Series Data ভিজ্যুয়ালাইজ করতে পারি।

ধাপ ১: Time Series Data তৈরি করা

Time Series Data সাধারণত date অথবা timestamp সহ থাকে। একটি উদাহরণ ডেটাসেট:

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

এখানে, প্রতি মাসের প্রথম দিনে একটি value উল্লেখ করা হয়েছে।

২. Crossfilter সেটআপ

Crossfilter ব্যবহার করে আমরা ডেটা ফিল্টার এবং গ্রুপ করতে পারি। এখানে আমরা date দিয়ে ডাইমেনশন তৈরি করব এবং value এর উপর গ্রুপিং করব:

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

৩. Line Chart এ Time Series ভিজ্যুয়ালাইজ করা

Line Chart Time Series Data ভিজ্যুয়ালাইজেশনের জন্য আদর্শ। এটি সময়ের সাথে সাথে ডেটার প্রবণতা দেখানোর জন্য ব্যবহার করা হয়।

Line Chart তৈরি করা:

const lineChart = dc.lineChart("#line-chart");

lineChart
    .width(600)
    .height(300)
    .dimension(dateDimension)
    .group(valueGroup)
    .x(d3.scaleTime())  // X-axis টাইম স্কেল
    .xUnits(d3.timeMonths)  // এক্স-অক্ষের জন্য মাস হিসেবে ইউনিট
    .yAxisLabel("Value")
    .xAxisLabel("Date")
    .render();

এখানে:

d3.scaleTime() টাইম স্কেল ব্যবহার করে X-অক্ষ তৈরি হচ্ছে।
d3.timeMonths এক্স-অক্ষে মাসের ইউনিট ব্যবহার করছে।

HTML কোড:

<!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</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 for Time Series Data</h1>
    <div id="line-chart"></div>

    <script>
        const data = [
            { date: "2023-01-01", value: 30 },
            { date: "2023-02-01", value: 50 },
            { date: "2023-03-01", value: 70 },
            { date: "2023-04-01", value: 90 },
            { date: "2023-05-01", value: 110 }
        ];

        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())
            .xUnits(d3.timeMonths)
            .yAxisLabel("Value")
            .xAxisLabel("Date");

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

৪. Bar Chart এ Time Series ভিজ্যুয়ালাইজ করা

Bar Chart Time Series Data দেখানোর জন্য খুবই কার্যকরী, কারণ এটি ডেটাকে সোজাসুজি (vertical) বার হিসেবে প্রদর্শন করে। এটি বিশেষভাবে ডেটার পরিমাণের তুলনা করতে ব্যবহৃত হয়।

Bar Chart তৈরি করা:

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

barChart
    .width(600)
    .height(300)
    .dimension(dateDimension)
    .group(valueGroup)
    .x(d3.scaleTime())  // X-axis টাইম স্কেল
    .xUnits(d3.timeMonths)  // এক্স-অক্ষে মাস হিসেবে ইউনিট
    .yAxisLabel("Value")
    .xAxisLabel("Date")
    .render();

HTML কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DC.js Bar Chart</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 Bar Chart for Time Series Data</h1>
    <div id="bar-chart"></div>

    <script>
        const data = [
            { date: "2023-01-01", value: 30 },
            { date: "2023-02-01", value: 50 },
            { date: "2023-03-01", value: 70 },
            { date: "2023-04-01", value: 90 },
            { date: "2023-05-01", value: 110 }
        ];

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

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

        barChart
            .width(600)
            .height(300)
            .dimension(dateDimension)
            .group(valueGroup)
            .x(d3.scaleTime())
            .xUnits(d3.timeMonths)
            .yAxisLabel("Value")
            .xAxisLabel("Date");

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

সারাংশ

Line Chart: Time Series Data ভিজ্যুয়ালাইজ করার জন্য lineChart() ব্যবহার করা হয়। এটি সময়ের সাথে ডেটার প্রবণতা দেখায় এবং X-অক্ষে টাইম স্কেল ব্যবহার করা হয়।
Bar Chart: Time Series Data এর জন্য barChart() ব্যবহার করা হয়, যা ডেটার পরিমাণের তুলনা করে এবং X-অক্ষে টাইম স্কেল ব্যবহার করে।

এইভাবে, DC.js ব্যবহার করে Time Series Data খুব সহজে ভিজ্যুয়ালাইজ করা যায় এবং আপনি lineChart() এবং barChart() ব্যবহার করে ডেটার ট্রেন্ড এবং তুলনা দেখাতে পারেন।

Content added By

Azizar Rahman Aziz

Time Scale এবং Axes কনফিগারেশন

328

DC.js এ Time Scale এবং Axes কনফিগারেশন ব্যবহার করে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করা খুবই গুরুত্বপূর্ণ, বিশেষ করে যদি আপনার ডেটাসেট টাইম সিরিজ ডেটা থাকে। টাইম স্কেল এবং এক্স এবং ওয়াই অক্ষের কনফিগারেশন দ্বারা আপনি ডেটার সঠিক উপস্থাপন এবং বিশ্লেষণ নিশ্চিত করতে পারেন।

DC.js-এর সাথে D3.js ব্যবহার করে টাইম স্কেল (time scale) এবং অক্ষ কনফিগারেশন সহজেই কাস্টমাইজ করা যেতে পারে। টাইম স্কেল সাধারণত Date বা Time ডেটার জন্য ব্যবহৃত হয়।

১. Time Scale কনফিগারেশন

Time Scale টাইম সিরিজ ডেটার জন্য একটি এক্স-অক্ষ (X-Axis) তৈরি করতে ব্যবহৃত হয়। D3.js-এ d3.scaleTime() টাইম স্কেল তৈরির জন্য ব্যবহৃত হয়, যা সময় সম্পর্কিত ডেটার উপর ভিত্তি করে এক্স-অক্ষ তৈরি করে।

Time Scale কনফিগারেশন উদাহরণ:

ডেটাসেট তৈরি:

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

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

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

Time Scale কনফিগারেশন এবং Line Chart তৈরি:

const lineChart = dc.lineChart("#line-chart");

lineChart
    .width(800)
    .height(400)
    .dimension(dateDimension)
    .group(valueGroup)
    .x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-05-01")])) // Time scale configuration
    .xUnits(d3.timeMonths) // Monthly ticks on X-Axis
    .xAxisLabel("Date") // X-Axis label
    .yAxisLabel("Value") // Y-Axis label
    .elasticY(true) // Elastic Y-Axis
    .renderHorizontalGridLines(true)
    .renderVerticalGridLines(true);

dc.renderAll();

ব্যাখ্যা:

d3.scaleTime().domain([...]): এটি time scale তৈরি করার জন্য ব্যবহৃত হয়, যেখানে domain() ফাংশনটি টাইমের রেঞ্জ নির্ধারণ করে।
xUnits(d3.timeMonths): এটি এক্স-অক্ষের জন্য মাসের ইউনিট ব্যবহার করে।
elasticY(true): Y-অক্ষের জন্য স্বয়ংক্রিয় স্কেলিং সক্রিয় করে, যাতে ডেটার পরিমাণ অনুযায়ী Y-অক্ষটি পরিবর্তিত হয়।

২. Axes কনফিগারেশন

DC.js চার্টে Axes (অক্ষ) কনফিগারেশন কাস্টমাইজ করার জন্য, আপনি D3.js এর axis() এবং scale() ফাংশন ব্যবহার করতে পারেন। সাধারণত, X-Axis এবং Y-Axis দুটি অক্ষ কনফিগার করতে হয়।

১. X-Axis কনফিগারেশন

X-Axis সাধারণত টাইম সিরিজ ডেটার জন্য time scale ব্যবহার করা হয়।
টাইম স্কেল তৈরি করার পর, আপনি xAxis() ফাংশন ব্যবহার করে কাস্টমাইজ করতে পারেন।

২. Y-Axis কনফিগারেশন

Y-Axis সাধারণত কাস্টম স্কেল (যেমন scaleLinear) দ্বারা কনফিগার করা হয়, যা ডেটার পরিমাণ (value) প্রদর্শন করে।

উদাহরণ:

const lineChart = dc.lineChart("#line-chart");

lineChart
    .width(800)
    .height(400)
    .dimension(dateDimension)
    .group(valueGroup)
    .x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-05-01")])) // Time scale configuration
    .xUnits(d3.timeMonths)
    .xAxisLabel("Date")
    .yAxisLabel("Value")
    .elasticY(true)
    .renderHorizontalGridLines(true)
    .renderVerticalGridLines(true)
    .xAxis()
        .ticks(d3.timeMonth) // Custom ticks for X-Axis
        .tickFormat(d3.timeFormat("%b %d, %Y")) // Date format for ticks
    .yAxis()
        .ticks(5); // Set number of ticks on Y-Axis

dc.renderAll();

কাস্টম এক্স এবং ওয়াই অক্ষ কনফিগারেশন:

X-Axis:
- ticks(d3.timeMonth): এক্স-অক্ষের জন্য মাসের ভিত্তিতে টিক তৈরি করা।
- tickFormat(d3.timeFormat("%b %d, %Y")): এক্স-অক্ষের জন্য সময়ের ফরম্যাট কাস্টমাইজ করা (যেমন মাস, দিন এবং বছর)।
Y-Axis:
- ticks(5): Y-অক্ষের জন্য ৫টি টিক মার্ক তৈরি করা।

৩. সম্পূর্ণ উদাহরণ: Time Scale এবং Axes কনফিগারেশন

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

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

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

        const lineChart = dc.lineChart("#line-chart");

        lineChart
            .width(800)
            .height(400)
            .dimension(dateDimension)
            .group(valueGroup)
            .x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-05-01")])) // Time scale configuration
            .xUnits(d3.timeMonths)
            .xAxisLabel("Date")
            .yAxisLabel("Value")
            .elasticY(true)
            .renderHorizontalGridLines(true)
            .renderVerticalGridLines(true)
            .xAxis()
                .ticks(d3.timeMonth) // Custom ticks for X-Axis
                .tickFormat(d3.timeFormat("%b %d, %Y")) // Date format for ticks
            .yAxis()
                .ticks(5); // Set number of ticks on Y-Axis

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

সারাংশ

Time Scale কনফিগারেশন: d3.scaleTime() ব্যবহার করে টাইম সিরিজ ডেটার জন্য এক্স-অক্ষ তৈরি করা হয়।
X-Axis কনফিগারেশন: ticks(d3.timeMonth) এবং tickFormat(d3.timeFormat(...)) ব্যবহার করে এক্স-অক্ষের জন্য কাস্টম টিক এবং সময় ফরম্যাট যোগ করা হয়।
Y-Axis কনফিগারেশন: ticks() ব্যবহার করে Y-অক্ষের জন্য টিক মার্ক কাস্টমাইজ করা হয়।

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

Content added By

Azizar Rahman Aziz

250

DC.js একটি শক্তিশালী লাইব্রেরি যা D3.js এর উপর ভিত্তি করে তৈরি এবং ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়। Time Series Chart (যেমন লাইন চার্ট) ব্যবহার করে সময়ের সাথে সাথে পরিবর্তনশীল ডেটা ভিজ্যুয়ালাইজ করা যায়। এই চার্টে Tooltip এবং Interaction যোগ করা ব্যবহারকারী অভিজ্ঞতাকে আরও উন্নত করতে সাহায্য করে।

এখানে আমরা দেখব কীভাবে Time Series Chart তৈরির সময় Tooltip এবং Interaction যোগ করা যায়।

১. DC.js Time Series Chart তৈরি

Time Series Chart সাধারণত Line Chart হিসাবে পরিচিত, যেখানে X-অক্ষে সময়ের সাথে সাথে পরিবর্তিত মান এবং Y-অক্ষে পরিমাপের মান থাকে।

Time Series Chart এর জন্য Tooltip এবং Interaction যোগ করার উদাহরণ:

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 Time Series Chart with Tooltip and Interaction</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: 5px;
            border-radius: 3px;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <h1>DC.js Time Series Chart with Tooltip and Interaction</h1>
    <div id="time-series-chart"></div>

    <script>
        // ডেটাসেট
        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: 40 },
            { date: "2023-12-05", value: 60 }
        ];

        // Crossfilter সেটআপ
        const ndx = crossfilter(data);

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

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

        // DC.js লাইন চার্ট তৈরি
        const timeSeriesChart = dc.lineChart("#time-series-chart");

        timeSeriesChart
            .width(800)
            .height(400)
            .dimension(dateDimension)
            .group(valueGroup)
            .x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-05")])) // এক্স-অক্ষের স্কেল
            .xAxisLabel("Date") // এক্স-অক্ষের লেবেল
            .yAxisLabel("Value") // ওয়াই-অক্ষের লেবেল
            .renderHorizontalGridLines(true) // গ্রিড লাইন
            .on("pretransition", function(chart) {
                // Tooltip এবং Interaction
                const tooltip = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0);

                chart.selectAll("path")
                    .on("mouseover", function(event, d) {
                        tooltip.transition().duration(200).style("opacity", 0.9);
                        tooltip.html("Date: " + d3.timeFormat("%Y-%m-%d")(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 হাইড
                    });
            });

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

ব্যাখ্যা:

ডেটাসেট:
- এখানে একটি সিম্পল Time Series ডেটাসেট তৈরি করা হয়েছে যেখানে প্রতিটি দিন এবং তার সাথে সংশ্লিষ্ট value রয়েছে।
Crossfilter সেটআপ:
- crossfilter(data) দিয়ে ডেটাকে Crossfilter ইনডেক্সে লোড করা হয়েছে।
- dateDimension তৈরি করা হয়েছে যেটি date প্রপার্টির উপর ভিত্তি করে ডেটাকে গ্রুপ করবে।
DC.js লাইন চার্ট:
- dc.lineChart("#time-series-chart") দিয়ে একটি লাইন চার্ট তৈরি করা হয়েছে।
- x(d3.scaleTime().domain([start_date, end_date])) দিয়ে এক্স-অক্ষ-এ সময় নির্ধারণ করা হয়েছে।
Tooltip এবং Interaction:
- Tooltip:
  - Tooltip তৈরি করার জন্য একটি div তৈরি করা হয়েছে যেটি ব্যবহারকারী যখন লাইন চার্টে মাউসের উপর নিয়ে যাবে, তখন mouseover ইভেন্টে date এবং value প্রদর্শন করবে।
  - mouseout ইভেন্টে Tooltip মুছে ফেলা হয়।
- Tooltip-এর অবস্থান কাস্টমাইজ করা হয়েছে যাতে তা মাউসের অবস্থান অনুযায়ী চলে।
Interaction:
- লাইন চার্টের ডেটা পয়েন্টের উপর মাউসের mouseover ইভেন্টে Tooltip প্রদর্শিত হয় এবং mouseout এ এটি গাঢ় হয়ে যায় (opacity কমিয়ে দেয়)।

২. অন্যান্য ইন্টারঅ্যাকশন এবং কাস্টমাইজেশন

কাস্টম মার্কার (Data Points) যোগ করা:

DC.js এবং D3.js এর মাধ্যমে ডেটা পয়েন্টে কাস্টম মার্কার যোগ করা যায়। যেমন, আপনি ডেটা পয়েন্টে circle যোগ করে বা size পরিবর্তন করে কাস্টমাইজ করতে পারেন।

chart.selectAll("circle.dot")
    .attr("r", 6) // মার্কারের আকার পরিবর্তন
    .style("fill", "red") // রঙ পরিবর্তন
    .on("mouseover", function(event, d) {
        d3.select(this).style("fill", "orange"); // হোভার হলে মার্কারের রঙ পরিবর্তন
    })
    .on("mouseout", function(event, d) {
        d3.select(this).style("fill", "red"); // মাউস আউট হলে আগের রঙে ফিরিয়ে আনা
    });

জুম এবং ব্রাশিং:

DC.js এ জুম এবং ব্রাশিং সক্ষম করতে brushOn(true) সেটিং ব্যবহার করতে পারেন, যা ব্যবহারকারীদের নির্দিষ্ট ডেটা পরিসরের মধ্যে zoom in/out করতে দেয়।

timeSeriesChart
    .brushOn(true); // জুম সক্ষম করা

৩. সারাংশ

Time Series Chart ব্যবহার করে আপনি সময়ের সাথে সাথে পরিবর্তনশীল ডেটা ভিজ্যুয়ালাইজ করতে পারেন।
Tooltip যোগ করে চার্টে মাউসের উপরে যাওয়ার সময় ডেটার বিস্তারিত দেখতে পারেন।
Interaction ইভেন্টগুলির মাধ্যমে আপনি ডেটা পয়েন্টের উপর হোভার বা ক্লিকের মাধ্যমে ব্যবহারকারী অভিজ্ঞতা উন্নত করতে পারেন।
DC.js এবং D3.js এর মাধ্যমে আরও কাস্টম মার্কার, জুম, এবং ব্রাশিংয়ের মত ফিচার যোগ করা সম্ভব, যা আপনার চার্টকে আরও ইন্টারেক্টিভ এবং ব্যবহারকারীর জন্য সুবিধাজনক করে তোলে।

Content added By

Azizar Rahman Aziz

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

Time Series Visualization

Time Series Visualization তৈরি করার জন্য ধাপ

১. ডেটাসেট প্রস্তুতি

২. Crossfilter সেটআপ

৩. DC.js Line Chart তৈরি

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

৫. Time Series Visualization এর সুবিধা

সারাংশ

Time Series Data নিয়ে কাজ করা

১. Time Series Data প্রস্তুত

উদাহরণ Time Series Data

২. Crossfilter দিয়ে ডেটা ইন্ডেক্স করা

৩. Line Chart তৈরি করা

৪. চার্ট রেন্ডার করা

৫. সম্পূর্ণ উদাহরণ

৬. Time Series Data কাস্টমাইজেশন

সারাংশ

Line এবং Bar Chart এ Time Series ভিজ্যুয়ালাইজ করা

ধাপ ১: Time Series Data তৈরি করা

২. Crossfilter সেটআপ

৩. Line Chart এ Time Series ভিজ্যুয়ালাইজ করা

Line Chart তৈরি করা:

HTML কোড:

৪. Bar Chart এ Time Series ভিজ্যুয়ালাইজ করা

Bar Chart তৈরি করা:

HTML কোড:

সারাংশ

Time Scale এবং Axes কনফিগারেশন

১. Time Scale কনফিগারেশন

Time Scale কনফিগারেশন উদাহরণ:

ব্যাখ্যা:

২. Axes কনফিগারেশন

১. X-Axis কনফিগারেশন

২. Y-Axis কনফিগারেশন

উদাহরণ:

কাস্টম এক্স এবং ওয়াই অক্ষ কনফিগারেশন:

৩. সম্পূর্ণ উদাহরণ: Time Scale এবং Axes কনফিগারেশন

সারাংশ

Time Series Chart এর জন্য Tooltip এবং Interaction

১. DC.js Time Series Chart তৈরি

Time Series Chart এর জন্য Tooltip এবং Interaction যোগ করার উদাহরণ:

HTML এবং JavaScript কোড:

ব্যাখ্যা:

২. অন্যান্য ইন্টারঅ্যাকশন এবং কাস্টমাইজেশন

কাস্টম মার্কার (Data Points) যোগ করা:

জুম এবং ব্রাশিং:

৩. সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!