DC.js এর বেসিক চার্ট তৈরি

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

330

DC.js একটি জাভাস্ক্রিপ্ট লাইব্রেরি, যা D3.js এবং Crossfilter এর উপর ভিত্তি করে তৈরি এবং ডেটা ভিজ্যুয়ালাইজেশন করার জন্য ব্যবহৃত হয়। DC.js দিয়ে সহজেই ইন্টারেক্টিভ এবং ডাইনামিক ডেটা চার্ট তৈরি করা যায়। এখানে DC.js এর মাধ্যমে একটি বেসিক চার্ট তৈরি করার প্রক্রিয়া দেখানো হলো।

১. DC.js সেটআপ

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.css">

২. HTML ফাইল সেটআপ

একটি 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 চার্ট</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 চার্ট উদাহরণ</h1>
    <div id="bar-chart"></div> <!-- চার্টের জন্য কন্টেইনার -->
    <script>
        // JavaScript কোড এখানে লিখুন
    </script>
</body>
</html>

৩. ডেটাসেট তৈরি

DC.js এ কাজ করতে হলে একটি ডেটাসেট তৈরি করতে হবে। এখানে একটি সাধারণ JSON ডেটাসেট তৈরি করা হয়েছে, যার মধ্যে ক্যাটেগরি এবং মান (value) রয়েছে:

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 সেটআপ

DC.js এ ডেটা ফিল্টারিং এবং গ্রুপিংয়ের জন্য Crossfilter ব্যবহৃত হয়। ডেটাসেট লোড এবং একটি ডাইমেনশন তৈরি করতে Crossfilter ব্যবহার করুন।

const ndx = crossfilter(data);  // ডেটা Crossfilter এ লোড করা
const dimension = ndx.dimension(d => d.category);  // ক্যাটেগরি ভিত্তিক ডাইমেনশন তৈরি
const group = dimension.group().reduceSum(d => d.value);  // গ্রুপ তৈরি (ক্যাটেগরি অনুযায়ী মানের যোগফল)

৫. DC.js দিয়ে বার চার্ট তৈরি

DC.js দিয়ে বার চার্ট তৈরি করতে নিম্নলিখিত কোডটি ব্যবহার করুন:

const barChart = dc.barChart("#bar-chart");  // #bar-chart আইডি ব্যবহার করে চার্ট তৈরি

barChart
    .width(600)  // চার্টের প্রস্থ
    .height(300)  // চার্টের উচ্চতা
    .dimension(dimension)  // ডাইমেনশন
    .group(group)  // গ্রুপ
    .x(d3.scaleBand())  // এক্স-অক্ষের স্কেল (ডিসক্রিট ডেটার জন্য)
    .xUnits(dc.units.ordinal)  // এক্স-অক্ষের ইউনিট (অর্ডিনাল)
    .xAxisLabel("Categories")  // এক্স-অক্ষের লেবেল
    .yAxisLabel("Values")  // ওয়াই-অক্ষের লেবেল
    .renderHorizontalGridLines(true);  // গ্রিড লাইন রেন্ডার করা

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

সব চার্ট একসাথে রেন্ডার করার জন্য dc.renderAll() ব্যবহার করতে হয়।

dc.renderAll();

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DC.js চার্ট</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 চার্ট উদাহরণ</h1>
    <div id="bar-chart"></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")
            .renderHorizontalGridLines(true);

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

সারাংশ

DC.js সেটআপ: CDN লিংক ব্যবহার করে DC.js, D3.js, এবং Crossfilter ইনস্টল করা।
ডেটাসেট তৈরি: JSON ডেটাসেট তৈরি করে Crossfilter দিয়ে লোড করা।
ডাইমেনশন এবং গ্রুপ তৈরি: Crossfilter দিয়ে ডেটা ফিল্টার এবং গ্রুপ করা।
চার্ট তৈরি: DC.js দিয়ে বার চার্ট তৈরি এবং কাস্টমাইজ করা।
চার্ট রেন্ডার: dc.renderAll() ব্যবহার করে চার্ট রেন্ডার করা।

