Pie Chart এবং Donut Chart কাস্টমাইজেশন

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

269

DC.js ব্যবহার করে Pie Chart এবং Donut Chart কাস্টমাইজ করা যায় বিভিন্ন দিক থেকে, যেমন রঙ, আকার, লেজেন্ড, লেবেল, ইন্টারঅ্যাকশন, এবং আরও অনেক কিছু। এখানে আমরা দেখব কিভাবে আপনি Pie Chart এবং Donut Chart কাস্টমাইজ করতে পারেন।

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

প্রথমে 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 ফাইল তৈরি

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

৩. JavaScript কোড এবং কাস্টমাইজেশন

ডেটাসেট এবং Crossfilter সেটআপ

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

const ndx = crossfilter(data);

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

৪. Pie Chart কাস্টমাইজেশন

বেসিক Pie Chart তৈরি

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

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

কাস্টমাইজেশন:

রঙ (Colors): colors(d3.scaleOrdinal(d3.schemeCategory10)) দিয়ে রঙ পরিবর্তন করা হয়েছে। আপনি d3.schemeCategory10, d3.schemeSet2, অথবা কাস্টম রঙ কোড ব্যবহার করতে পারেন।
রেডিয়াস (Radius): radius(100) দিয়ে চার্টের আকার কাস্টমাইজ করা।
লেজেন্ড (Legend): legend(dc.legend()) লেজেন্ড যোগ করার জন্য।

৫. Donut Chart কাস্টমাইজেশন

বেসিক Donut Chart তৈরি

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

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

কাস্টমাইজেশন:

Inner Radius (ভিতরের রেডিয়াস): innerRadius(50) দিয়ে ডোনাটের ভিতরের অংশ তৈরি করা হয়েছে।
রঙ (Colors): d3.schemeSet3 বা আপনার পছন্দসই রঙ স্কিম ব্যবহার করতে পারেন।

৬. আরও কাস্টমাইজেশন

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

লেবেল কাস্টমাইজ করতে আপনি .label() ব্যবহার করতে পারেন।

pieChart
    .label(d => d.data.key + ": " + d.data.value); // ক্যাটেগরি এবং মান লেবেলে প্রদর্শন

২. রঙ কাস্টমাইজেশন (পৃথক সেগমেন্ট)

এছাড়াও আপনি বিভিন্ন সেগমেন্টের জন্য আলাদা রঙ সেট করতে পারেন।

pieChart
    .colorAccessor(d => d.data.key)
    .colors(d3.scaleOrdinal().domain(["A", "B", "C", "D", "E"]).range(["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF"]));

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

টুলটিপ কাস্টমাইজ করতে আপনি .on('pretransition') ব্যবহার করতে পারেন।

pieChart
    .on('pretransition', function(chart) {
        chart.selectAll('text.pie-slice')
            .text(function(d) { return d.data.key + ": " + d.data.value; });
    });

৪. ইন্টারঅ্যাকশন কাস্টমাইজেশন

ক্রসফিল্টার এর ফিল্টারিং এবং ডেটা নির্বাচন কাস্টমাইজ করা যায়। উদাহরণস্বরূপ, আপনি একটি চার্টে ক্লিক করার পর অন্য চার্ট আপডেট করতে পারেন:

pieChart
    .on('filtered', function(chart, filter) {
        // অন্য চার্ট আপডেট করতে পারেন এখানে
    });

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

<!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 Customization</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 and Donut Charts Customization</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 }
        ];

        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())
            .colors(d3.scaleOrdinal(d3.schemeCategory10));

        // Donut Chart কাস্টমাইজেশন
        const donutChart = dc.pieChart("#donut-chart");
        donutChart
            .width(300)
            .height(300)
            .radius(100)
            .innerRadius(50)
            .dimension(categoryDimension)
            .group(categoryGroup)
            .legend(dc.legend())
            .colors(d3.scaleOrdinal(d3.schemeSet3));

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

সারাংশ

