Line Chart এবং Series Chart কাস্টমাইজেশন

DC.js একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা D3.js এবং Crossfilter এর মাধ্যমে ডেটা ভিজ্যুয়ালাইজেশন তৈরিতে সহায়ক। এতে বিভিন্ন ধরনের চার্ট তৈরি করা যায়, যেমন Line Chart এবং Series Chart। এই দুইটি চার্টে ডেটার পরিবর্তন ট্র্যাক করতে এবং ইন্টারেক্টিভভাবে ডেটা বিশ্লেষণ করতে সাহায্য করে। নিচে Line Chart এবং Series Chart কাস্টমাইজ করার জন্য প্রয়োজনীয় নির্দেশনা দেওয়া হয়েছে।

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

Line Chart একটি সময়ভিত্তিক ডেটা ভিজ্যুয়ালাইজেশন, যা ডেটার পরিবর্তন দেখাতে সাহায্য করে। DC.js এর মাধ্যমে Line Chart কাস্টমাইজ করার কিছু সাধারণ বৈশিষ্ট্য হলো:

• এক্স অক্ষ (X-Axis): সময় (time) অথবা অন্য কোন স্কেল।
• ওয়াই অক্ষ (Y-Axis): মাপ বা পরিমাণ।
• লেজেন্ড: ডেটা সিরিজের পরিচিতি।

Line Chart তৈরি এবং কাস্টমাইজ করা

1. ডেটাসেট তৈরি: প্রথমে একটি সাধারণ ডেটাসেট তৈরি করতে হবে।

   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: 90 }
   ];
   

2. Crossfilter ইন্ডেক্স এবং ডাইমেনশন তৈরি: Crossfilter ব্যবহার করে ডেটা ইন্ডেক্স এবং ডাইমেনশন তৈরি করা হয়।

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

3. Line Chart তৈরি এবং কাস্টমাইজ: Line Chart তৈরি করার জন্য DC.js এর lineChart ব্যবহার করা হয়।

   const lineChart = dc.lineChart("#line-chart");
   
   lineChart
       .width(500)
       .height(300)
       .dimension(dateDimension)
       .group(valueGroup)
       .x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-04")]))
       .xAxisLabel("Date")
       .yAxisLabel("Value")
       .renderArea(true) // লাইন চার্টের নিচে আংশিক পূর্ণতা দেখাবে
       .elasticY(true)  // Y অক্ষের স্কেল স্বয়ংক্রিয়ভাবে সামঞ্জস্য করা হবে
       .on("filtered", function() {
           console.log("Line chart filtered");
       });
   

4. চার্ট রেন্ডার করা: dc.renderAll() ব্যবহার করে সমস্ত চার্ট রেন্ডার করা হয়।

   dc.renderAll();
   

কাস্টমাইজেশন বৈশিষ্ট্য:

• x(d3.scaleTime()): এক্স-অক্ষের জন্য সময় ভিত্তিক স্কেল।
• renderArea(true): লাইন চার্টের নিচে আংশিক পূর্ণতা দেখানোর জন্য।
• elasticY(true): Y অক্ষের স্কেল স্বয়ংক্রিয়ভাবে সামঞ্জস্য হবে।

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

Series Chart মূলত একাধিক ডেটা সিরিজকে একসাথে প্রদর্শন করার জন্য ব্যবহৃত হয়। DC.js এ lineChart ব্যবহার করে সিরিজ চার্ট তৈরি করা যায়, যেখানে একাধিক ডেটা সিরিজ থাকবে।

Series Chart তৈরি এবং কাস্টমাইজ

1. ডেটাসেট তৈরি: এই উদাহরণে দুটি সিরিজের ডেটা ব্যবহার করা হবে।

   const data = [
       { date: "2023-12-01", valueA: 30, valueB: 50 },
       { date: "2023-12-02", valueA: 40, valueB: 60 },
       { date: "2023-12-03", valueA: 50, valueB: 70 },
       { date: "2023-12-04", valueA: 60, valueB: 80 }
   ];
   

2. Crossfilter ইন্ডেক্স এবং ডাইমেনশন তৈরি: Crossfilter ব্যবহার করে ডেটার ডাইমেনশন এবং গ্রুপ তৈরি করা হয়।

   const ndx = crossfilter(data);
   const dateDimension = ndx.dimension(d => new Date(d.date));
   const valueAGroup = dateDimension.group().reduceSum(d => d.valueA);
   const valueBGroup = dateDimension.group().reduceSum(d => d.valueB);
   

