This code generates a basic pie chart using D3.js, taking data as input and returning an SVG representation of the chart with labeled slices.

Run example

npm run import -- "d3 pie chart"

d3 pie chart

var D3Node = require('d3-node');
var d3n = new D3Node();
var d3 = d3n.d3;

function d3PieChart(values) {
    var margin = {top: 100, right: 100, bottom: 100, left: 100},
        height = 500, width = 500,
        radius = d3.min([height - margin.top - margin.bottom, width - margin.left - margin.right]) / 2;

    var color = d3.scaleOrdinal(d3.schemeAccent)
    
    var svg = d3n.createSVG(width, height)
        //.attr('preserveAspectRatio', 'xMidYMid meet')
        //.attr('viewBox', '0 0 ' + width + ' ' + height)
    
    var g = svg.append('g')
        .attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')')

    var pie = d3.pie()
        .sort(null)
        .value(d => d.value)

    var path = d3.arc()
        .outerRadius(radius - 10)
        .innerRadius(0);

    var label = d3.arc()
        .outerRadius(radius + 5)
        .innerRadius(radius + 5)

    var arc = g.selectAll('.arc')
        .data(pie(values))
        .enter().append('g')
        .attr('class', 'arc')

    arc.append('path')
        .attr('d', path)
        .attr('fill', d => color(d.data.label))

    arc.append('text')
        .text(d => d.data.label + ' - ' + d.data.value)
        .attr('dy', '0.35em')
        .attr('transform', d => {
            var midAngle = true || d.endAngle < Math.PI 
                ? d.startAngle/2 + d.endAngle/2 
                : d.startAngle/2 + d.endAngle/2 + Math.PI;
            return 'translate(' + label.centroid(d) + ') rotate(-90) rotate(' + (midAngle * 180/Math.PI) + ')'
        })

    return d3n.svgString()
}
module.exports = d3PieChart;

const d3 = require('d3');

/**
 * Creates a Pie Chart using D3.js
 * @param {Object[]} values - Data for the chart, each object must have a 'label' and a 'value'
 * @returns {string} The SVG string representation of the chart
 */
function d3PieChart(values) {
    // Constants
    const MARGIN = { top: 100, right: 100, bottom: 100, left: 100 };
    const HEIGHT = 500;
    const WIDTH = 500;

    // Calculate radius
    const radius = Math.min(HEIGHT - MARGIN.top - MARGIN.bottom, WIDTH - MARGIN.left - MARGIN.right) / 2;

    // Color scale
    const color = d3.scaleOrdinal(d3.schemeAccent);

    // Create SVG
    const svg = d3.select('body').append('svg')
       .attr('width', WIDTH + MARGIN.left + MARGIN.right)
       .attr('height', HEIGHT + MARGIN.top + MARGIN.bottom)
       .append('g')
       .attr('transform', `translate(${WIDTH / 2 + MARGIN.left}, ${HEIGHT / 2 + MARGIN.top})`);

    // Pie layout
    const pie = d3.pie()
       .sort(null)
       .value(d => d.value);

    // Arcs
    const arc = d3.arc()
       .outerRadius(radius - 10)
       .innerRadius(0);

    const label = d3.arc()
       .outerRadius(radius + 5)
       .innerRadius(radius + 5);

    // Data binding
    const g = svg.selectAll('.arc')
       .data(pie(values))
       .enter().append('g')
       .attr('class', 'arc');

    // Draw paths and labels
    g.append('path')
       .attr('d', arc)
       .attr('fill', d => color(d.data.label))
       .attr('opacity', 0.7);

    g.append('text')
       .text(d => d.data.label +'-'+ d.data.value)
       .attr('dy', '0.35em')
       .attr('transform', d => {
            const midAngle = (d.endAngle < Math.PI)? (d.startAngle + d.endAngle) / 2 : (d.startAngle + d.endAngle) / 2 + Math.PI;
            return `translate(${label.centroid(d)}) rotate(-90) rotate(${midAngle * 180 / Math.PI})`;
        })
       .attr('font-size', 12)
       .attr('text-anchor','middle');

    // Return SVG string
    return svg.node().outerHTML;
}

module.exports = d3PieChart;

This code generates a simple pie chart visualization using D3.js.

Here's a breakdown:

1. Setup:

   • Imports d3-node for using D3.js in a Node.js environment.
   • Initializes a D3 instance using D3Node.

2. d3PieChart Function:

   • Takes an array of values (values) as input, representing the data for the pie chart.
   • Defines margins, height, width, and radius for the chart.
   • Creates a color scale using d3.schemeAccent.
   • Creates an SVG element with the specified dimensions.
   • Appends a group element to the SVG for positioning the chart.

3. Data Preparation:

   • Defines a pie generator function to create pie slices based on the input values.
   • Defines arc generators for both the pie slices and the labels.

4. Visualization:

   • Selects all elements with the class "arc" and binds the pie data to them.
   • Appends a path element for each slice, setting the d attribute using the path generator and the fill color using the color scale.
   • Appends a text element for each slice, displaying the label and value, and positions it using the label generator and transformations.

5. Rendering:

   • Returns the SVG string representation of the pie chart.

In essence, this code takes data and generates a basic pie chart visualization using D3.js, allowing for a clear representation of proportions.