interactions

25 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Pointer transform for interactive tooltips

The pointer transform dynamically filters a mark to render only the data closest to the pointer (such as the mouse). It is often paired with the tip mark to show interactive tooltips revealing exact values as the pointer moves over the plot.

Crosshair mark displays pointer values

The crosshair mark uses the pointer transform internally to display a rule and text showing the x (horizontal) and y (vertical) value of the nearest data. These values are displayed atop the axes on the edge of the frame without obscuring other marks in the plot.

Tip mark with channels for additional fields

The tip mark can show additional fields not visible in the main plot, such as name and sport of data points. It accepts a channels option to expose these fields for interactive display.

Plot dot mark with tip true for interactive tooltips

The Plot.dot() mark accepts tip: true to enable interactive tooltips. When combined with a channels option containing additional fields like name and sport, these fields display in the tooltip as the pointer moves over points.

Selection support status

Support for selecting points within a plot through direct manipulation is under development. See GitHub issue #5 for feature voting and #721 for early work on brushing.

Zoom and pan support status

Support for interactive panning and zooming is planned for a future release. See GitHub issue #1590 for feature voting.

Animation support status

Support for declarative animation is planned for a future release. See GitHub issue #166 for feature voting and #995 for early work on a time channel.

Replace plot instances for reactive updates

Plot does not provide incremental re-rendering or animated transitions between views. Instead, you can replace old plots with new ones to enable plotting of dynamic data that changes in real-time or in response to external inputs such as range sliders and search boxes.

Observable reactivity with viewof and Inputs

On Observable, use viewof in conjunction with Observable Inputs for interactivity. If a cell references another cell, it automatically re-runs whenever the upstream cell's value changes, enabling reactive plot updates.

React reactivity with useEffect and useRef

In React, use useEffect and useRef to re-render the plot when data changes, enabling reactive updates.

Vue reactivity with ref

In Vue, use ref to enable reactive plot updates when data changes.

pointer transform overview

The pointer transform filters a mark interactively such that only the point closest to the pointer is rendered. It is typically used to show details on hover, often with a tip or crosshair mark, but can be paired with any mark. It listens to pointer events and re-renders the mark as the closest point changes. Since the mark is lazily rendered during interaction, only visible elements are rendered as needed. Like filter and select transforms, unfiltered channel values are incorporated into default scale domains.

pointer transform pointing modes

The pointer transform supports three pointing modes: pointer (two-dimensional) finds the point closest by measuring distance in both x and y; pointerX (one-dimensional) only considers distance in the x dimension and is suitable for time-series charts, histograms, or bar charts; pointerY (one-dimensional) only considers distance in the y dimension. The one-dimensional modes (pointerX and pointerY) divide the distance along the non-dominant dimension by 100 to break ties in the dominant dimension.

pointer transform maxRadius default

By default, the pointer transform only focuses the closest point if it is within 40 pixels of the pointer (in either one or two dimensions, depending on the pointing mode). This can be configured via the maxRadius option to increase the pointing distance cutoff.

pointer transform channel precedence

To resolve the horizontal target position, the pointer transform applies precedence: 1) px channel if present; 2) midpoint of x1 and x2 channels if both present; 3) x channel if present; 4) x1 channel if present; 5) position given by frameAnchor. The same precedence applies to py, y, y1, and y2 channels for vertical position.

pointer transform options

Pointer transform options: px (horizontal target position, bound to x scale); py (vertical target position, bound to y scale); x (fallback horizontal target position, bound to x scale); y (fallback vertical target position, bound to y scale); x1 (starting horizontal target position, bound to x scale); y1 (starting vertical target position, bound to y scale); x2 (ending horizontal target position, bound to x scale); y2 (ending vertical target position, bound to y scale); maxRadius (reach or maximum distance in pixels, defaults to 40); frameAnchor (how to position target within frame, defaults to middle).

pointer transform with paired channels

The pointer transform prefers the midpoint of x1 and x2 channels if present to the x channel, and likewise for y1, y2, and y. This allows the pointer transform to be applied to rect, bar, area, or other marks with paired channels, and enables these marks to support the tip mark option.

pointer transform pool option

The pool mark option (added in PR #2382) determines whether the pointer transform is exclusive across marks. If false, pointer transforms operate independently, potentially allowing multiple marks to be visible simultaneously. If true, pointer transforms will coordinate such that at most one mark will be visible at a time. The pool option defaults to true for the tip mark. Regardless of this option, when faceting, the pointer transform is exclusive across facets.

pointer transform click-to-stick

The pointer transform supports click-to-stick: clicking on the chart locks the currently-focused point until you click again. By locking the pointer, you can select text from the tip for copy and paste. If a plot has multiple pointer transforms, clicking will lock all pointer transforms.

pointer transform input event

The pointer transform emits an input event whenever the focused points change and sets the value of the plot element to the focused data. This allows you to use a plot as an Observable view (viewof) or to register an input event listener to react to pointing.

pointer() function signature

Plot.pointer(options) applies the pointer render transform to the specified options to filter the mark index such that only the point closest to the pointer is rendered; the mark will re-render interactively in response to pointer events. Example: Plot.tip(penguins, Plot.pointer({x: "culmen_length_mm", y: "culmen_depth_mm"}))

pointerX() function signature

Plot.pointerX(options) applies the pointer render transform with the determination of the closest point considering mostly the x (horizontal) position; should be used for plots where x is the dominant dimension, such as time in a time-series chart, the binned quantitative dimension in a histogram, or the categorical dimension of a bar chart. Example: Plot.tip(aapl, Plot.pointerX({x: "Date", y: "Close"}))

pointerY() function signature

Plot.pointerY(options) applies the pointer render transform with the determination of the closest point considering mostly the y (vertical) position; should be used for plots where y is the dominant dimension, such as time in a time-series chart, the binned quantitative dimension in a histogram, or the categorical dimension of a bar chart. Example: Plot.tip(alphabet, Plot.pointerY({x: "frequency", y: "letter"}))

pointer transform dead spots caveat

The pointer transform understands only points and not the arbitrary geometry of marks. With large marks, there may be dead spots that do not trigger pointing even when the pointer is within the displayed mark. You can mitigate dead spots either by switching to one-dimensional pointing if appropriate or by setting the maxRadius option to increase the pointing distance cutoff.

pointer transform coincident points caveat

Since the pointer transform only focuses one point at a time, if points are coincident or nearly so, some points may not be focusable. In the future, the pointer transform might allow focusing multiple points simultaneously or some method of cycling through nearby points.

Give your agent this brain