3. Series Chart (Line Chart with multiple series) তৈরি: DC.js এর lineChart ব্যবহার করে একাধিক সিরিজের চার্ট তৈরি করা হয়।

   const seriesChart = dc.lineChart("#series-chart");
   
   seriesChart
       .width(500)
       .height(300)
       .dimension(dateDimension)
       .group(valueAGroup, "Series A")
       .stack(valueBGroup, "Series B")
       .x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-04")]))
       .xAxisLabel("Date")
       .yAxisLabel("Value")
       .renderArea(true) // চার্টের নিচে পূর্ণতা দেখাবে
       .elasticY(true)
       .legend(dc.legend().x(400).y(10).itemHeight(13).gap(5)) // লেজেন্ড কাস্টমাইজ
       .on("filtered", function() {
           console.log("Series chart filtered");
       });
   

4. চার্ট রেন্ডার করা: সমস্ত চার্ট রেন্ডার করতে dc.renderAll() ব্যবহার করা হয়।

   dc.renderAll();
   

কাস্টমাইজেশন বৈশিষ্ট্য:

• stack(valueBGroup, "Series B"): দ্বিতীয় সিরিজ যোগ করা হয়।
• legend(dc.legend()): লেজেন্ড কাস্টমাইজ করা হয়।
• renderArea(true): চার্টের নিচে আংশিক পূর্ণতা দেখানোর জন্য।

৩. সম্পূর্ণ 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 Line Chart and Series 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 and Series Chart</h1>

    <div id="line-chart"></div>
    <div id="series-chart"></div>

    <script>
        // ডেটাসেট
        const data = [
            { date: "2023-12-01", valueA: 30, valueB: 50 },
            { date: "2023-12-02", valueA: 40, valueB: 60 },
            { date: "2023-12-03", valueA: 50, valueB: 70 },
            { date: "2023-12-04", valueA: 60, valueB: 80 }
        ];

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

        // ডাইমেনশন তৈরি
        const dateDimension = ndx.dimension(d => new Date(d.date));
        const valueAGroup = dateDimension.group().reduceSum(d => d.valueA);
        const valueBGroup = dateDimension.group().reduceSum(d => d.valueB);

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

        lineChart
            .width(500)
            .height(300)
            .dimension(dateDimension)
            .group(valueAGroup)
            .x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-04")]))
            .xAxisLabel("Date")
            .yAxisLabel("Value")
            .renderArea(true)
            .elasticY(true);

        // Series Chart তৈরি
        const seriesChart = dc.lineChart("#series-chart");

        seriesChart
            .width(500)
            .height(300)
            .dimension(dateDimension)
            .group(valueAGroup, "Series A")
            .stack(valueBGroup, "Series B")
            .x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-04")]))
            .xAxisLabel("Date")
            .yAxisLabel("Value")
            .renderArea(true)
            .elasticY(true)
            .legend(dc.legend().x(400).y(10).itemHeight(13).gap(5));

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

সারাংশ

• Line Chart: সময় ভিত্তিক ডেটা দেখানোর জন্য ব্যবহৃত হয়, যেখানে এক্স-অক্ষ সাধারণত সময় এবং ওয়াই-অক্ষ ডেটার মান।
• Series Chart: একাধিক সিরিজের ডেটা একসাথে প্রদর্শন করার জন্য ব্যবহৃত হয়। DC.js এর lineChart ব্যবহার করে একাধিক সিরিজ স্ট্যাক করা যায়।
• কাস্টমাইজেশন: DC.js এ বিভিন্ন কাস্টমাইজেশন বৈশিষ্ট্য রয়েছে, যেমন renderArea(), elasticY(), এবং legend()।

এগুলি DC.js এর মাধ্যমে Line Chart এবং Series Chart কাস্টমাইজ করার পদ্ধতি।

DC.js ব্যবহার করে line chart তৈরি করা খুবই সহজ। এখানে আমরা দুটি ধরনের line chart তৈরি করব:

1. Simple Line Chart - একটি একক লাইন চার্ট যা একটি মাত্র ডেটাসেটের উপর ভিত্তি করে।
2. Multi-series Line Chart - একাধিক লাইন দিয়ে বিভিন্ন ডেটাসেটের তুলনা করা।

১. Simple Line Chart

