d3.pie function
d3.pie creates a new pie generator that computes the necessary angles to represent a tabular dataset as a pie or donut chart.
d3-shape/pie
24 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
pie generator function
A pie generator function computes the arc angles for the given dataset.
pie.value method
pie.value sets the value accessor.
pie.sort method
pie.sort sets the sort order comparator.
pie.sortValues method
pie.sortValues sets the sort order comparator.
pie.startAngle method
pie.startAngle sets the overall start angle.
pie.endAngle method
pie.endAngle sets the overall end angle.
pie.padAngle method
pie.padAngle sets the pad angle between adjacent arcs.
d3.pie() constructor
d3.pie() constructs a new pie generator with default settings.
pie(data) generates arc angles
Calling a pie generator with an array of data returns an array of objects representing each datum's arc angles. The returned array has the same length as the input data, with elements in the same order as the input, even when the pie chart is sorted.
Pie arc object structure
Each object in the array returned by pie(data) has these properties: data (the input datum), value (the numeric value of the arc), index (the zero-based sorted index), startAngle (in radians), endAngle (in radians), and padAngle (in radians).
Pie angle measurements in radians
Angles in pie generators are in radians, with 0 at -y (12 o'clock) and positive angles proceeding clockwise.
pie.value(value) accessor
pie.value(value) sets the value accessor to the specified function or number. The value accessor is invoked for each element in the input data array with arguments d (the element), i (the index), and data (the array). The default value accessor is function value(d) { return d; }. If value is not specified, returns the current value accessor.
pie.sortValues(compare) value comparator
pie.sortValues(compare) sets the value comparator to the specified function. The comparator takes two arguments a and b, which are values derived from the input data using the value accessor. Return a number less than zero if a's arc should come before b's, greater than zero if after, or zero if order is unspecified. The default is d3.descending. Setting the value comparator implicitly sets the data comparator to null. Sorting does not affect the order of the generated arc array, only the computed angles.
pie.startAngle(angle) accessor
pie.startAngle(angle) sets the overall start angle of the pie to the specified function or number. The start angle is the starting angle of the first arc. The default is function startAngle() { return 0; }. If angle is not specified, returns the current start angle accessor.
pie.endAngle(angle) accessor
pie.endAngle(angle) sets the overall end angle of the pie to the specified function or number. The end angle is the ending angle of the last arc. The default is function endAngle() { return 2 * Math.PI; }. The value of endAngle is constrained to startAngle ± τ, such that |endAngle - startAngle| ≤ τ. If angle is not specified, returns the current end angle accessor.
pie.padAngle(angle) accessor
pie.padAngle(angle) sets the pad angle to the specified function or number. The pad angle specifies the angular separation in radians between adjacent arcs. The total padding is the specified angle times the number of elements in the input data array, and at most |endAngle - startAngle|; remaining space is divided proportionally by value such that the relative area of each arc is preserved. The default is function padAngle() { return 0; }. If angle is not specified, returns the current pad angle accessor.
pie() example with data array
Example showing how to compute angles for a pie chart: const data = [1, 1, 2, 3, 5, 8, 13, 21]; const pie = d3.pie(); const arcs = pie(data);
pie.value() example with CSV data
Example setting a value accessor for CSV data with number and name fields: const data = await d3.csv("lost.csv", d3.autoType); const pie = d3.pie().value((d) => d.number); const arcs = pie(data);
pie.sort() example with data comparator
Example sorting pie by a data field: const pie = d3.pie().sort((a, b) => d3.ascending(a.name, b.name));
pie.sortValues() example with value comparator
Example sorting pie by values in ascending order: const pie = d3.pie().sortValues(d3.ascending);
pie.startAngle(0) example
Example setting the start angle to 0: const pie = d3.pie().startAngle(0);
pie.endAngle(Math.PI) example
Example setting the end angle to Math.PI: const pie = d3.pie().endAngle(Math.PI);
Pie generator outputs angles, not shapes
The pie generator computes the necessary angles to represent a tabular dataset as a pie or donut chart; these angles can then be passed to an arc generator. The pie generator does not produce a shape directly.