Pie Chart এবং Donut Chart এর জন্য বিভিন্ন কাস্টমাইজেশন উপলব্ধ, যেমন রঙ, আকার, লেবেল, এবং টুলটিপ।
Inner Radius ব্যবহার করে ডোনাট চার্টের ভিতরের অংশ তৈরি করা যায়।
রঙের স্কিম এবং লেজেন্ড কাস্টমাইজ করতে d3.scaleOrdinal() বা কাস্টম রঙ কোড ব্যবহার করা যায়।
DC.js এর সাথে Crossfilter ব্যবহারের মাধ্যমে ডেটা ইন্টারঅ্যাকশন আরও শক্তিশালী এবং ডাইনামিক হয়।

Content added By

Azizar Rahman Aziz

Pie Chart এবং Donut Chart তৈরি করা

260

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

এখানে 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">

২. Pie Chart তৈরি

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

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

এখানে একটি উদাহরণ ডেটাসেট দেওয়া হল, যেখানে কিছু ক্যাটেগরি এবং তাদের মান রয়েছে:

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

Pie Chart কোড

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)
    .dimension(categoryDimension)
    .group(categoryGroup)
    .radius(100) // পি চার্টের রেডিয়াস
    .legend(dc.legend()) // লেজেন্ড যোগ করা
    .render();

HTML কোড

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

৩. Donut Chart তৈরি

Donut Chart Pie Chart এর মতোই, তবে এতে মাঝখানে একটি ফাঁকা জায়গা থাকে। এটি Pie Chart এর একটি সংস্করণ, যা দেখতে একরকম কিন্তু আরও অনেক বেশি কাস্টমাইজেবল।

ডেটাসেট উদাহরণ (এটি Pie Chart এর মতোই)

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

Donut Chart কোড

const ndx = crossfilter(data);

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

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

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

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

HTML কোড

<div id="donut-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 Pie and Donut 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 Pie and Donut Chart Example</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: 40 }
        ];

        const ndx = crossfilter(data);

        // Pie Chart
        const categoryDimension = ndx.dimension(d => d.category);
        const categoryGroup = categoryDimension.group().reduceSum(d => d.value);

        const pieChart = dc.pieChart("#pie-chart");
        pieChart
            .width(300)
            .height(300)
            .dimension(categoryDimension)
            .group(categoryGroup)
            .radius(100)
            .legend(dc.legend())
            .render();

        // Donut Chart
        const donutChart = dc.pieChart("#donut-chart");
        donutChart
            .width(300)
            .height(300)
            .dimension(categoryDimension)
            .group(categoryGroup)
            .innerRadius(50)
            .radius(100)
            .legend(dc.legend())
            .render();
    </script>
</body>
</html>

৫. সারাংশ

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

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

Content added By

Azizar Rahman Aziz

Slice Labels এবং Legends যোগ করা

335

DC.js ব্যবহার করে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করার সময়, slice labels এবং legends যোগ করা খুবই গুরুত্বপূর্ণ, কারণ এগুলি ব্যবহারকারীকে চার্টের তথ্য স্পষ্টভাবে বুঝতে সাহায্য করে। এখানে Pie Chart এবং Bar Chart এর উদাহরণ দিয়ে দেখানো হবে কিভাবে slice labels এবং legends যোগ করা যায়।

১. Slice Labels যোগ করা

Slice Labels মূলত চার্টের প্রতিটি অংশের উপরে লেবেল হিসাবে প্রদর্শিত হয়, যা ডেটার মান বা নাম জানায়।

উদাহরণ: Pie Chart এ Slice Labels যোগ করা

প্রথমে একটি Pie Chart তৈরি করি এবং প্রতিটি স্লাইসের উপর slice labels যোগ করি।

১.১ 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 Slice Labels</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 Slice Labels Example</h1>
    <div id="pie-chart"></div>
    <script>
        // JavaScript কোড এখানে হবে
    </script>
</body>
</html>

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

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

১.৩ DC.js Pie Chart তৈরি এবং Slice Labels যোগ করা

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

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