একটি simple line chart তৈরি করতে DC.js এর lineChart() ফাংশন ব্যবহার করা হয়। এই ধরনের চার্ট সাধারণত একটি মাত্র ডেটাসেটের ট্রেন্ড দেখাতে ব্যবহার হয়।

ধাপ ১: ডেটাসেট তৈরি

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 }
];

ধাপ ২: Crossfilter সেটআপ

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

ধাপ ৩: DC.js 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");

dc.renderAll();

ধাপ ৪: 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 Simple 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>Simple Line Chart with DC.js</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>

২. Multi-series Line Chart

একাধিক line series একসঙ্গে দেখানোর জন্য multi-series line chart ব্যবহার করা হয়, যেখানে একাধিক গ্রুপ এবং ডাইমেনশন থাকে। এই ধরনের চার্টে একাধিক লাইন একে অপরের তুলনায় আলাদা ডেটাসেট বা ক্যাটেগরি দেখাতে ব্যবহার হয়।

ধাপ ১: ডেটাসেট তৈরি

const data = [
    { date: "2023-01-01", series: "A", value: 30 },
    { date: "2023-01-01", series: "B", value: 40 },
    { date: "2023-02-01", series: "A", value: 50 },
    { date: "2023-02-01", series: "B", value: 60 },
    { date: "2023-03-01", series: "A", value: 70 },
    { date: "2023-03-01", series: "B", value: 80 },
    { date: "2023-04-01", series: "A", value: 90 },
    { date: "2023-04-01", series: "B", value: 100 }
];

ধাপ ২: Crossfilter সেটআপ

const ndx = crossfilter(data);
const dateDimension = ndx.dimension(d => d.date);
const seriesGroupA = dateDimension.group().reduceSum(d => (d.series === "A" ? d.value : 0));
const seriesGroupB = dateDimension.group().reduceSum(d => (d.series === "B" ? d.value : 0));

ধাপ ৩: DC.js Multi-series Line Chart তৈরি করা

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

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

dc.renderAll();

ধাপ ৪: 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 Multi-series 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>Multi-series Line Chart with DC.js</h1>
    <div id="multi-line-chart"></div>

    <script>
        const data = [
            { date: "2023-01-01", series: "A", value: 30 },
            { date: "2023-01-01", series: "B", value: 40 },
            { date: "2023-02-01", series: "A", value: 50 },
            { date: "2023-02-01", series: "B", value: 60 },
            { date: "2023-03-01", series: "A", value: 70 },
            { date: "2023-03-01", series: "B", value: 80 },
            { date: "2023-04-01", series: "A", value: 90 },
            { date: "2023-04-01", series: "B", value: 100 }
        ];

        const ndx = crossfilter(data);
        const dateDimension = ndx.dimension(d => d.date);
        const seriesGroupA = dateDimension.group().reduceSum(d => (d.series === "A" ? d.value : 0));
        const seriesGroupB = dateDimension.group().reduceSum(d => (d.series === "B" ? d.value : 0));

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

        lineChart
            .width(600)
            .height(300)
            .dimension(dateDimension)
            .group(seriesGroupA, "Series A")
            .stack(seriesGroupB, "Series B")
            .x(d3.scaleTime())
            .xUnits(d3.timeMonths)
            .yAxisLabel("Value")
            .xAxisLabel("Date");

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

সারাংশ

• Simple Line Chart: একক ডেটাসেটের উপর ভিত্তি করে একটি সাধারণ লাইন চার্ট তৈরি করতে lineChart() ব্যবহার করা হয়। এতে সাধারণত একক সিরিজ থাকে।
• Multi-series Line Chart: একাধিক সিরিজের তুলনা করার জন্য লাইন চার্ট তৈরি করা হয়, যেখানে একাধিক গ্রুপ এবং স্ট্যাক ব্যবহার করা হয়।

DC.js এর এই দুটি প্রকার লাইন চার্ট ব্যবহার করে আপনি সহজে ডেটার ট্রেন্ড এবং তুলনা দেখাতে পারবেন।

DC.js এর Line Chart ডেটা ভিজ্যুয়ালাইজেশনে একটি গুরুত্বপূর্ণ উপাদান। কখনও কখনও, সরাসরি ডেটা পয়েন্টগুলির মধ্যে একটি মসৃণ বা ইন্টারপোলেটেড লাইন দেখানোর প্রয়োজন হয়, বিশেষ করে যখন আপনার ডেটাসেটটি কিছুটা অনিয়মিত বা বিচ্ছিন্ন হয়। এর জন্য Interpolation এবং Smoothing Techniques ব্যবহার করা যেতে পারে।

