Library for rendering 3D donut charts with D3 using X3DOM.

Usage no npm install needed!

<script type="module">
  import adrianSureshkumarD3Donut3d from 'https://cdn.skypack.dev/@adrian-sureshkumar/d3-donut-3d';



Library for rendering 3D donut charts with D3 using X3DOM.

Getting Started

Install with npm: npm install @adrian-sureshkumar/d3-donut-3d

Include X3DOM in the head of your HTML:

<script src="http://www.x3dom.org/release/x3dom.js"></script>
<link rel="stylesheet" href="http://www.x3dom.org/release/x3dom.css">

Include donutChart3d in your JavaScript code:

// CommonJS module syntax
const { donutChart3d } = require("@adrian-sureshkumar/d3-donut-3d");

// ES module syntax
import { donutChart3d } from "@adrian-sureshkumar/d3-donut-3d";

Configure chart using donutChart3d:

const chart = donutChart3d();

// Series data
const data = [{
    color: "red",
    name: "Red Series",
    value: 1
}, {
    color: "rgb(0, 255, 0)",
    name: "Green Series",
    value: 2
}, {
    color: d3.rgb(0, 0, 255),
    name: "Blue Series",
    value: 3


// Label format
// - Defaults to showing no labels when not specified.
// - Return an empty string to hide label for a particular series.
function labelFormat(name, value, percentage) {
    // e.g. Red Series: 1 (16.7%)
    return `${name}: ${value} (${percentage.toFixed(1)}%)`


// Duration of transition animations when data is updated
// - Defaults to the D3 transition default when not specified.
// - Can be set to 0 to disable animation.

// Height and width

Apply chart to a selection:


Building Examples

Clone the git repository:

git clone https://github.com/adrian-sureshkumar/d3-donut-3d.git

Install dependencies:

npm install

Build the code:

npm run build

Create JavaScript bundles for the examples:

npm run bundle:examples