Skip to content

D3.js Shapes — Arc, Pie, Line, Area, and Symbol Generators

DodaTech Updated 2026-06-28 4 min read

In this tutorial, you will learn about D3.js Shapes. We cover key concepts, practical examples, and best practices to help you master this topic.

D3.js shape generators convert data into SVG path strings for arcs, pies, lines, areas, and symbols, abstracting complex geometry calculations.

What You'll Learn

By the end of this guide, you will use d3.arc for pie and donut charts, d3.pie for angle calculation, d3.line and d3.area for time series, d3.symbol for markers, and curve interpolation for smooth lines.

Pie and Arc

var data = [30, 50, 20, 40];
var pie = d3.pie()
    .value(function(d) { return d; })(data);

var arc = d3.arc()
    .innerRadius(0)
    .outerRadius(100);

console.log(pie);
// [{data:30, startAngle:0.0, endAngle:0.77}, ...]

Donut Chart

var arc = d3.arc()
    .innerRadius(60)
    .outerRadius(120);

var arcs = svg.selectAll('path')
    .data(pie).enter()
    .append('path')
    .attr('d', arc)
    .attr('fill', function(d, i) {
        return d3.schemeCategory10[i];
    });

Line Generator

var line = d3.line()
    .x(function(d) { return xScale(d.date); })
    .y(function(d) { return yScale(d.value); })
    .curve(d3.curveMonotoneX);

svg.append('path')
    .datum(data)
    .attr('d', line)
    .attr('fill', 'none')
    .attr('stroke', '#4ecdc4')
    .attr('stroke-width', 2);

Area Generator

var area = d3.area()
    .x(function(d) { return xScale(d.date); })
    .y0(yScale(0))
    .y1(function(d) { return yScale(d.value); })
    .curve(d3.curveMonotoneX);

svg.append('path')
    .datum(data)
    .attr('d', area)
    .attr('fill', '#4ecdc4')
    .attr('fill-opacity', 0.3);

Symbol Generator

var symbols = d3.symbol()
    .type(d3.symbolCircle)
    .size(64);

svg.selectAll('path')
    .data(data).enter()
    .append('path')
    .attr('d', symbols)
    .attr('transform', function(d) {
        return 'translate(' + d.x + ',' + d.y + ')';
    });

Common Mistakes

1. Not Calling the Pie Generator

d3.pie returns a function. You must call it with data: pie(data). The result is an array of arc objects.

2. Wrong Curve Type for Data

d3.curveStep produces steps. d3.curveCardinal overshoots. d3.curveMonotoneX preserves monotonicity for most chart data.

3. Missing Data Sorting

Pie slices sort by value by default. Set pie.sort(null) to disable.

4. Zero Inner Radius in Donut

Make innerRadius > 0 for a donut. innerRadius = 0 creates a full pie.

5. Symbol Size in Square Pixels

The size parameter of d3.symbol is in square pixels. Default is 64, which is an 8x8 area.

Practice Questions

Q1: What does d3.pie() return? A: It returns a function that takes data and returns an array of arc descriptor objects with startAngle, endAngle, and data properties.

Q2: How do you create a donut vs pie? A: Set innerRadius > 0 for donut, innerRadius = 0 for pie.

Q3: What is d3.curveMonotoneX used for? A: It produces smooth curves that preserve monotonicity (no overshooting) — ideal for chart data.

Q4: What symbol types are available? A: d3.symbolCircle, d3.symbolCross, d3.symbolDiamond, d3.symbolSquare, d3.symbolStar, d3.symbolTriangle, d3.symbolWye.

Q5: How do you stack areas? A: Use d3.stack() to compute stacked series, then render each with d3.area using y0 and y1.

Challenge: Build a stacked area chart showing monthly sales across quarters. Include a legend and smooth curves.

FAQ

Can I use shape generators with React?

Yes. D3 shape generators produce strings. Use them in React's dangerouslySetInnerHTML or as path props in libraries like victory.

How do I animate pie chart transitions?

Use d3.transition with arcTween. Interpolate between old and new startAngle and endAngle.

What is the maximum symbol size?

There is no maximum. But large symbols with filled paths may overlap. Use a size proportional to your chart dimensions.

How do I create custom shapes?

Use d3.symbol with a custom path factory implementing the symbol type interface (draw function).

Can I use curves other than monotone?

Yes: d3.curveLinear (straight), d3.curveCardinal (catmull-rom), d3.curveBasis (b-spline), d3.curveStep (step-wise).

Try It Yourself

Build a donut chart with multiple arcs and a hover highlight effect.

<!DOCTYPE html>
<html>
<head>
    <title>Donut Chart Demo</title>
    <style>
        body { font-family: sans-serif; padding: 20px; background: #f5f5f5; }
        svg { display: block; margin: 0 auto; }
        .arc { cursor: pointer; stroke: #fff; stroke-width: 2; }
        .arc:hover { opacity: 0.8; }
        #tooltip { position: absolute; background: #333; color: #fff; padding: 8px 12px; border-radius: 6px; font-size: 13px; display: none; }
    </style>
</head>
<body>
<h2>Donut Chart</h2>
<svg width="400" height="400" id="chart"></svg>
<div id="tooltip"></div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
var width = 400, height = 400;
var svg = d3.select('#chart')
    .append('g')
    .attr('transform', 'translate(' + width/2 + ',' + height/2 + ')');

var data = [
    { label: 'Sales', value: 40, color: '#ff6b35' },
    { label: 'Marketing', value: 25, color: '#4ecdc4' },
    { label: 'R&D', value: 20, color: '#2a9d8f' },
    { label: 'Support', value: 15, color: '#e8a87c' }
];

var pie = d3.pie().value(function(d) { return d.value; }).sort(null);
var arcs = pie(data);

var arc = d3.arc()
    .innerRadius(80)
    .outerRadius(140);

svg.selectAll('path')
    .data(arcs).enter()
    .append('path').attr('class', 'arc')
    .attr('d', arc)
    .attr('fill', function(d) { return d.data.color; });

var tooltip = d3.select('#tooltip');
svg.selectAll('.arc')
    .on('mouseover', function(event, d) {
        tooltip.style('display', 'block')
            .html('<strong>' + d.data.label + '</strong>: ' + d.data.value + '%')
            .style('left', (event.pageX + 12) + 'px')
            .style('top', (event.pageY - 10) + 'px');
    })
    .on('mouseout', function() {
        tooltip.style('display', 'none');
    });
</script>
</body>
</html>

What's Next

Build a complete data dashboard.

Project — Data dashboard project.

← Previous D3.js Color Scales — Mapping Data to Color Next → D3.js Project — Interactive Data Dashboard

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse D3Js