Interpolation এবং Smoothing এর গুরুত্ব:

• Interpolation: এটি ডেটার মধ্যে "ফাঁকা" স্থান পূর্ণ করার একটি প্রক্রিয়া। একাধিক ডেটা পয়েন্টের মধ্যে মসৃণভাবে লাইন আঁকার জন্য এটি ব্যবহৃত হয়।
• Smoothing: এটি ডেটাকে মসৃণ করতে ব্যবহৃত হয়, যা ডেটার মধ্যে ছোট ছোট র্যান্ডম পরিবর্তন বা noise কমিয়ে দেয় এবং পরিষ্কার এবং সুসংগত ট্রেন্ড প্রদর্শন করে।

DC.js এর Line Chart-এ Interpolation এবং Smoothing ব্যবহার করতে D3.js এর d3.line() ফাংশন এবং বিভিন্ন ধরনের curve functions ব্যবহার করা যেতে পারে।

১. Interpolation এবং Smoothing এর জন্য Curve Types

D3.js এর d3.line() ফাংশন ব্যবহার করে, বিভিন্ন ধরনের interpolation বা curve টেকনিক ব্যবহার করা যেতে পারে:

• d3.curveLinear: সরল লিনিয়ার ইন্টারপোলেশন, পয়েন্টগুলির মধ্যে সরল রেখা আঁকবে।
• d3.curveMonotoneX: এক্স-অক্ষের বরাবর মসৃণ ইন্টারপোলেশন।
• d3.curveBasis: একটি মসৃণ, বেসিস কার্ভ যা অনেকটা একটি বেইজিয়ান বেজ কিউবের মতো দেখতে।
• d3.curveCardinal: একটি কার্ডিনাল বেজিস কার্ভ, যা বিভিন্ন পয়েন্টের মাধ্যমে একটি মসৃণ সেগমেন্ট তৈরি করে।
• d3.curveCatmullRom: কটমুল-রোম কার্ভ, যা বেশ মসৃণ এবং ক্রমাগত বক্ররেখা তৈরি করে।

২. DC.js Line Chart এ Interpolation এবং Smoothing যোগ করা

DC.js এর Line Chart তৈরি করতে এবং এতে interpolation এবং smoothing যোগ করতে নিম্নলিখিত কোড ব্যবহার করা যেতে পারে:

১. HTML এবং JavaScript Setup

<!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 Interpolation and Smoothing</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 Line Chart with Interpolation and Smoothing</h1>
    <div id="line-chart"></div>

    <script>
        // Example dataset (Date and Value)
        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 },
            { date: "2023-06-01", value: 90 },
            { date: "2023-07-01", value: 50 },
            { date: "2023-08-01", value: 80 }
        ];

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

        // DC.js Line Chart Setup
        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-08-01")]))
            .xUnits(d3.timeMonths)  // Setting the time scale to months
            .yAxisLabel("Value")
            .xAxisLabel("Date")
            .renderHorizontalGridLines(true)
            .renderVerticalGridLines(true)
            .elasticY(true)
            .ordinalColors(["#4682B4"])

            // Interpolation technique: d3.curveBasis for smoothing the line
            .curve(d3.curveBasis); 

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

৩. কোড ব্যাখ্যা

1. ডেটাসেট: এখানে একটি সাধারন Date এবং Value এর সাথে ডেটাসেট তৈরি করা হয়েছে।
2. Crossfilter Setup: crossfilter() ফাংশন দিয়ে ডেটা লোড করা হয়েছে এবং dateDimension এর মাধ্যমে date অনুযায়ী ডেটা গ্রুপ করা হয়েছে। valueGroup ডেটার মানের উপর ভিত্তি করে সুম করা হয়েছে।
3. Line Chart Setup:
   • dimension(): এটি একটি ডাইমেনশন তৈরি করে যা date অনুসারে ডেটাকে গ্রুপ করবে।
   • group(): এটি ডেটার মানগুলোর উপর sum (যোগফল) করবে।
   • x(d3.scaleTime().domain([...])): সময়ের স্কেলে X-অক্ষের জন্য time scale সেট করা হয়েছে।
   • curve(d3.curveBasis): এটি ডেটার মধ্যবর্তী পয়েন্টগুলির জন্য smoothing বা interpolation যোগ করে। এখানে curveBasis ব্যবহার করা হয়েছে, যা মসৃণ এবং ভাল দেখানো লাইন তৈরি করবে।