pieChart
    .width(400)
    .height(300)
    .dimension(dimension)
    .group(group)
    .radius(100)
    .label(d => d.key + ": " + d.value)  // Slice labels যোগ করা
    .render();

এখানে label(d => d.key + ": " + d.value) ব্যবহার করা হয়েছে, যা প্রতিটি স্লাইসে তার category এবং value দেখাবে।

২. Legends যোগ করা

Legends হলো চার্টের পাশে ছোট আয়তক্ষেত্র বা বক্স, যা প্রতিটি স্লাইস বা ডেটার জন্য রঙের অর্থ দেখায়।

উদাহরণ: Pie Chart এ Legends যোগ করা

DC.js ব্যবহার করে Pie Chart এর পাশে Legends যোগ করা সহজ।

২.১ HTML ফাইল সেটআপ (উপরে দেখানো হয়েছে)

২.২ ডেটাসেট এবং Pie Chart তৈরি

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

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

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

pieChart
    .width(400)
    .height(300)
    .dimension(dimension)
    .group(group)
    .radius(100)
    .label(d => d.key + ": " + d.value)
    .legend(dc.legend().x(350).y(50).itemHeight(13).gap(5))  // Legends যোগ করা
    .render();

এখানে legend(dc.legend().x(350).y(50).itemHeight(13).gap(5)) ব্যবহার করা হয়েছে, যা chart এর পাশে legends যোগ করে। এটি legends এর অবস্থান, উচ্চতা এবং গ্যাপ নির্ধারণ করতে সাহায্য করে।

৩. Bar Chart এ Slice Labels এবং Legends যোগ করা

এখানে একটি Bar Chart তৈরি করা হচ্ছে এবং সেটিতে slice labels এবং legends যোগ করা হবে।

৩.১ 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 Slice Labels</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 with Slice Labels and Legends</h1>
    <div id="bar-chart"></div>
    <script>
        // JavaScript কোড এখানে হবে
    </script>
</body>
</html>

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

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

৩.৩ DC.js Bar Chart তৈরি এবং Slice Labels ও Legends যোগ করা

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

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

barChart
    .width(600)
    .height(300)
    .dimension(dimension)
    .group(group)
    .x(d3.scaleBand().domain(data.map(d => d.category)))  // X-অক্ষ স্কেল
    .xUnits(dc.units.ordinal)
    .barPadding(0.1)
    .outerPadding(0.05)
    .label(d => d.value)  // Slice labels যোগ করা
    .legend(dc.legend().x(510).y(50).itemHeight(13).gap(5))  // Legends যোগ করা
    .render();

এখানে label(d => d.value) ব্যবহার করে প্রতিটি বার স্লাইসের উপর লেবেল যোগ করা হয়েছে এবং legend(dc.legend()) দিয়ে বারের পাশের legends যোগ করা হয়েছে।

সারাংশ

Slice Labels: DC.js দিয়ে Pie Chart বা Bar Chart এর প্রতিটি স্লাইসে লেবেল যোগ করা যায়, যা ডেটার মান বা ক্যাটেগরি দেখাতে সাহায্য করে। এটি label(d => ...) দিয়ে সেট করা হয়।
Legends: DC.js দিয়ে প্রতিটি চার্টের পাশের legends যোগ করা যায়, যা বিভিন্ন স্লাইস বা বার এর রঙের মান বুঝতে সাহায্য করে। Legends সেট করা হয় legend(dc.legend()) এর মাধ্যমে।

এই উপায়ে DC.js ব্যবহার করে আপনার ভিজ্যুয়ালাইজেশনকে আরও ইন্টারেক্টিভ এবং তথ্যপূর্ণ করে তুলতে পারেন।

Content added By

Azizar Rahman Aziz

Color এবং Size কাস্টমাইজেশন

247

