Graphs

Functions of x

import { Mafs, CartesianCoordinates, FunctionGraph } from "mafs"

function HelloFx() {
  return (
    <Mafs>
      <CartesianCoordinates subdivisions={4} />
      <FunctionGraph.OfX y={(x) => Math.sin(x)} />
    </Mafs>
  )
}

Props

<FunctionGraph.OfX ... />
NameDescriptionDefault
y
(x: number) => number
β€”
quality
"low" | "medium" | "high"
low
svgPathProps
SVGProps<SVGPathElement>
{}
color
string
β€”
opacity
number
1
weight
number
3
style
"solid" | "dashed"
β€”

Parametric functions

import { Mafs, CartesianCoordinates, FunctionGraph, Theme } from "mafs"

function Parametric() {
  return (
    <Mafs viewBox={{ x: [-3, 3], y: [-3, 3] }}>
      <CartesianCoordinates />
      <FunctionGraph.Parametric
        xy={(t) => [
          (t / 4) * Math.cos(t * 2 * Math.PI),
          (t / 4) * Math.sin(t * 2 * Math.PI),
        ]}
        t={[0, 8]}
        color={Theme.blue}
      />
    </Mafs>
  )
}

Props

<FunctionGraph.Parametric ... />
NameDescriptionDefault
xy
(t: number) => Vector2
β€”
t
[number, number]
β€”
color
string
β€”
style
"solid" | "dashed"
solid
minimumSamplingDepth

How deep the interpolation algorithm will go in terms of subdividing the function to find points that minimize the jaggedness of the function. Defaults to 8.

Most functions will not need to override this. It's mainly to support functions that are very jagged.

This value affects performance exponentially, O(2ⁿ). The default value is 8, meaning functions will be subdivided into at least 256 points. For any three consecutive points, if the area of the triangle formed by those points is larger than 0.1 square pixels, the points will be further, recursively subdivided.

number
8
svgPathProps
SVGProps<SVGPathElement>
{}
opacity
number
1
weight
number
2
Display
Text
Display
Ellipses