Hello ƒ(𝑥)f of x

Documentation often starts with “Hello, world”. For this library, the equivalent example is rendering a function on the coordinate plane and making it a little bit interactive.

Drawing a coordinate plane

Mafs only needs a few components to set up a working coordinate plane view. We'll start with the same setup we had in “Installation”—just a Cartesian coordinate plane with nothing too interesting on it.

import { Mafs, Coordinates } from "mafs"

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

CartesianCoordinates is pretty customizable. Let's make our graph a little bit more sophisticated-looking by adding some subdivisions.

import { Mafs, Coordinates } from "mafs"

function HelloFx() {
  return (
    <Mafs>
      <Coordinates.Cartesian subdivisions={4} />
    </Mafs>
  )
}

Plotting a function

Plotting a function works by passing a literal JavaScript function. Let's plot Math.sin(x).

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

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

We've passed a plain JavaScript function, and Mafs evaluated it and plotted it across the coordinate plane.

This looks a little weird though: sine waves are periodic in π, so it'd be nice to reflect that in our coordinate plane. Let's do the following:

• Tell the x-axis to draw a line at every multiple of π
• Label the x-axis in terms of π
• Zoom the x-axis out a bit
• Zoom the y-axis in a bit
• Tell Mafs to let us squish the viewport

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

function HelloFx() {
  return (
    <Mafs
      viewBox={{ x: [-10, 10], y: [-2, 2] }}
      preserveAspectRatio={false}
    >
      <Coordinates.Cartesian
        subdivisions={4}
        xAxis={{ lines: Math.PI, labels: labelPi }}
      />
      <Plot.OfX y={(x) => Math.sin(x)} />
    </Mafs>
  )
}

At this point, it's worth noting that you haven't instructed the library to do anything—you've just declared what you want on the screen. This model of programming is core to React, and also core to this library.

Making things interactive

If you imagine holding what you've just built in your hands, it would feel only natural to slide the wave back and forth to adjust the phase. Let's add a movable point and hook it up to our function.

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

function HelloFx() {
  const phase = useMovablePoint([0, 0], {
    constrain: "horizontal",
  })

  return (
    <Mafs
      viewBox={{ x: [-10, 10], y: [-2, 2] }}
      preserveAspectRatio={false}
    >
      <Coordinates.Cartesian
        subdivisions={4}
        xAxis={{ lines: Math.PI, labels: labelPi }}
      />
      <Plot.OfX y={(x) => Math.sin(x - phase.x)} />
      {phase.element}
    </Mafs>
  )
}

There are a few noteworthy things here: one is how we declared our point. We start centered on the origin, but constrain the motion of the point horizontally.

Also worth noting is how we subtracted phase.x from the x in our sine function. This is just math—we're moving our wave side-to-side based on the point's position.

Lastly, we draw {phase.element} on the view, which renders the actual point. We place it last so that it gets rendered above our function.

Up next

The remainder of these guides are more specific: they cover components you can add to your visualization. The rest is up to you and your imagination. The examples on this site might provide some inspiration, though.