DC.js ব্যবহার করে আপনি চার্টের color এবং size কাস্টমাইজ করতে পারেন, যা ভিজ্যুয়ালাইজেশনকে আরও আকর্ষণীয় এবং তথ্যবহুল করে তোলে। DC.js, D3.js এর শক্তি ব্যবহার করে গ্রাফিক্যাল উপাদানগুলোর স্টাইলিং এবং কাস্টমাইজেশন সহজ করে দেয়। এখানে color এবং size কাস্টমাইজেশন করার বিভিন্ন পদ্ধতি আলোচনা করা হয়েছে।

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

DC.js দ্বারা তৈরি চার্টের color কাস্টমাইজ করতে আপনি D3.js এর scale অথবা সরাসরি style পদ্ধতি ব্যবহার করতে পারেন। DC.js স্বয়ংক্রিয়ভাবে কিছু চার্টে ডিফল্ট রঙ ব্যবহার করে, তবে আপনি নিজে রঙ সেট করতে পারেন।

উদাহরণ: বার চার্টের রঙ কাস্টমাইজেশন

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

barChart
    .width(600)
    .height(300)
    .dimension(dimension)  // ডাইমেনশন
    .group(group)          // গ্রুপ
    .x(d3.scaleBand())     // এক্স-অক্ষ স্কেল
    .xUnits(dc.units.ordinal)
    .colors(d3.scaleOrdinal(d3.schemeCategory10)) // রঙ কাস্টমাইজেশন
    .renderHorizontalGridLines(true)
    .yAxisLabel("Value")
    .xAxisLabel("Category");

dc.renderAll();

এখানে, d3.scaleOrdinal(d3.schemeCategory10) ব্যবহার করে রঙের একটি প্যালেট সেট করা হয়েছে। এটি বিভিন্ন ক্যাটেগরি বা গ্রুপের জন্য আলাদা রঙ ব্যবহার করবে। আপনি D3.js এর অন্যান্য স্কিম বা কাস্টম রঙ প্যালেটও ব্যবহার করতে পারেন।

ডায়নামিক রঙ পরিবর্তন

আপনি যদি ডেটার উপর ভিত্তি করে ডায়নামিক রঙ নির্ধারণ করতে চান, তাহলে colors প্যারামিটার ব্যবহার করে রঙ নির্বাচন করতে পারেন। উদাহরণস্বরূপ:

barChart
    .colors(function(d) {
        return d.value > 50 ? 'green' : 'red'; // value অনুযায়ী রঙ নির্ধারণ
    });

এখানে, যদি ডেটার মান ৫০ এর বেশি হয়, তবে সেটি সবুজ রঙে দেখানো হবে, এবং না হলে লাল রঙে।

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

DC.js এ চার্টের size কাস্টমাইজ করা বেশ সহজ। আপনি width, height, radius, এবং অন্যান্য পরামিতি ব্যবহার করে চার্টের আকার নির্ধারণ করতে পারেন।

উদাহরণ: বার চার্টের আকার কাস্টমাইজেশন

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

barChart
    .width(600)  // চার্টের প্রস্থ
    .height(300) // চার্টের উচ্চতা
    .dimension(dimension)
    .group(group)
    .x(d3.scaleBand())
    .xUnits(dc.units.ordinal)
    .radius(50)  // পিঠে আকার কাস্টমাইজ
    .renderHorizontalGridLines(true)
    .yAxisLabel("Value")
    .xAxisLabel("Category");

dc.renderAll();

এখানে width এবং height দিয়ে চার্টের আকার নির্ধারণ করা হয়েছে। radius ব্যবহার করা হয়েছে যদি আপনি কোনো বৃত্তাকার চার্ট (যেমন পাই চার্ট) কাস্টমাইজ করতে চান।

৩. বিকল্প আকার কাস্টমাইজেশন (উদাহরণ: পাই চার্ট)

আপনি যদি পাই চার্টের আকার কাস্টমাইজ করতে চান, তাহলে আপনি radius প্যারামিটার ব্যবহার করতে পারেন:

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

