Pie Charts & Geometry
A Mathematical Construction of Pie Charts Using Cubic Bézier Curves
This page demonstrates how a pie chart can be constructed mathematically using circle primitives, cubic Bézier curves, and 2D rotation, rather than relying on built-in arc primitives.
All geometry is intentionally constructed in a single, fixed quadrant first, then rotated into position. This constraint simplifies both the math and the rendering pipeline, while remaining fully general.
Prework: Data Normalization & Angular Planning
Before any geometry is drawn, the data must be converted into angular space.
Instructions
- Collect the dataset. Begin with an ordered list of non-negative values. The order determines the order of slices in the pie.
- Compute the total. Sum all values to get a single total.
- Convert values into angles. Map each value to a proportion of 360°.
- Accumulate start angles. Each slice’s start angle is the sum of all previous slice angles.
- Result. Each slice is now defined purely in terms of a sweep angle and a start angle. No geometry has been constructed yet.
Circle Primitives
This section establishes the radial boundaries of a pie slice using basic trigonometry.
Coordinate System
- The origin (0, 0) is the center of the circle.
- The circle has a fixed radius r.
- Angles are measured in degrees.
- All primitives are constructed in the bottom quadrant (270° → 359.9°).
Primitive Construction
- The slice is defined by two straight radial edges: one fixed at 360° (equivalent to 0°), and one defined by the input end angle θ.
- Using polar-to-Cartesian conversion (see the derivation below), we compute the terminal point of the slice boundary.
- This produces two endpoints: S = (0, 0) and E = (x, y).
At This Stage
- The slice has no curvature.
- The visualization shows how angular input maps directly to Cartesian coordinates.
- This forms the geometric foundation for the Bézier arc that follows.
This affects the formulas (not the rendered circle size). Press Enter or click Set.
Range 270 ≤ θ < 360. Press Enter or click Calculate.
Cubic Bézier Construction
A circular arc cannot be represented exactly using cubic Bézier curves, but it can be approximated with very high accuracy.
This section demonstrates how a circular arc segment is constructed using four Bézier control points.
Bézier Nodes
Each arc segment is defined by four points: S (start), C1, C2, and E (end). These four points define a single cubic Bézier curve.
Note: This construction uses a remainder (depletion) model. The slice represents the remaining portion of the quadrant. As the end angle increases toward 360°, the slice contracts.
Quarter-Circle Constraint
- Each Bézier segment spans no more than 90°.
- Larger slices are subdivided into multiple segments.
- Segments are stitched end-to-end.
- This is why the interactive input is constrained to: 270° ≤ θ < 360°.
Control Point Placement
Control points are placed tangent to the circle at the start and end points, ensuring smooth curvature and continuity (see the derivation below).
The result is a visually indistinguishable approximation of a circular arc using cubic Bézier math.
Range 270–359.9 (quarter-circle max). Press Enter or click Calculate.
Rotation and Composition
All slices are constructed in the same quadrant. To place them correctly in the pie chart, the entire slice geometry is rotated.
Why Rotation Is Applied Last
- Bézier math remains simpler in a fixed orientation.
- Control point relationships stay stable.
- Rotation applies uniformly to all nodes.
Rotation Transformation
For any point (x, y), rotation by angle φ is defined by a standard 2D rotation (see the derivation below).
Here, φ = startAngle.
Rotated Geometry
Each node is transformed: S → S′, C1 → C1′, C2 → C2′, and E → E′.
This produces the final slice geometry in its correct position within the pie chart.
Range 0–359.9. Press Enter or click Calculate.
Full Pie Composition
To construct the full chart:
- Normalize the dataset.
- Compute slice angles.
- For each slice:
- Build primitives.
- Construct Bézier arcs (subdividing if necessary).
- Rotate geometry into position.
- Render slices sequentially.
Each slice is independent. Continuity emerges naturally from accumulation and rotation.
Why This Approach Works
- Geometry is local and predictable.
- Rotation is cheaper than recomputation.
- Bézier approximation avoids SVG arc quirks.
- Interactivity remains smooth under repeated updates.
The result is a pie chart whose geometry is explicit, reproducible, and responsive under interaction.
A note on coordinate systems (optional)
Readers familiar with mathematical coordinate systems may notice that the vertical axis in the visualization appears inverted relative to textbook Cartesian diagrams.
This is intentional. Screen-based graphics systems (SVG, Canvas, and most UI frameworks) use a coordinate system where the origin is at the top-left of the viewport and the y-axis increases downward. Trigonometric calculations are performed using standard mathematical conventions and then mapped into screen coordinates for display.
This distinction does not affect the geometry itself, but it is worth keeping in mind when comparing formulas or diagrams across different contexts.
For further background, see:
- Wikipedia — 2D computer graphics — Discussion of coordinate orientation and rotation direction in 2D computer graphics.
- Wikipedia — Cartesian coordinate system
- SVG coordinate systems and transformations (MDN — authoritative, practical, and widely trusted)
Design Note
In addition to the geometric model described above, the visualization follows a deliberate visual and interaction system. Decisions around typographic scale, luminance hierarchy, stroke weight, color semantics, and interaction affordances are treated as structural rather than decorative.
For readers interested in how these choices were made, see Design Rationale: Visual Encoding in the Pie & Bézier Studies.