Scalars Types

In this document, we will cover some of the scalar types used in a graphing library.

Vec2

The Vec2 class represents a 2D vector or a point in the 2D space. It has two properties, x and y, representing the coordinates of the point or the dimensions of the vector.

Vec2ish

Vec2ish is a flexible type that can represent a Vec2 instance or a similar 2D vector or point.

export type Vec2ish = Vec2 | [number, number] | { x: number; y: number };

A Vec2 instance.
A tuple of two numbers
An object with x and y properties.

Graph units

The Graph units can be of two types, either ViewSpace (vs) or Coord Space (cs).

type ScalarUnits = "vs" | "cs";

vs: Represents ViewSpace units, relating to the graph size in pixels.
cs: Stands for Coord Space, representing coordinates in the graph.

Scalar

A scalar in this context can be a number or a string. When a string, it has to include the unit type (vs or cs) along with the value.

// Valid Scalars
const scalar: Scalar = 10;
const scalar: Scalar = "10vs";
const scalar: Scalar = "10cs";
const scalar: Scalar = "10.5vs";
const scalar: Scalar = "-10.5cs";

Plain numbers are inferred based on context, they are computed as ViewSpace for things like styling (font size, strokeWidth, etc), and Coord Space for positions or plot values.
Strings with 'vs' or 'cs' define explicitly the units of the scalar value.

ScalarPoint

Similar to Vec2ish, ScalarPoint is a flexible representation of a point in 2D space, and can be defined as a Vec2 object, an object with x and y properties, or an array of two numbers.

Differently from Vec2ish, the values of the point can be scalars.

// Valid Scalar Points
const scalarPoint: ScalarPoint = [10, 10];
const scalarPoint: ScalarPoint = { x: 10, y: 10 };
const scalarPoint: ScalarPoint = { x: "10vs", y: "10vs" };
const scalarPoint: ScalarPoint = { x: "10cs", y: "10cs" };
const scalarPoint: ScalarPoint = { x: 10, y: "10vs" };


import { Vec2 } from "@coord/graph";
const scalarPoint: ScalarPoint = Vec2.of(10, 10);

Like scalars, number values are inferred based on context, they default to ViewSpace for styling, and Coord Space for positions or plot values.
Strings with vs or cs define explicitly the units of the point's components. This allows for the creation of points that mix ViewSpace and Coord Space units.
The Vec2 class offers a static method of to conveniently create a Vec2 instance from a Vec2ish value.

import { useLayoutEffect } from "react";
import {
  Graph,
  Grid,
  Marker,
  Vec2,
  Label,
  point,
  useNavigationState,
  useStopwatch,
} from "@coord/graph";


export default function MyGraph() {
  const p0 = ["200vs", "200vs"];
  const p1 = [0, 0];
  const p2 = ["400vs", 0];


  const initialCoordBox = {
    horizontal: point(-10, 10),
    vertical: point(10, -10),
  };


  const [coordBox, setCoordBox] = useNavigationState(initialCoordBox);


  const labelStyle = {
    width: 180,
    textAlign: "center",
    padding: 10,
    fontSize: 12,
  };


  const { pause } = useStopwatch(
    (t) => {
      const x = Math.sin(t) * 3;
      const y = Math.cos(t) * 3;


      setCoordBox({
        horizontal: initialCoordBox.horizontal.add(point(x, x)),
        vertical: initialCoordBox.vertical.add(point(y, y)),
      });
    },
    {
      duration: 5_000,
      to: Math.PI * 2,
      autoplay: true,
      repeat: true,
    }
  );


  return (
    <Graph
      height={400}
      width="100%"
      coordBox={coordBox}
      onCoordBoxChange={(coordBox) => {
        pause();
        setCoordBox(coordBox);
      }}
    >
      <Grid />


      <Marker position={p0} color={1} />
      <Label target={p0} direction={"s"} strokeColor={1}>
        <div style={labelStyle}>


          I'm a label positioned at <strong>[{p0.toString()}]</strong>, So I'm
          relative to the graph viewport.
        </div>
      </Label>


      <Marker position={p1} color={2} />
      <Label target={p1} strokeColor={2}>
        <div style={labelStyle}>
          I'm a label positioned at <strong>[{p1.toString()}]</strong>, So I
          move with the graph.
        </div>
      </Label>


      <Marker position={p2} color={3} />
      <Label target={p2} direction={"s"} strokeColor={3}>
        <div style={labelStyle}>
          I'm a label positioned at <strong>[{p2.toString()}]</strong>, So I my{" "}
          <strong>x</strong> coordinate is relative to the graph viewport, but
          my <strong>y</strong> coordinate is relative to the graph.
        </div>
      </Label>
    </Graph>
  );
}

import { useLayoutEffect } from "react";
import {
  Graph,
  Grid,
  Marker,
  Vec2,
  Label,
  point,
  useNavigationState,
  useStopwatch,
} from "@coord/graph";

export default function MyGraph() {
  const p0 = ["200vs", "200vs"];
  const p1 = [0, 0];
  const p2 = ["400vs", 0];

  const initialCoordBox = {
    horizontal: point(-10, 10),
    vertical: point(10, -10),
  };

  const [coordBox, setCoordBox] = useNavigationState(initialCoordBox);

  const labelStyle = {
    width: 180,
    textAlign: "center",
    padding: 10,
    fontSize: 12,
  };

  const { pause } = useStopwatch(
    (t) => {
      const x = Math.sin(t) * 3;
      const y = Math.cos(t) * 3;

      setCoordBox({
        horizontal: initialCoordBox.horizontal.add(point(x, x)),
        vertical: initialCoordBox.vertical.add(point(y, y)),
      });
    },
    {
      duration: 5_000,
      to: Math.PI * 2,
      autoplay: true,
      repeat: true,
    }
  );

  return (
    <Graph
      height={400}
      width="100%"
      coordBox={coordBox}
      onCoordBoxChange={(coordBox) => {
        pause();
        setCoordBox(coordBox);
      }}
    >
      <Grid />

      <Marker position={p0} color={1} />
      <Label target={p0} direction={"s"} strokeColor={1}>
        <div style={labelStyle}>

          I'm a label positioned at <strong>[{p0.toString()}]</strong>, So I'm
          relative to the graph viewport.
        </div>
      </Label>

      <Marker position={p1} color={2} />
      <Label target={p1} strokeColor={2}>
        <div style={labelStyle}>
          I'm a label positioned at <strong>[{p1.toString()}]</strong>, So I
          move with the graph.
        </div>
      </Label>

      <Marker position={p2} color={3} />
      <Label target={p2} direction={"s"} strokeColor={3}>
        <div style={labelStyle}>
          I'm a label positioned at <strong>[{p2.toString()}]</strong>, So I my{" "}
          <strong>x</strong> coordinate is relative to the graph viewport, but
          my <strong>y</strong> coordinate is relative to the graph.
        </div>
      </Label>
    </Graph>
  );
}