pieChart
    .width(400)
    .height(400)
    .radius(150)  // পাই চার্টের আকার
    .dimension(dimension)
    .group(group)
    .colors(d3.scaleOrdinal(d3.schemeCategory10)) // পাই সেকশনের রঙ
    .renderLabel(true)  // সেকশনের উপর লেবেল প্রদর্শন
    .legend(dc.legend());

dc.renderAll();

এখানে, radius ব্যবহার করে পাই চার্টের আকার নির্ধারণ করা হয়েছে, যা আপনার প্রয়োজন অনুযায়ী ছোট বা বড় করা যেতে পারে।

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

DC.js এর চার্টে যখন ব্যবহারকারী মাউসওভার করে, তখন টুলটিপ প্রদর্শিত হয়। টুলটিপের আকার এবং কন্টেন্ট কাস্টমাইজ করতে, আপনি .title() ফাংশন ব্যবহার করতে পারেন।

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

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

barChart
    .width(600)
    .height(300)
    .dimension(dimension)
    .group(group)
    .x(d3.scaleBand())
    .xUnits(dc.units.ordinal)
    .title(function(d) {
        return "Category: " + d.key + "\nValue: " + d.value; // টুলটিপ কাস্টমাইজেশন
    });

dc.renderAll();

এখানে, .title() ফাংশনটি টুলটিপের কন্টেন্ট কাস্টমাইজ করার জন্য ব্যবহৃত হয়েছে। আপনি ডেটার বিভিন্ন বৈশিষ্ট্য টুলটিপে দেখাতে পারেন।

৫. গ্রিডলাইন এবং আকার কাস্টমাইজেশন

আপনি যদি গ্রিডলাইন এবং অন্যান্য স্টাইলিং কাস্টমাইজ করতে চান, তবে D3.js এর শক্তি ব্যবহার করতে পারেন।

উদাহরণ: গ্রিডলাইন কাস্টমাইজেশন

barChart
    .renderHorizontalGridLines(true)
    .renderVerticalGridLines(false)  // উল্লম্ব গ্রিডলাইন বন্ধ করা
    .gridLinesStyle({stroke: "#888", "stroke-width": 1});  // গ্রিডলাইন স্টাইল

এখানে, renderHorizontalGridLines এবং renderVerticalGridLines ব্যবহার করে গ্রিডলাইন কাস্টমাইজ করা হয়েছে।

সারাংশ

DC.js দিয়ে color এবং size কাস্টমাইজেশন অনেক সহজ। আপনি colors, width, height, এবং radius এর মতো প্যারামিটার ব্যবহার করে চার্টের ভিজ্যুয়াল উপস্থাপনাকে কাস্টমাইজ করতে পারেন। D3.js এর আরও শক্তিশালী কাস্টমাইজেশন ক্ষমতা ব্যবহার করে আপনি স্টাইলিং, গ্রিডলাইন, টুলটিপ এবং অন্যান্য ভিজ্যুয়াল উপাদানগুলো পরিবর্তন করতে পারেন, যা আপনার ডেটা ভিজ্যুয়ালাইজেশনকে আরও প্রফেশনাল এবং তথ্যবহুল করে তোলে।

Content added By

Azizar Rahman Aziz

Advanced Pie Chart Techniques (Inner Radius, Padding)

251

DC.js একটি শক্তিশালী লাইব্রেরি যা D3.js এবং Crossfilter এর সাথে কাজ করে ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে। Pie Chart (পাই চার্ট) DC.js এর অন্যতম জনপ্রিয় চার্ট ধরনের একটি। এই টিউটোরিয়ালে আমরা Advanced Pie Chart Techniques নিয়ে আলোচনা করব, যেখানে Inner Radius (অভ্যন্তরীণ ব্যাসার্ধ) এবং Padding (প্যাডিং) নিয়ে কাজ করা হবে।

Inner Radius (অভ্যন্তরীণ ব্যাসার্ধ)

Inner Radius ব্যবহৃত হয় Donut Chart তৈরিতে। এটি পাই চার্টের ভিতরের অংশে গর্ত তৈরি করে, ফলে একটি ডোনাটের মতো দেখতে হয়। D3.js এবং DC.js তে inner radius ব্যবহার করে এটি অর্জন করা যায়।

