d3-shape

d3-shape is the shape-generation module of D3.js, providing data-driven generators for the visual primitives that most charts are built from: arcs (for pie and donut charts), lines and areas (for line and area charts), symbols (for scatterplots), and stacked layouts (for stacked bar and area charts). Each generator is a configurable function — you feed it data and accessor functions, and it produces either an SVG path string or a sequence of Canvas drawing commands via a pluggable context/curve system.

Because it only produces geometry rather than owning any DOM or rendering pipeline, d3-shape slots into any rendering approach: raw SVG, Canvas, or a component framework like React or Svelte that renders the generated path string itself. It underlies a large share of the JavaScript charting ecosystem, either directly or via libraries that wrap it.

What You Get

• Arc generator for pie, donut, and radial-bar shapes with corner radius, padding angle, and corner tangent support
• Line and area generators (plus radial variants) with configurable x/y accessors and a defined() gap-handling hook
• A pluggable curve system (basis, cardinal, Catmull-Rom, monotone, natural, step, bump, and linear variants) for interpolating between points
• Stack layout with selectable order (ascending, descending, inside-out, appearance, none) and offset (expand, silhouette, wiggle, diverging, none) algorithms for stacked charts
• A symbol generator with a dozen built-in marker types (circle, cross, diamond, square, star, triangle, wye, asterisk, plus, times) for scatterplot points
• Link generators (horizontal, vertical, radial) for drawing curved connectors between nodes, as used in tree and network diagrams

Common Use Cases

• Rendering pie and donut charts by feeding arc data through the arc generator
• Drawing line and area charts with smooth or stepped interpolation via the curve system
• Building stacked bar or area charts using the stack layout’s ordering and offset algorithms
• Plotting scatterplot markers with the symbol generator’s built-in shape types
• Drawing curved links between nodes in tree, network, or Sankey-style diagrams

Under The Hood

Architecture Each generator (arc.js, line.js, area.js, pie.js, stack.js, symbol.js) follows the same closure-based factory pattern established across the D3 ecosystem: a function returns a configurable generator closure exposing chained accessor methods (e.g. line.x(), line.y(), line.curve()) that mutate captured local state and return the generator itself for chaining. Rendering is decoupled from geometry through the context/curve abstraction in src/path.js and src/curve/: a generator calls methods like lineStart(), point(), and lineEnd() on whatever context it’s given, which is either a path buffer (producing an SVG path string) or a Canvas 2D context (producing draw calls directly), so the same generator works for both targets with no branching in the generator itself. Curves plug into this same protocol as intermediary contexts, letting line.curve(curveBasis) reroute point calls through interpolation logic before they reach the final output. Stack layout (stack.js) is a separate two-stage pipeline: series construction followed by independently swappable order and offset functions, keeping the layout algorithm decomposed into small single-purpose modules under src/order/ and src/offset/.

Tech Stack Written in plain ES modules with zero runtime dependencies beyond d3-path (used for the shared path-buffer implementation). No framework, bundler-specific runtime, or build-time codegen is used for the library itself; rollup (with rollup-plugin-terser) is used only to produce the published UMD/minified bundles, and the package ships both an ES module entry point and a UMD build for CDN/<script> consumption via unpkg/jsdelivr.

Code Quality Tests are written with mocha against the source modules directly (test/**/*-test.js), covering the public API surface of each generator including edge cases like empty/undefined data, degenerate arcs, and every curve/offset/order variant, and CI runs eslint alongside the test suite on every push and pull request via GitHub Actions. Code style favors compact, low-abstraction procedural functions with var-based closures rather than classes, consistent with the rest of the D3 module family; there is no TypeScript, but the small, focused module boundaries and thorough test coverage substitute for static typing in catching regressions.

What Makes It Unique Rather than being a chart library, d3-shape isolates pure geometry computation from rendering and layout, which is what lets the same arc/line/area/stack math work identically whether the output is SVG, Canvas, or consumed by a completely different rendering layer such as a React component that reads the returned path string. The context/curve protocol is a small but effective abstraction: adding a new interpolation style or a new output target requires implementing one interface, not modifying every generator. This design is why so much of the JavaScript charting ecosystem either depends on d3-shape directly or has independently converged on a similar geometry/rendering split.