Basic Spectrogram

Render an image and axes.

Loading...

Define Axes

In your application provider, use Specviz.Axis.Provider to provide the axes.

./App.jsx

import * as Specviz from "@meridian-analytics/specviz"

function AppProvider(props) {
  const axes = React.useMemo(
    () => ({
      seconds: ...
      hertz: ...
      decibels: ...
      myaxis: ...
    }),
    [],
  )
  return (
    <Specviz.Axis.Provider value={axes}>
      <...>
        {props.children}
      </...>
    </Specviz.Axis.Provider>
  )
}

Axis Functions

To create the axes, Axis.time and Axis.frequency are used. To create a custom axis, use Axis.linear and Axis.nonlinear.

./App.jsx

function AppProvider(props) {
  const axes = React.useMemo(
    () => ({
      seconds: Specviz.Axis.time(0, 60),
      hertz: Specviz.Axis.frequency(20000, 0),
    }),
    [],
  )
  return ...
}

Define Plane

Finally, use the Specviz.Plane.Provider to designate particular axes to the visualization.

./App.jsx

function App() {
  return (
    <Specviz.Plane.Provider xaxis="seconds" yaxis="hertz">
      <div>
        <Specviz.Axis.Horizontal />
      </div>
      <div>
        <Specviz.Axis.Vertical />
      </div>
      <div>
        <Specviz.Visualization src="./spectrogram.png" />
      </div>
    </Specviz.Plane.Provider>
  )
}