এই পদ্ধতি অনুসরণ করে আপনি DC.js দিয়ে সহজেই একটি বেসিক চার্ট তৈরি করতে পারবেন।

Content added By

Azizar Rahman Aziz

Bar Chart তৈরি

260

DC.js একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি যা D3.js এবং Crossfilter এর উপর ভিত্তি করে তৈরি। এটি ইন্টারেক্টিভ এবং ডাইনামিক চার্ট তৈরির জন্য ব্যবহৃত হয়। এখানে আমরা DC.js ব্যবহার করে একটি Bar Chart (বার চার্ট) তৈরি করার প্রক্রিয়া দেখবো।

১. DC.js সেটআপ

প্রথমে আপনার 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">

২. HTML ফাইলের বেসিক স্ট্রাকচার

একটি সিম্পল 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 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 Bar Chart Example</h1>
    <div id="bar-chart"></div>

    <script>
        // JavaScript কোড এখানে
    </script>
</body>
</html>

৩. ডেটাসেট তৈরি করা

আমরা একটি সাধারণ ডেটাসেট ব্যবহার করবো যা ক্যাটেগরি এবং ভ্যালু সহ থাকবে। এই ডেটাকে Crossfilter এর মাধ্যমে লোড করা হবে।

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 সেটআপ

Crossfilter দিয়ে ডেটাসেট লোড করতে হবে এবং ডাইমেনশন এবং গ্রুপ তৈরি করতে হবে।

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

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

// ক্যাটেগরি অনুযায়ী গ্রুপ তৈরি
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);

৫. DC.js দিয়ে বার চার্ট তৈরি করা

এখন DC.js দিয়ে একটি বার চার্ট তৈরি করা হবে। এটি dc.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); // গ্রিড লাইন যোগ করা

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

সব চার্ট একসাথে রেন্ডার করতে dc.renderAll() ব্যবহার করা হয়:

dc.renderAll();

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

এখন আমরা পুরো 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 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 Bar Chart Example</h1>
    <div id="bar-chart"></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 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();
    </script>
</body>
</html>

সারাংশ

DC.js দিয়ে ডেটা ভিজ্যুয়ালাইজেশনে ইন্টারেক্টিভ বার চার্ট তৈরি করা খুবই সহজ।
Crossfilter দিয়ে ডেটা ফিল্টার ও গ্রুপ করা হয় এবং D3.js ব্যবহার করে গ্রাফিক্যাল উপস্থাপনা করা হয়।
dc.renderAll() ফাংশন দিয়ে সমস্ত চার্ট রেন্ডার করা হয়।

এই কোডটি আপনার প্রথম DC.js বার চার্ট তৈরি করতে সহায়তা করবে।

Content added By

Azizar Rahman Aziz

Pie Chart এবং Donut Chart তৈরি

251

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

১. প্রয়োজনীয় ফাইল যুক্ত করা

প্রথমে, আপনার 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">

২. HTML ফাইল তৈরি

আপনার 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 Pie and Donut Charts</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 Pie Chart and Donut Chart</h1>
    <div id="pie-chart"></div>
    <div id="donut-chart"></div>
    <script>
        // JavaScript কোড এখানে হবে
    </script>
</body>
</html>

৩. JavaScript কোড লিখা

এখন পাই চার্ট এবং ডোনাট চার্ট তৈরি করার জন্য JavaScript কোড যোগ করা হবে।

ধাপ ১: ডেটাসেট লোড করা

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);

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

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

ধাপ ৩: Pie Chart তৈরি

const pieChart = dc.pieChart("#pie-chart");

pieChart
    .width(300)
    .height(300)
    .radius(100) // চার্টের রেডিয়াস
    .dimension(categoryDimension) // ডাইমেনশন
    .group(categoryGroup) // গ্রুপ
    .legend(dc.legend()); // লিজেন্ড

ধাপ ৪: Donut Chart তৈরি