4. Redraw: dc.renderAll() ব্যবহার করা হয়েছে যাতে সমস্ত DC.js চার্ট রেন্ডার হয়।

৪. Interpolation এবং Smoothing এর অন্যান্য প্রযুক্তি

• d3.curveLinear: সরল, সোজা লাইন তৈরি করে।
• d3.curveMonotoneX: এক্স-অক্ষের বরাবর মসৃণ লাইন তৈরি করে।
• d3.curveCardinal: অনেক বেশি মসৃণ, কার্ডিনাল বেসিস কার্ভ ব্যবহার করে।
• d3.curveCatmullRom: ক্রমাগত এবং মসৃণ বক্ররেখা তৈরি করতে ব্যবহৃত হয়।

আপনি এই কোডের মধ্যে অন্য কোনও curve টেকনিক ব্যবহার করতে পারেন, যেমন d3.curveLinear, d3.curveCardinal অথবা d3.curveCatmullRom, এবং চেক করতে পারেন যে কোনটি আপনার প্রয়োজনের জন্য সবচেয়ে ভালো কাজ করে।

সারাংশ

DC.js এর Line Chart এ interpolation এবং smoothing টেকনিক যোগ করা খুবই সহজ। D3.js এর curve ফাংশন ব্যবহার করে আপনি আপনার চার্টের লাইনগুলিকে মসৃণ এবং আরও ভালোভাবে উপস্থাপন করতে পারেন। d3.curveBasis এর মতো curve ফাংশন ডেটার মধ্যে সোজা বা ইন্টারপোলেটেড লাইন তৈরি করতে সহায়ক।

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

১. DC.js এর মাধ্যমে ডেটা পয়েন্ট যোগ করা

DC.js দিয়ে সাধারণত যে চার্ট তৈরি করা হয়, সেখানে ডেটা পয়েন্টগুলিকে কাস্টমাইজ করা যায়। এই পয়েন্টগুলিকে বিভিন্ন আকার বা রঙ দিয়ে সাজানো যেতে পারে, যাতে ডেটা ভিজ্যুয়ালাইজেশন আরও স্পষ্ট এবং ইন্টারেক্টিভ হয়।

উদাহরণ: একটি 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 Bar Chart - Data Points and Custom Markers</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 Bar Chart with Data Points and Custom Markers</h1>
    <div id="bar-chart"></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 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) // ডিসক্রিট ডেটা ব্যবহারের জন্য
            .yAxisLabel("Value")
            .xAxisLabel("Category")
            .renderHorizontalGridLines(true)
            .on("pretransition", function(chart) {
                // ডেটা পয়েন্টে কাস্টম মার্কার যোগ করা
                chart.selectAll("rect")
                    .style("fill", "steelblue") // ডেটা পয়েন্টের রঙ
                    .on("mouseover", function(event, d) {
                        d3.select(this).style("fill", "orange"); // হোভার হলে রঙ পরিবর্তন
                    })
                    .on("mouseout", function(event, d) {
                        d3.select(this).style("fill", "steelblue"); // মাউস আউট হলে আগের রঙে ফিরিয়ে আনা
                    });
            });

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

ব্যাখ্যা:

1. Bar Chart: dc.barChart("#bar-chart") দিয়ে একটি বার চার্ট তৈরি করা হয়েছে।
2. ডেটা পয়েন্টে কাস্টম মার্কার যোগ করা:
   • chart.selectAll("rect") দিয়ে প্রতিটি বার (বার চার্টের প্রতিটি ডেটা পয়েন্ট) নির্বাচন করা হয়েছে।
   • style("fill", "steelblue") দিয়ে বারগুলোর রঙ নির্ধারণ করা হয়েছে।
   • Mouseover and Mouseout ইভেন্টের মাধ্যমে কাস্টম মার্কারের হোভার ইফেক্ট যোগ করা হয়েছে, যেখানে রঙ পরিবর্তন করা হচ্ছে।

২. DC.js এর মাধ্যমে কাস্টম মার্কার যোগ করা

কাস্টম মার্কার যোগ করতে Line Chart বা অন্যান্য চার্টে SVG পাথ বা মার্কার ব্যবহার করা হয়। DC.js এই সক্ষমতা প্রদান করে, যা D3.js এর মাধ্যমে ইমপ্লিমেন্ট করা হয়।