Padding (প্যাডিং)

Padding ব্যবহৃত হয় পাই চার্টের সেকশনগুলোর মধ্যে স্থান তৈরি করার জন্য, যা সাধারণত সেগুলোর মধ্যে একটি ছোট ফাঁকা জায়গা তৈরি করে, ফলে সেগুলোর মধ্যে পার্থক্য পরিষ্কারভাবে দেখা যায়।

DC.js এ Advanced Pie Chart Techniques প্রয়োগ

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

প্রথমে ডেটাসেট তৈরি করা হবে এবং 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 Advanced Pie 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 Advanced Pie Chart Example</h1>
    <div id="pie-chart"></div>
    <script>
        // ডেটাসেট তৈরি
        const data = [
            { category: "A", value: 30 },
            { category: "B", value: 50 },
            { category: "C", value: 70 },
            { category: "D", value: 40 },
            { category: "E", value: 60 }
        ];

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

        // ডাইমেনশন তৈরি
        const categoryDimension = ndx.dimension(d => d.category);
        const group = categoryDimension.group().reduceSum(d => d.value);
    </script>
</body>
</html>

এখানে data নামক একটি ডেটাসেট তৈরি করা হয়েছে এবং categoryDimension নামে একটি ডাইমেনশন তৈরি করা হয়েছে।

২. Inner Radius (অভ্যন্তরীণ ব্যাসার্ধ) এবং Padding প্রয়োগ

এখন আমরা Inner Radius (ডোনাট চার্ট তৈরির জন্য) এবং Padding (পাই চার্টের সেকশনগুলোর মধ্যে ফাঁকা স্থান তৈরি করার জন্য) সেটআপ করব।

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

pieChart
    .width(300)    // চার্টের প্রস্থ
    .height(300)   // চার্টের উচ্চতা
    .dimension(categoryDimension)  // ডাইমেনশন সেট করুন
    .group(group)  // গ্রুপ সেট করুন
    .innerRadius(50) // Inner radius (ডোনাট চার্টের জন্য)
    .externalLabels(20) // বাইরের লেবেলগুলির স্থান
    .slicesCap(4)   // সর্বাধিক স্লাইস সীমাবদ্ধ করতে
    .labelOffset(10) // লেবেল স্থান
    .padAngle(0.05)  // প্যাডিং, সেকশনগুলোর মধ্যে ফাঁকা স্থান
    .renderLabel(true)  // লেবেল প্রদর্শন
    .renderTitle(true); // টাইটেল প্রদর্শন

dc.renderAll();

গুরুত্বপূর্ণ প্যারামিটারগুলি:

innerRadius(50): এই প্যারামিটারটি পাই চার্টে গর্ত তৈরি করে, যেটি ডোনাট চার্টের মতো দেখাবে। মান বেশি হলে গর্তটি বড় হবে, কম হলে ছোট।
padAngle(0.05): এই প্যারামিটারটি পাই চার্টের সেকশনগুলোর মধ্যে ফাঁকা স্থান তৈরি করে, যাতে সেগুলোর মধ্যে পার্থক্য পরিষ্কারভাবে দেখা যায়। আপনি এটি সামঞ্জস্য করে সেকশনগুলোর মধ্যে আলাদা স্থান তৈরি করতে পারেন।
externalLabels(20): এই প্যারামিটারটি বাইরের লেবেলগুলির মধ্যে দূরত্ব কনফিগার করে। মান বেশি হলে লেবেলগুলি আরও দূরে চলে যাবে।
slicesCap(4): এটি পাই চার্টের সর্বাধিক স্লাইস সীমাবদ্ধ করতে ব্যবহৃত হয়। আপনি কতটি স্লাইস প্রদর্শন করতে চান তা নির্ধারণ করতে পারেন।

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