ডোনাট চার্ট তৈরির জন্য শুধু innerRadius সেট করতে হবে।

const donutChart = dc.pieChart("#donut-chart");

donutChart
    .width(300)
    .height(300)
    .radius(100) // চার্টের রেডিয়াস
    .innerRadius(50) // ডোনাটের ভিতরের রেডিয়াস
    .dimension(categoryDimension) // ডাইমেনশন
    .group(categoryGroup) // গ্রুপ
    .legend(dc.legend()); // লিজেন্ড

ধাপ ৫: চার্ট রেন্ডার করা

সবগুলো চার্ট রেন্ডার করার জন্য dc.renderAll() ফাংশন ব্যবহার করা হবে।

dc.renderAll();

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DC.js Pie and Donut Charts</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 Pie Chart and Donut Chart</h1>
    <div id="pie-chart"></div>
    <div id="donut-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 categoryDimension = ndx.dimension(d => d.category);
        
        // ক্যাটেগরি গ্রুপ
        const categoryGroup = categoryDimension.group().reduceSum(d => d.value);

        // Pie Chart তৈরি
        const pieChart = dc.pieChart("#pie-chart");

        pieChart
            .width(300)
            .height(300)
            .radius(100)
            .dimension(categoryDimension)
            .group(categoryGroup)
            .legend(dc.legend());

        // Donut Chart তৈরি
        const donutChart = dc.pieChart("#donut-chart");

        donutChart
            .width(300)
            .height(300)
            .radius(100)
            .innerRadius(50)  // ডোনাটের ভিতরের অংশ
            .dimension(categoryDimension)
            .group(categoryGroup)
            .legend(dc.legend());

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

৫. চার্ট কাস্টমাইজেশন

লিজেন্ড: dc.legend() ব্যবহার করে চার্টের লিজেন্ড কাস্টমাইজ করা যায়।
রেডিয়াস: radius() এবং innerRadius() ব্যবহার করে পাই এবং ডোনাট চার্টের আকার কাস্টমাইজ করা যায়।
ডাইমেনশন ও গ্রুপ: ডেটা অনুযায়ী ডাইমেনশন এবং গ্রুপের ভিত্তিতে চার্টের তথ্য পরিবর্তন করতে পারেন।

সারাংশ

Pie Chart এবং Donut Chart DC.js দিয়ে খুব সহজেই তৈরি করা যায়।
Pie Chart একটি সাধারণ চক্রাকার চার্ট, যেখানে Donut Chart এর মধ্যে একটি খালি অংশ থাকে।
Crossfilter দিয়ে ডেটা ফিল্টার ও গ্রুপ করে DC.js এর মাধ্যমে ইন্টারেক্টিভ চার্ট তৈরি করা যায়।

এটি একটি খুবই কার্যকরী টুল, বিশেষ করে ডেটা বিশ্লেষণ এবং ভিজ্যুয়ালাইজেশনের জন্য।

Content added By

Azizar Rahman Aziz

Line Chart এবং Series Chart তৈরি

376

DC.js একটি শক্তিশালী লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশনে সহজতা এবং ইন্টারেক্টিভ ফিচার প্রদান করে। DC.js দিয়ে Line Chart এবং Series Chart তৈরি করা সহজ এবং কার্যকর। এখানে Line Chart এবং Series Chart তৈরির প্রক্রিয়া ধাপে ধাপে দেখানো হচ্ছে।

১. প্রয়োজনীয় ফাইল যুক্ত করা

প্রথমে আপনার 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">

২. Line Chart তৈরি

Line Chart সাধারণত টাইম সিরিজ ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়, যেখানে সময়ের সাথে ডেটা পরিবর্তন দেখানো হয়।

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

এখানে একটি ডেটাসেট ব্যবহার করা হয়েছে, যেখানে সময় (date) এবং মান (value) রয়েছে:

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

Line Chart কোড

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) // টাইম ইউনিট নির্ধারণ
    .yAxisLabel("Value")
    .xAxisLabel("Date")
    .render();

HTML কোড

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

৩. Series Chart তৈরি

Series Chart তৈরি করতে মূলত lineChart অথবা barChart এর সাথে একাধিক ডেটা সিরিজ যোগ করা হয়। এটি একটি পদ্ধতি যেখানে একাধিক ডেটা সিরিজের মধ্যে তুলনা করা যায়।

ডেটাসেট উদাহরণ (Multiple Series)

এখানে দুটি ভিন্ন সিরিজের ডেটা রয়েছে (সিরিজ ১ এবং সিরিজ ২):

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

Series Chart কোড

const ndx = crossfilter(data);

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

// series1 এবং series2 এর জন্য আলাদা গ্রুপ তৈরি
const series1Group = dateDimension.group().reduceSum(d => d.series1);
const series2Group = dateDimension.group().reduceSum(d => d.series2);

// Line Chart (Multiple Series)
const seriesChart = dc.lineChart("#series-chart");

seriesChart
    .width(600)
    .height(300)
    .dimension(dateDimension)
    .group(series1Group, "Series 1") // প্রথম সিরিজ
    .stack(series2Group, "Series 2") // দ্বিতীয় সিরিজ
    .x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-05")]))
    .xUnits(d3.timeDays)
    .yAxisLabel("Value")
    .xAxisLabel("Date")
    .legend(dc.legend()) // লেজেন্ড যোগ করা
    .render();

HTML কোড

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

৪. সার্বিক কোড উদাহরণ

<!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 and Series Chart 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 Line and Series Chart Example</h1>
    
    <div id="line-chart"></div>
    <div id="series-chart"></div>

    <script>
        // Line Chart ডেটাসেট
        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)
            .yAxisLabel("Value")
            .xAxisLabel("Date")
            .render();

        // Series Chart ডেটাসেট
        const multiSeriesData = [
            { date: "2023-12-01", series1: 30, series2: 20 },
            { date: "2023-12-02", series1: 50, series2: 40 },
            { date: "2023-12-03", series1: 70, series2: 60 },
            { date: "2023-12-04", series1: 20, series2: 30 },
            { date: "2023-12-05", series1: 60, series2: 50 }
        ];

        const ndx2 = crossfilter(multiSeriesData);
        const dateDimension2 = ndx2.dimension(d => d.date);
        const series1Group = dateDimension2.group().reduceSum(d => d.series1);
        const series2Group = dateDimension2.group().reduceSum(d => d.series2);

        const seriesChart = dc.lineChart("#series-chart");
        seriesChart
            .width(600)
            .height(300)
            .dimension(dateDimension2)
            .group(series1Group, "Series 1")
            .stack(series2Group, "Series 2")
            .x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-05")]))
            .xUnits(d3.timeDays)
            .yAxisLabel("Value")
            .xAxisLabel("Date")
            .legend(dc.legend())
            .render();
    </script>
</body>
</html>

সারাংশ

Line Chart তৈরি করতে x অক্ষে টাইম সিরিজ ডেটা এবং y অক্ষে মান দিয়ে dc.lineChart() ফাংশন ব্যবহার করা হয়।
Series Chart তৈরি করতে একাধিক ডেটা সিরিজের তুলনা করা যায়, যা stack() ফাংশন দিয়ে করা হয়।
DC.js দিয়ে ইন্টারেক্টিভ এবং ডাইনামিক চার্ট তৈরি করা সহজ, এবং D3.js এর মাধ্যমে আরও কাস্টমাইজেশন করা যায়।

Content added By

Azizar Rahman Aziz

Scatter Plot এবং Bubble Chart তৈরি

347

DC.js একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি যা D3.js এবং Crossfilter এর উপর ভিত্তি করে তৈরি, এবং এটি ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সাহায্য করে। এখানে আমরা Scatter Plot এবং Bubble Chart তৈরি করার পদ্ধতি দেখব, যা DC.js ব্যবহার করে খুব সহজে তৈরি করা যায়।

১. Scatter Plot তৈরি

Scatter Plot সাধারণত দুটি পরিবর্তনশীলের মধ্যে সম্পর্ক বা প্যাটার্ন দেখাতে ব্যবহৃত হয়। DC.js দিয়ে একটি Scatter Plot তৈরি করতে আমরা D3.js এর circle ব্যবহার করব।

১.১ HTML ফাইল সেটআপ

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DC.js Scatter Plot</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 Scatter Plot</h1>
    <div id="scatter-chart"></div>
    <script>
        // JavaScript কোড এখানে হবে
    </script>
</body>
</html>

১.২ ডেটাসেট তৈরি

এখন আমরা একটি সিম্পল ডেটাসেট তৈরি করব যা x, y এবং size মান ধারণ করবে।

const data = [
    { x: 10, y: 20, size: 5 },
    { x: 20, y: 40, size: 10 },
    { x: 30, y: 60, size: 15 },
    { x: 40, y: 80, size: 20 },
    { x: 50, y: 100, size: 25 }
];

১.৩ DC.js Scatter Plot তৈরি

এখন DC.js দিয়ে Scatter Plot তৈরি করা হবে:

const ndx = crossfilter(data);  // Crossfilter ইনস্ট্যান্স তৈরি
const dimension = ndx.dimension(d => [d.x, d.y]);  // ডাইমেনশন তৈরি
const group = dimension.group();  // গ্রুপ তৈরি

const scatterChart = dc.scatterPlot("#scatter-chart");

scatterChart
    .width(600)
    .height(400)
    .dimension(dimension)  // ডাইমেনশন যোগ করা
    .group(group)  // গ্রুপ যোগ করা
    .x(d3.scaleLinear().domain([0, 60]))  // X-অক্ষ স্কেল
    .y(d3.scaleLinear().domain([0, 120]))  // Y-অক্ষ স্কেল
    .r(d => d.size)  // বubble (circle) সাইজ
    .render();

১.৪ সারাংশ

ডাইমেনশন: ডেটার দুটি পরিবর্তনশীল (x এবং y) নিয়ে ডাইমেনশন তৈরি করা হয়।
গ্রুপ: ডেটাকে গ্রুপ করে পর্যবেক্ষণ করা হয়।
সেটিংস: Scatter Plot এর জন্য X এবং Y অক্ষের স্কেল এবং বubble সাইজ নির্ধারণ করা হয়েছে।

২. Bubble Chart তৈরি

Bubble Chart একটি উন্নত Scatter Plot যা প্রতিটি পয়েন্টের আকার (size) বা রঙ দিয়ে আরও বেশি তথ্য প্রকাশ করতে সাহায্য করে। এখানে আমরা Bubble Chart তৈরি করব যা প্রতিটি পয়েন্টের আকার ও রঙের উপর ভিত্তি করে ভিন্ন ভিন্ন মান দেখাবে।

২.১ 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 Bubble 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 Bubble Chart</h1>
    <div id="bubble-chart"></div>
    <script>
        // JavaScript কোড এখানে হবে
    </script>
</body>
</html>

২.২ ডেটাসেট তৈরি

এখানে একটি ডেটাসেট তৈরি করছি যেখানে প্রতিটি পয়েন্টের জন্য x, y, size, এবং color মান থাকবে।

const data = [
    { x: 10, y: 20, size: 5, color: 'red' },
    { x: 20, y: 40, size: 10, color: 'blue' },
    { x: 30, y: 60, size: 15, color: 'green' },
    { x: 40, y: 80, size: 20, color: 'yellow' },
    { x: 50, y: 100, size: 25, color: 'purple' }
];

২.৩ DC.js Bubble Chart তৈরি

এখন DC.js দিয়ে Bubble Chart তৈরি করা হবে:

const ndx = crossfilter(data);  // Crossfilter ইনস্ট্যান্স তৈরি
const dimension = ndx.dimension(d => [d.x, d.y]);  // ডাইমেনশন তৈরি
const group = dimension.group();  // গ্রুপ তৈরি

const bubbleChart = dc.bubbleChart("#bubble-chart");

bubbleChart
    .width(600)
    .height(400)
    .dimension(dimension)  // ডাইমেনশন যোগ করা
    .group(group)  // গ্রুপ যোগ করা
    .x(d3.scaleLinear().domain([0, 60]))  // X-অক্ষ স্কেল
    .y(d3.scaleLinear().domain([0, 120]))  // Y-অক্ষ স্কেল
    .r(d => d.size)  // বubble সাইজ
    .colorAccessor(d => d.color)  // বubble রঙ
    .render();

২.৪ সারাংশ

ডাইমেনশন: X এবং Y এর উপর ভিত্তি করে ডাইমেনশন তৈরি করা হয়।
বubble সাইজ: প্রতিটি পয়েন্টের আকার size প্রপার্টি দ্বারা নির্ধারিত হয়।
রঙ: প্রতিটি পয়েন্টের রঙ color প্রপার্টি দ্বারা নির্ধারিত হয়।
X ও Y অক্ষ স্কেল: X এবং Y অক্ষের স্কেল যথাযথভাবে নির্ধারিত হয়েছে।

সারাংশ

Scatter Plot এবং Bubble Chart উভয়ই DC.js দিয়ে খুব সহজে তৈরি করা যায়, যা ডেটার মধ্যে সম্পর্ক এবং ভিন্ন ভিন্ন তথ্য উপস্থাপন করতে সহায়ক।
Scatter Plot দুইটি পরিমাপের মধ্যে সম্পর্ক দেখাতে ব্যবহৃত হয়, যেখানে Bubble Chart আকার এবং রঙের মাধ্যমে অতিরিক্ত ডেটা প্রদর্শন করতে সহায়ক।

Content added By

Azizar Rahman Aziz

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

DC.js এর বেসিক চার্ট তৈরি

১. DC.js সেটআপ

২. HTML ফাইল সেটআপ

৩. ডেটাসেট তৈরি

৪. Crossfilter সেটআপ

৫. DC.js দিয়ে বার চার্ট তৈরি

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

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

সারাংশ

Bar Chart তৈরি

১. DC.js সেটআপ

২. HTML ফাইলের বেসিক স্ট্রাকচার

৩. ডেটাসেট তৈরি করা

৪. Crossfilter সেটআপ

৫. DC.js দিয়ে বার চার্ট তৈরি করা

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

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

সারাংশ

Pie Chart এবং Donut Chart তৈরি

১. প্রয়োজনীয় ফাইল যুক্ত করা

২. HTML ফাইল তৈরি

৩. JavaScript কোড লিখা

ধাপ ১: ডেটাসেট লোড করা

ধাপ ২: Crossfilter সেটআপ এবং ডাইমেনশন তৈরি

ধাপ ৩: Pie Chart তৈরি

ধাপ ৪: Donut Chart তৈরি

ধাপ ৫: চার্ট রেন্ডার করা

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

৫. চার্ট কাস্টমাইজেশন

সারাংশ

Line Chart এবং Series Chart তৈরি

১. প্রয়োজনীয় ফাইল যুক্ত করা

২. Line Chart তৈরি

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

Line Chart কোড

HTML কোড

৩. Series Chart তৈরি

ডেটাসেট উদাহরণ (Multiple Series)

Series Chart কোড

HTML কোড

৪. সার্বিক কোড উদাহরণ

সারাংশ

Scatter Plot এবং Bubble Chart তৈরি

১. Scatter Plot তৈরি

১.১ HTML ফাইল সেটআপ

১.২ ডেটাসেট তৈরি

১.৩ DC.js Scatter Plot তৈরি

১.৪ সারাংশ

২. Bubble Chart তৈরি

২.১ HTML ফাইল সেটআপ

২.২ ডেটাসেট তৈরি

২.৩ DC.js Bubble Chart তৈরি

২.৪ সারাংশ

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!