Skip to content

polar

Transforms Cartesian coordinates into a polar coordinate system. The x-axis maps to angle (theta) and the y-axis maps to radius.

js
gf.Chart(seafood, { coord: gf.polar() })
  .flow(gf.stack("species", { dir: "x" }))
  .mark(gf.rect({ w: "count", fill: "species" }))
  .render(root, {
    w: 400,
    h: 300,
    transform: { x: 200, y: 150 },
  });

Signature

ts
polar()

Parameters

None. The polar transform has no configuration options.

Usage

Pass the coordinate transform to chart() via the coord option:

ts
chart(data, { coord: polar() })
  .flow(...)
  .mark(...)
  .render(container, opts);

Coordinate Mapping

CartesianPolar
xangle (theta), 0 to 2π
yradius from center

Examples

ts
// Basic polar chart
chart(data, { coord: polar() })
  .flow(stack("category", { dir: "x" }))
  .mark(rect({ w: "value" }))

// Polar with spread for radial segments
chart(data, { coord: polar() })
  .flow(spread("month", { dir: "x" }))
  .mark(rect({ w: 1, h: "value" }))

See Also

  • clock — Similar to polar but with 0° at 12 o'clock