উদাহরণ: 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 - Custom Markers</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 Line Chart with Custom Markers</h1>
    <div id="line-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: 20 },
            { 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 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")]))
            .xAxisLabel("Date")
            .yAxisLabel("Value")
            .renderHorizontalGridLines(true)
            .on("pretransition", function(chart) {
                // কাস্টম মার্কার যোগ করা
                chart.selectAll("circle.dot")
                    .style("fill", "red") // ডেটা পয়েন্টের রঙ পরিবর্তন
                    .attr("r", 6) // ডেটা পয়েন্টের আকার নির্ধারণ
                    .on("mouseover", function(event, d) {
                        d3.select(this).style("fill", "green"); // হোভার হলে মার্কারের রঙ পরিবর্তন
                    })
                    .on("mouseout", function(event, d) {
                        d3.select(this).style("fill", "red"); // মাউস আউট হলে আগের রঙে ফিরিয়ে আনা
                    });
            });

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

ব্যাখ্যা:

1. Line Chart: dc.lineChart("#line-chart") দিয়ে একটি লাইন চার্ট তৈরি করা হয়েছে।
2. কাস্টম মার্কার (ডট) যোগ করা:
   • chart.selectAll("circle.dot") দিয়ে লাইন চার্টের ডেটা পয়েন্ট (ডট) নির্বাচন করা হয়েছে।
   • style("fill", "red") দিয়ে ডটের রঙ পরিবর্তন করা হয়েছে।
   • Mouseover and Mouseout ইভেন্টের মাধ্যমে কাস্টম মার্কারের হোভার ইফেক্ট যোগ করা হয়েছে।

৩. কাস্টম মার্কার এবং ডেটা পয়েন্ট কাস্টমাইজেশন এর সুবিধা

• ইন্টারঅ্যাকটিভিটি: কাস্টম মার্কার এবং ডেটা পয়েন্ট যোগ করে আপনার চার্ট আরও ইন্টারেক্টিভ এবং ব্যবহারকারী বান্ধব করা যায়।
• ভিজ্যুয়াল ক্লিয়ারিটি: ডেটা পয়েন্ট কাস্টমাইজ করে বিশদভাবে ডেটা উপস্থাপন করা সহজ হয়।
• ডেটার ফিল্টারিং: চার্টের মধ্যে কাস্টম মার্কার যোগ করা ব্যবহারকারীদের ডেটা ফিল্টারিং বা সিলেকশন করতে সহায়ক হয়।

সারাংশ

DC.js এর মাধ্যমে Data Points এবং Custom Markers যোগ করা আপনার ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারেক্টিভ এবং স্পষ্ট করে তোলে। আপনি সহজেই ডেটা পয়েন্টের আকার, রঙ এবং হোভার ইফেক্ট কাস্টমাইজ করতে পারেন, যা ব্যবহারকারীদের জন্য আরও আকর্ষণীয় এবং ব্যবহারযোগ্য ভিজ্যুয়াল তৈরি করে।

DC.js একটি শক্তিশালী লাইব্রেরি যা D3.js এর উপর ভিত্তি করে তৈরি এবং ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহার করা হয়। Line Chart DC.js এর অন্যতম জনপ্রিয় চার্ট টাইপ, এবং আপনি এটি ব্যবহার করে ডেটার ট্রেন্ড এবং প্যাটার্ন বিশ্লেষণ করতে পারেন। এখানে আমরা Line Chart এ Zoom এবং Pan ফিচার ইন্টিগ্রেট করার পদ্ধতি দেখাব।

Zoom এবং Pan ফিচার গুলি ব্যবহারকারীদের চার্টে একটি নির্দিষ্ট অংশে ফোকাস করতে সাহায্য করে এবং এটি ইন্টারেক্টিভ ভিজ্যুয়ালাইজেশন তৈরি করে।

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

DC.js এবং D3.js এর সিডিএন লিঙ্ক 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 ইন্ডেক্স

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

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

এখানে একটি সাধারণ ডেটাসেট তৈরি করা হয়েছে, যার মধ্যে date এবং value রয়েছে। Crossfilter ব্যবহার করে আমরা ডেটা ইন্ডেক্স করেছি।

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

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

// তারিখের উপর গ্রুপ তৈরি এবং value এর যোগফল বের করা
const dateGroup = dateDimension.group().reduceSum(d => d.value);

এখানে, dateDimension তৈরি করা হয়েছে যাতে ডেটা তারিখ অনুযায়ী ফিল্টার এবং বিশ্লেষণ করা যায়। পরে, dateGroup এ value এর যোগফল বের করা হয়েছে।

৪. DC.js Line Chart তৈরি

এখন DC.js ব্যবহার করে একটি Line Chart তৈরি করা হবে এবং এতে Zoom এবং Pan ফিচার ইন্টিগ্রেট করা হবে।

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

lineChart
    .width(800)
    .height(400)
    .dimension(dateDimension) // ডাইমেনশন
    .group(dateGroup) // গ্রুপ
    .x(d3.scaleTime()) // এক্স-অক্ষ স্কেল (টাইম)
    .xUnits(d3.timeDays) // দিন অনুযায়ী এক্স-অক্ষ ইউনিট
    .xAxisLabel("Date") // এক্স-অক্ষের লেবেল
    .yAxisLabel("Value") // ওয়াই-অক্ষের লেবেল
    .brushOn(true) // ব্রাশ অন করা, যা Zoom/Pan সাপোর্ট করবে
    .elasticY(true) // ওয়াই-অক্ষের স্কেল এলাস্টিক (ডায়নামিক)
    .renderHorizontalGridLines(true) // গ্রিড লাইন যোগ করা
    .renderVerticalGridLines(true); // ভার্টিকাল গ্রিড লাইন যোগ করা

// DC.js দ্বারা সমস্ত চার্ট রেন্ডার
dc.renderAll();

এখানে Line Chart তৈরি করা হয়েছে এবং Zoom ও Pan ফিচার ইন্টিগ্রেট করা হয়েছে। brushOn(true) ফিচার ব্যবহার করা হয়েছে, যা Zoom এবং Pan সাপোর্ট করে।

৫. Zoom এবং Pan এর কাস্টমাইজেশন

DC.js দ্বারা Line Chart এ Zoom এবং Pan কাস্টমাইজ করা যায়। কিছু কাস্টমাইজেশন উদাহরণ:

১. এক্স-অক্ষের জন্য Zoom:

lineChart
    .x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-01-06")])) // এক্স-অক্ষের রেঞ্জ নির্ধারণ
    .xUnits(d3.timeDays); // এক্স-অক্ষের ইউনিট সেট করা

২. প্যানিং অপশন:

lineChart
    .brushOn(true) // প্যানিং সক্ষম
    .on('zoom', function(event) {
        console.log("Zooming Event", event); // Zoom ইভেন্টে কাস্টম লজিক প্রয়োগ করা
    });

৩. কাস্টম স্কেল এবং ব্রাশ:

lineChart
    .x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-01-06")])) // এক্স-অক্ষের রেঞ্জ নির্ধারণ
    .elasticY(true); // ওয়াই-অক্ষের এলাস্টিক স্কেল

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

<!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 Zoom and Pan</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 Zoom and Pan</h1>
    <div id="line-chart"></div>

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

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

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

        // তারিখের উপর গ্রুপ তৈরি এবং value এর যোগফল বের করা
        const dateGroup = dateDimension.group().reduceSum(d => d.value);

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

        lineChart
            .width(800)
            .height(400)
            .dimension(dateDimension)
            .group(dateGroup)
            .x(d3.scaleTime())
            .xUnits(d3.timeDays)
            .xAxisLabel("Date")
            .yAxisLabel("Value")
            .brushOn(true)
            .elasticY(true)
            .renderHorizontalGridLines(true)
            .renderVerticalGridLines(true);

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

সারাংশ

• Zoom এবং Pan ফিচার DC.js এর Line Chart এ ইন্টিগ্রেট করা হয়েছে।
• brushOn(true) ব্যবহার করে Zoom এবং Pan কার্যকর করা হয়।
• elasticY(true) ওয়াই-অক্ষের স্কেলকে ডাইনামিক করে, যাতে ভিন্ন ভিন্ন স্কেল অনুযায়ী ডেটা দেখা যায়।
• D3.js এর টাইম স্কেল ব্যবহার করে এক্স-অক্ষের জন্য Zoom সেট করা হয়েছে।

এই পদ্ধতিতে আপনি সহজেই Line Chart এর সাথে Zoom এবং Pan ফিচার ইন্টিগ্রেট করে ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারবেন।