# Participant trajectories with explicit missing visits
Participant trajectories with explicit missing visits.

## APIs demonstrated

- [TrajectorySeries](/reference/components/trajectory-series/) from `@pibbl/core/viz`
- [TrajectorySeriesProps](/reference/components/trajectory-series/) from `@pibbl/core/viz`
- [TrajectorySeriesStyle](/reference/components/trajectory-series/) from `@pibbl/core/viz`
- [TrajectoryGroupAccessor](/reference/components/trajectory-series/) from `@pibbl/core/viz`

## Complete example

[Plain source](/minimal/viz/trajectory-series.tsx). Run as a browser module after the document body exists. TSX uses `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`.

```tsx
import { pibbl } from "@pibbl/core";
import { LinearScale, TrajectorySeries, type TrajectorySeriesProps, type TrajectoryGroupAccessor, type TrajectorySeriesStyle } from "@pibbl/core/viz";
const records = [
  { id: "P01", week: 0, change: 0 },
  { id: "P02", week: 0, change: 0 },
  { id: "P01", week: 4, change: -10 },
  { id: "P02", week: 4, change: null },
  { id: "P01", week: 12, change: -18 },
  { id: "P02", week: 12, change: -8 },
];
const group: TrajectoryGroupAccessor<(typeof records)[number]> = "id";
const style: TrajectorySeriesStyle = { stroke: "#087f8c", strokeWidth: 2 };
const props: TrajectorySeriesProps<(typeof records)[number]> = { data: records, group, x: "week", y: "change", xScale: "visit", yScale: "outcome", style };
const canvas = document.createElement("canvas");
canvas.width = 400; canvas.height = 300;
document.body.append(canvas);
const app = pibbl(canvas,
  <LinearScale id="visit" domain={[0, 12]} range={[40, 360]}>
    <LinearScale id="outcome" domain={[-25, 5]} range={[260, 30]}>
      <TrajectorySeries {...props} />
    </LinearScale>
  </LinearScale>);
window.addEventListener("pagehide", () => app.dispose(), { once: true });

```

## Usage notes



## Documentation version

Documentation built with @pibbl/core 0.0.2, revision dd39ce2. ALPHA — NOT FOR PRODUCTION USE.