 # 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 * as React from "react"
import { Mafs, CartesianCoordinates } from "mafs"

function HelloFx() {
return (
<Mafs>
<CartesianCoordinates />
</Mafs>
)
}``````

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

``````import * as React from "react"
import { Mafs, CartesianCoordinates } from "mafs"

function HelloFx() {
return (
<Mafs>
<CartesianCoordinates subdivisions={4} />
</Mafs>
)
}``````

## Plotting a function

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

``````import * as React from "react"
import {
Mafs,
CartesianCoordinates,
FunctionGraph,
} from "mafs"

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

Nice! We've passed a plain old JavaScript function, and Mafs evaluated it at many points along our 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
``````import * as React from "react"
import {
Mafs,
CartesianCoordinates,
FunctionGraph,
labelPi,
} from "mafs"

function HelloFx() {
return (
<Mafs
yAxisExtent={[-2.5, 2.5]}
xAxisExtent={[-15, 15]}
>
<CartesianCoordinates
subdivisions={4}
xAxis={{ lines: Math.PI, labels: labelPi }}
/>
<FunctionGraph.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 build 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 * as React from "react"
import {
Mafs,
CartesianCoordinates,
FunctionGraph,
labelPi,
useMovablePoint,
} from "mafs"

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

return (
<Mafs
yAxisExtent={[-2.5, 2.5]}
xAxisExtent={[-15, 15]}
>
<CartesianCoordinates
subdivisions={4}
xAxis={{ lines: Math.PI, labels: labelPi }}
/>
<FunctionGraph.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.