<!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 Pie 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 Advanced Pie Chart Example</h1>
    <div id="pie-chart"></div>
    <script>
        // ডেটাসেট তৈরি
        const data = [
            { category: "A", value: 30 },
            { category: "B", value: 50 },
            { category: "C", value: 70 },
            { category: "D", value: 40 },
            { category: "E", value: 60 }
        ];

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

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

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

        pieChart
            .width(300)    // চার্টের প্রস্থ
            .height(300)   // চার্টের উচ্চতা
            .dimension(categoryDimension)  // ডাইমেনশন সেট করুন
            .group(group)  // গ্রুপ সেট করুন
            .innerRadius(50) // Inner radius (ডোনাট চার্টের জন্য)
            .externalLabels(20) // বাইরের লেবেলগুলির স্থান
            .slicesCap(4)   // সর্বাধিক স্লাইস সীমাবদ্ধ করতে
            .labelOffset(10) // লেবেল স্থান
            .padAngle(0.05)  // প্যাডিং, সেকশনগুলোর মধ্যে ফাঁকা স্থান
            .renderLabel(true)  // লেবেল প্রদর্শন
            .renderTitle(true); // টাইটেল প্রদর্শন

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

সারাংশ

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

Content added By

Azizar Rahman Aziz

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

Pie Chart এবং Donut Chart কাস্টমাইজেশন

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

২. HTML ফাইল তৈরি

৩. JavaScript কোড এবং কাস্টমাইজেশন

ডেটাসেট এবং Crossfilter সেটআপ

৪. Pie Chart কাস্টমাইজেশন

বেসিক Pie Chart তৈরি

কাস্টমাইজেশন:

৫. Donut Chart কাস্টমাইজেশন

বেসিক Donut Chart তৈরি

কাস্টমাইজেশন:

৬. আরও কাস্টমাইজেশন

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

২. রঙ কাস্টমাইজেশন (পৃথক সেগমেন্ট)

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

৪. ইন্টারঅ্যাকশন কাস্টমাইজেশন

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

সারাংশ

Pie Chart এবং Donut Chart তৈরি করা

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

২. Pie Chart তৈরি

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

Pie Chart কোড

HTML কোড

৩. Donut Chart তৈরি

ডেটাসেট উদাহরণ (এটি Pie Chart এর মতোই)

Donut Chart কোড

HTML কোড

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

৫. সারাংশ

Slice Labels এবং Legends যোগ করা

১. Slice Labels যোগ করা

উদাহরণ: Pie Chart এ Slice Labels যোগ করা

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

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

১.৩ DC.js Pie Chart তৈরি এবং Slice Labels যোগ করা

২. Legends যোগ করা

উদাহরণ: Pie Chart এ Legends যোগ করা

২.১ HTML ফাইল সেটআপ (উপরে দেখানো হয়েছে)

২.২ ডেটাসেট এবং Pie Chart তৈরি

৩. Bar Chart এ Slice Labels এবং Legends যোগ করা

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

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

৩.৩ DC.js Bar Chart তৈরি এবং Slice Labels ও Legends যোগ করা

সারাংশ

Color এবং Size কাস্টমাইজেশন

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

উদাহরণ: বার চার্টের রঙ কাস্টমাইজেশন

ডায়নামিক রঙ পরিবর্তন

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

উদাহরণ: বার চার্টের আকার কাস্টমাইজেশন

৩. বিকল্প আকার কাস্টমাইজেশন (উদাহরণ: পাই চার্ট)

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

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

৫. গ্রিডলাইন এবং আকার কাস্টমাইজেশন

উদাহরণ: গ্রিডলাইন কাস্টমাইজেশন

সারাংশ

Advanced Pie Chart Techniques (Inner Radius, Padding)

Inner Radius (অভ্যন্তরীণ ব্যাসার্ধ)

Padding (প্যাডিং)

DC.js এ Advanced Pie Chart Techniques প্রয়োগ

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

২. Inner Radius (অভ্যন্তরীণ ব্যাসার্ধ) এবং Padding প্রয়োগ

গুরুত্বপূর্ণ প্যারামিটারগুলি:

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

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!