# Hover query helpers
Run closest-point, closest-x, and interpolated-x queries against a scale context.

## APIs demonstrated

- [defineSeries](/reference/functions/define-series/) from `@pibbl/core/viz`
- [closestPoint](/reference/functions/closest-point/) from `@pibbl/core/viz`
- [closestX](/reference/functions/closest-x/) from `@pibbl/core/viz`
- [interpolateX](/reference/functions/interpolate-x/) from `@pibbl/core/viz`
- [linearInterpolation](/reference/functions/linear-interpolation/) from `@pibbl/core/viz`
- [HoverQueryContext](/reference/components/hover-data/) from `@pibbl/core/viz`
- [HoverQuery](/reference/components/hover-data/) from `@pibbl/core/viz`
- [HoverSeries](/reference/functions/define-series/) from `@pibbl/core/viz`
- [HoverPoint](/reference/functions/closest-point/) from `@pibbl/core/viz`
- [HoverHit](/reference/functions/closest-point/) from `@pibbl/core/viz`
- [HoverSeriesMap](/reference/functions/define-series/) from `@pibbl/core/viz`
- [ClosestPointHit](/reference/functions/closest-point/) from `@pibbl/core/viz`
- [ClosestPointOptions](/reference/functions/closest-point/) from `@pibbl/core/viz`
- [ClosestXOptions](/reference/functions/closest-x/) from `@pibbl/core/viz`
- [ClosestXHit](/reference/functions/closest-x/) from `@pibbl/core/viz`
- [HoverInterpolation](/reference/functions/linear-interpolation/) from `@pibbl/core/viz`
- [InterpolateXOptions](/reference/functions/interpolate-x/) from `@pibbl/core/viz`
- [HoverSample](/reference/functions/interpolate-x/) from `@pibbl/core/viz`

## Complete example

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

```ts
import {
  closestPoint,
  closestX,
  defineSeries,
  interpolateX,
  linearInterpolation,
  type ClosestPointHit,
  type ClosestPointOptions,
  type ClosestXHit,
  type ClosestXOptions,
  type HoverHit,
  type HoverInterpolation,
  type HoverPoint,
  type HoverQuery,
  type HoverQueryContext,
  type HoverSample,
  type HoverSeries,
  type HoverSeriesMap,
  type InterpolateXOptions,
  type ResolvedLinearScale,
} from "@pibbl/core/viz";

type Reading = { time: number; value: number };
const readings: readonly Reading[] = [
  { time: 0, value: 2 },
  { time: 1, value: 5 },
  { time: 2, value: 3 },
];
const series: HoverSeries<Reading> = defineSeries({
  data: readings,
  x: "time",
  y: "value",
});
const seriesMap = { measurements: series } satisfies HoverSeriesMap;
const position: HoverPoint = { x: 100, y: 60 };
const pointOptions: ClosestPointOptions<typeof seriesMap> = {
  series: seriesMap,
  position,
  xScale: "time",
  yScale: "value",
};
const pointQuery: HoverQuery<ClosestPointHit<typeof seriesMap>> =
  closestPoint(pointOptions);
const xOptions: ClosestXOptions<Reading> = {
  series,
  x: 0.5,
  xScale: "time",
  yScale: "value",
};
const xQuery: HoverQuery<ClosestXHit<Reading>> = closestX(xOptions);
const interpolation: HoverInterpolation = linearInterpolation();
const sampleOptions: InterpolateXOptions<Reading> = {
  ...xOptions,
  interpolation,
  maxGap: 1,
};
const sampleQuery: HoverQuery<HoverSample<Reading>> =
  interpolateX(sampleOptions);
const scale: ResolvedLinearScale = {
  type: "linear",
  domain: [0, 10],
  range: [0, 200],
  frame: { x: 0, y: 0, width: 200, height: 200 },
  map: (value) => value * 20,
  invert: (pixel) => pixel / 20,
  ticks: () => [0, 5, 10],
};
const context: HoverQueryContext = { scale: () => scale };
const hit: HoverHit<Reading> | undefined = pointQuery(context);
const nearest: ClosestXHit<Reading> | undefined = xQuery(context);
const sample: HoverSample<Reading> | undefined = sampleQuery(context);
const output = document.createElement("pre");
output.textContent = [
  `Closest point: ${hit?.datum.value ?? "none"}`,
  `Closest x delta: ${nearest?.delta ?? "none"}`,
  `Interpolated y: ${sample?.y ?? "none"}`,
].join("\n");
document.body.append(output);

```

## Usage notes

- Displays three query results in the document.

## Documentation version

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