Coordinates

Coordinates overlay a grid of lines on top of the Mafs canvas to give a sense of scale. Axes are pretty configurable—the spacing between lines, number of subdivisions, and the labels themselves can be altered.

import { Coordinates } from "mafs"

Cartesian coordinates

import { Mafs, Coordinates } from "mafs"

function Example() {
  return (
    <Mafs>
      <Coordinates.Cartesian />
    </Mafs>
  )
}

Axis options

Each axis—xAxis and yAxis—can be configured with the following options:

• axis: Whether to draw the axis line.
• lines: The spacing between each primary line orthogonal to the axis, or false to draw none.
• subdivisions: How many subdivisions to draw per line, or false to draw none.
• labels: A function that returns a label for each line.

The entire axis can also be set to false to disable it entirely.

Mafs also exports a helper function, labelPi, which can be passed to labels to render in terms of π.

import { Mafs, Coordinates, labelPi } from "mafs"

function CartesianCoordinatesExample() {
  return (
    <Mafs
      viewBox={{ x: [-8, 8], y: [-Math.PI * 2, Math.PI * 2], padding: Math.PI / 2, }}
      preserveAspectRatio={false}
    >
      <Coordinates.Cartesian
        xAxis={{
          lines: 1,
          labels: (n) => (isOdd(n) ? n : ""),
        }}
        yAxis={{
          lines: Math.PI,
          subdivisions: 4,
          labels: labelPi,
        }}
      />
    </Mafs>
  )
}

function isOdd(n: number) {
  return ((n % 2) + 2) % 2 === 0
}

Polar coordinates

import { Mafs, Coordinates } from "mafs"

function Example() {
  return (
    <Mafs>
      <Coordinates.Polar subdivisions={5} lines={2} />
    </Mafs>
  )
}

Axis options

Polar coordinates take most of the same options as cartesian coordinates, except that lines and subdivisions affects the radial rather than the x and y axes.