Interaction
Color Crosshair
An interactive scatterplot demonstrating Observable Plot’s color crosshair feature, inspired by the Plot color crosshair gallery example. The chart displays Palmer Penguins data (culmen length, culmen depth, flipper length, body mass) as colored dots, with crosshair lines that change color to match the nearest data point’s category on hover.
Controls include: an X Axis field selector (Culmen Length, Culmen Depth, Flipper Length, Body Mass), a Y Axis field selector (same options), a Color By dropdown (Sex, Species, Island), a Dot Style dropdown (Stroke outline or Fill solid), a Dot Size slider (2–12px), and a Crosshair Opacity slider (0.1–1.0).
On load the chart should show dots with Culmen Length on the x-axis and Culmen Depth on the y-axis, colored by Sex using stroke outlines with a color legend. The crosshair should appear when hovering over the chart area, with crosshair lines colored to match the nearest point’s Sex category. All six controls should be visible above the chart in a grid layout within a card.
Crosshair Explorer
An interactive scatterplot demonstrating Observable Plot’s crosshair mark. The chart displays simulated athlete data (weight, height, age, BMI) as colored dots, with crosshair lines that snap to the nearest data point on hover, displaying the x and y values along the axes.
Controls include: X-axis and Y-axis field selectors (Weight, Height, Age, BMI), a Color-by dropdown (Sex or Sport), a Sport filter dropdown, a Point size slider (3–12px), a Fill opacity slider (0.05–1.0), and a Color-matched crosshair checkbox that toggles whether the crosshair lines take on the color of the nearest point’s category.
On load the chart should show dots colored by Sex with weight on the x-axis and height on the y-axis. The crosshair should appear when hovering over the chart area and snap to the nearest data point. All controls should be visible above the chart in a grid layout.
CrosshairX Explorer
An interactive line chart demonstrating Observable Plot’s crosshairX mark, inspired by the Plot crosshairX gallery example. The chart displays simulated stock price data (60 trading days from Jan–Mar 2024) as a time-series line, with a vertical crosshairX that snaps to the nearest data point on hover, displaying the date along the x-axis and the price along the y-axis.
Controls include: a Price Field dropdown (Open, High, Low, Close), a Line Color dropdown (Steel Blue, Crimson, Forest Green, Dark Orange, Indigo), a Stroke Width slider (0.5–5.0), and a Show Area Fill checkbox that adds a semi-transparent area fill beneath the line.
On load the chart should show a line chart of Close prices in steel blue. Hovering over the chart should display vertical crosshair lines snapping to the nearest date, with the corresponding price shown along the y-axis. All four controls should be visible above the chart in a grid layout within a card.
Tips with Additional Channels
An interactive scatterplot demonstrating Observable Plot’s channels option for adding extra data fields to tooltips without mapping them to visual encodings, inspired by the Plot tips with additional channels gallery example. The chart displays simulated Olympic athlete data (40 athletes across 10 sports) as colored dots, with built-in tip: true tooltips that show both the mapped visual channels (x, y, color) and any additional channels selected by the user.
The key concept demonstrated is the channels option on marks: by passing channels: {name: "Name", sport: "Sport"}, those fields appear in the hover tooltip even though they don’t affect dot position, color, or size. Users can toggle which additional channels appear in the tip via interactive chip buttons.
Controls include: an X Axis dropdown (Weight, Height, Age), a Y Axis dropdown (Weight, Height, Age), a Color By dropdown (Sex, Sport, Country), a Dot Size slider (2–12px), a Fill Opacity slider (0.05–1.00), and a set of toggle chip buttons for additional tip channels (Name, Sport, Country, Event, Age). Channels already in use as X, Y, or Color are shown as disabled chips.
An info banner below the controls shows which fields are currently included in the tip. On load the chart should show Weight on x-axis, Height on y-axis, dots colored by Sex, with Name and Sport enabled as additional tip channels. Hovering over any dot should display a tooltip with the x value, y value, color category, plus the additional channel values. All controls should be visible above the chart within a card.
Tips with Longer Text
An interactive scatterplot demonstrating Observable Plot’s tip mark with longer, paragraph-length text content, inspired by the Observable Plot tips with longer text gallery example. The chart displays simulated Olympic athlete data (weight, height, age) as dots, faceted by sex (or sport). Athletes with biographical info are drawn with a dark stroke, while other athletes appear as gray dots with adjustable opacity.
Hovering over a highlighted (dark stroke) dot shows a Plot.tip tooltip containing the athlete’s name and a multi-paragraph biographical description — demonstrating how Plot wraps and displays longer text in tooltips. Gray dots without info do not trigger tooltips.
Controls include: an X Axis dropdown (Weight, Height, Age), a Y Axis dropdown (Weight, Height, Age), a Facet By dropdown (Sex, Sport, None), a Pointer Mode dropdown (XY 2D nearest, X only horizontal, Y only vertical), a Gray Opacity slider (0.05–1.00) that adjusts the opacity of non-highlighted (no info) dots, and a Show Grid checkbox.
On load the chart should show a scatterplot of weight vs height, faceted by sex, with a grid. Approximately 12 athletes should appear with dark strokes (highlighted with info), while the rest appear in gray. Hovering over a highlighted dot should display a tooltip with the athlete’s name and a longer biographical paragraph. All six controls should be visible above the chart in a grid layout within a card.
Line Chart with Interactive Tip
An interactive line chart inspired by the Observable Plot line chart with interactive tip example. The chart displays simulated AAPL-like stock price data (approximately 252 trading days over one year starting January 2023) as a time-series line, with an interactive tooltip (Plot.tip + pointer) that tracks the nearest data point on hover and displays the date and price value.
Controls include: a Tip Mode dropdown (Snap to X pointerX, Snap to Y pointerY, Snap to XY pointer 2D), a Price Field dropdown (Close, Open, High, Low), a Line Color dropdown (Steel Blue, Crimson, Forest Green, Dark Orange, Indigo), a Curve dropdown (Linear, Step, Monotone X, Cardinal, Catmull-Rom, Basis), a Stroke Width slider (0.5–4.0), an Area Fill checkbox that adds a semi-transparent shaded area beneath the line, and a Y Grid checkbox to toggle the y-axis gridlines.
An info banner below the controls describes the behavior of the currently selected tip mode: Snap to X finds the nearest point along the date axis (best for time series), Snap to Y finds the nearest point along the price axis, and Snap to XY uses 2D Euclidean distance.
On load the chart should show a line chart of Close prices in steel blue with Snap to X tip mode, linear curve, stroke width 1.5, no area fill, and y-axis grid enabled. Hovering should display a tooltip and vertical crosshair snapping to the nearest date. All four dropdown controls, the slider, and two checkboxes should be visible above the chart in a grid layout within a card.
Map & Tips
An interactive US map demonstrating Observable Plot’s tip mark with geographic centroid positioning, inspired by the Plot maps tips gallery example. The chart renders all 50 US states (plus DC) using Plot.geo with an Albers USA projection, and attaches tooltips at each state’s geographic centroid via Plot.geoCentroid.
Two tip modes are available: Interactive (hover) shows a single tooltip on the hovered state using Plot.pointer(Plot.geoCentroid(…)), and Static (all visible) shows tooltips on every state simultaneously using Plot.geoCentroid without pointer. The map loads US TopoJSON from a CDN and enriches each state feature with population, region, and capital metadata from a bf seed table.
Controls include: a Tip Mode dropdown (Interactive hover, Static all visible), a Tip Content dropdown (Name only, Name + Region, Name + Region + Pop, Name + Capital), a Fill Color dropdown (By Region, By Population, Uniform gray), a Tip Anchor dropdown (Top, Bottom, Left, Right), a Color Scheme dropdown (Tableau10, Observable10, Category10, Set2, Accent, Dark2 — enabled only when Fill Color is By Population), a Text Padding slider (0–10), a Fill Opacity slider (0.10–1.00), and a Stroke Width slider (0.0–3.0).
On load the chart should show a US map colored by region (Northeast blue, Midwest green, South red, West orange) with interactive hover tips showing state name, region, and population. A color legend should appear. Hovering over any state should display a tooltip anchored at the bottom of the state’s centroid. Switching to Static mode should show all tooltips at once. Changing Fill Color to By Population should show a quantized color scale. All four dropdowns and three sliders should be visible above the chart in a grid layout within a card.
Multi-Series Line Chart with Interactive Tips
An interactive multi-series line chart inspired by the Observable Plot multi-series line chart with interactive tips example. The chart displays simulated unemployment data across six industries (Manufacturing, Retail Trade, Construction, Professional Services, Healthcare, Leisure & Hospitality) over 60 months (2019–2023), with a COVID-like shock spike around month 16.
Hovering over the chart triggers Observable Plot’s built-in tip interaction, showing the values for each series at the hovered date. The tip mode can be switched between Snap to X (vertical crosshair), Snap to Y (horizontal crosshair), and Snap to XY (2D nearest point).
Controls include: a Tip Mode dropdown (Snap to X, Snap to Y, Snap to XY), a Curve dropdown (Linear, Step, Monotone X, Cardinal, Catmull-Rom, Basis), a Color Scheme dropdown (Tableau 10, Observable 10, Category 10, Dark 2, Set 2, Accent), and a Stroke Width slider (0.5–4.0). Below the controls, filter chips allow toggling individual industries on and off, with an “All” button to reset.
On load the chart should show all six industry lines in Tableau 10 colors with linear interpolation and a stroke width of 1.5. A color legend should appear above or beside the chart. Hovering should display tooltips snapping to the x-axis by default. Clicking an industry chip should filter the display to only that industry; clicking additional chips adds them back. The “All” chip resets the filter. All four control dropdowns/sliders should be visible above the chart in a grid layout within a card.
One-Dimensional Crosshair
An interactive one-dimensional distribution chart inspired by the Observable Plot one-dimensional crosshair example. The chart uses tick marks along a single axis to show the distribution of penguin measurements, with a crosshair that snaps to the nearest data point on hover and displays its value.
Controls include: a Measurement dropdown (Body Mass, Flipper Length, Bill Length, Bill Depth), an Orientation toggle (Horizontal tickX / Vertical tickY), a Color-by dropdown (None, Species, Island, Sex), a Crosshair Color dropdown (Red, Steel Blue, Dark Orange, Forest Green, Indigo, Crimson), a Tick Opacity slider (0.05–1.0), and a Stroke Width slider (0.5–4.0).
On load the chart should show horizontal tick marks for Body Mass with a red crosshair. Hovering over the chart should display the crosshair snapping to the nearest tick value. Switching to vertical orientation should rotate the chart. Selecting a Color-by option should color the ticks by category with a legend. All six controls should be visible above the chart in a grid layout within a card.
One-Dimensional Pointing
An interactive histogram inspired by the Observable Plot one-dimensional pointing example. The chart displays simulated daily stock trading volume data on a log₁₀ scale as a histogram (rectY + binX), with optional red stacked dots (dot + stackY + binX) showing individual data points per bin.
The key concept demonstrated is one-dimensional pointing: with a histogram, the tooltip should snap to the nearest bar along the x-axis only (ignoring vertical cursor position), since the y-axis is just a count. The app allows switching between tip modes (X only, Y only, XY) to observe how pointer behavior changes.
Controls include: a Tip Mode dropdown (X only 1D horizontal, Y only 1D vertical, XY 2D nearest), a Thresholds slider (10–80) to control the number of histogram bins, a Bar Color dropdown (Steel Blue, Teal, Indigo, Slate Gray, Dark Cyan, Cornflower Blue), a Bar Opacity slider (0.10–1.00), a Dot Color dropdown (Red, Orange, Dark Orange, Crimson, Purple, Black), and a Show Stacked Dots checkbox.
On load the chart should show a histogram of log₁₀ volume with steelblue bars, red stacked dots, and X-only tip mode. An informational banner below the controls describes the current tip mode behavior. Hovering over the histogram bars should display tooltips snapping based on the selected mode. All six controls should be visible above the chart in a grid layout within a card.
Pointer Modes: X, Y, and XY
An interactive line chart demonstrating Observable Plot’s three pointer modes (pointerX, pointerY, and pointer/XY), inspired by the Plot pointer modes gallery example. The chart displays simulated stock price data (60 trading days from Jan–Mar 2024) and lets users switch between the three pointer modes to observe how tooltip and crosshair behavior changes.
Controls include: a Pointer Mode dropdown (pointerX horizontal, pointerY vertical, pointer XY 2D), a Chart Type dropdown (Line, Area, Dot), a Price Field dropdown (Close, Open, High, Low), a Line Color dropdown (Steel Blue, Crimson, Forest Green, Dark Orange, Indigo), a Show Dots checkbox, and an info readout describing the selected pointer mode.
On load the chart should show a line chart of Close prices in steel blue with a pointerX crosshair. Hovering over the chart should display a vertical crosshair snapping to the nearest date. Switching to pointerY should change the crosshair behavior to favor vertical distance. Switching to pointer (XY) should use 2D Euclidean distance. Changing chart type to Area should add a semi-transparent fill beneath the line. All five controls should be visible above the chart in a grid layout within a card.
Pointer Target Position
An interactive stock price line chart demonstrating Observable Plot’s pointer target position concept, inspired by the Plot pointer target position gallery example. The chart displays simulated AAPL-like stock price data (approximately 65 trading days from Jan–Mar 2024) as a line, with a red vertical rule that snaps to the nearest data point on hover, a red dot at the exact data point, and a text label rendered at a fixed frame anchor showing the date and price.
The key concept demonstrated is the difference between pointer target position (px/py channels) and render position (x/y channels). The rule and dot render at the data point location, while the text label uses px/py to track the nearest point but renders at a fixed frame anchor position — showing how marks can track the same pointer position but render in different locations.
Controls include: a Price Field dropdown (Close, Open, High, Low), a Pointer Mode dropdown (pointerX horizontal, pointerY vertical, pointer XY 2D), a Line Color dropdown (Steel Blue, Crimson, Forest Green, Dark Orange, Indigo), a Text Anchor dropdown (Top Left, Top Right, Bottom Left, Bottom Right), a Show Rule checkbox, a Show Dot checkbox, and a Show Text Info checkbox. An info banner explains the current pointer mode behavior.
On load the chart should show a line chart of Close prices in steel blue with a red vertical rule, red dot, and text label appearing when hovering. The text label should appear at the top-left of the chart frame. Changing the Text Anchor moves the text label to a different corner. Toggling checkboxes shows/hides the rule, dot, and text respectively. All four dropdown controls and three checkboxes should be visible above the chart within a card.
Pointer Transform Explorer
An interactive scatterplot demonstrating Observable Plot’s pointer transform, inspired by the Plot pointer transform gallery example. The chart displays simulated Palmer Penguins data (culmen length, culmen depth, flipper length, body mass) as dots, with a larger colored highlight dot rendered only on the nearest point to the cursor via Plot.pointer(). A tooltip (tip mark) also appears on hover showing species, island, and sex details.
Controls include: an X Axis field selector (Culmen Length, Culmen Depth, Flipper Length, Body Mass), a Y Axis field selector (same options), a Pointer Mode dropdown (pointer 2D, pointerX horizontal, pointerY vertical), a Color By dropdown (None, Species, Island, Sex), a Highlight Color dropdown (Red, Orange, Green, Blue, Purple, Crimson), a Highlight Size slider (3–20px), a Max Reach slider (10–200px), and a Pointer Active checkbox to toggle the pointer transform on/off.
On load the chart should show dots with Culmen Length on the x-axis and Culmen Depth on the y-axis, with a red highlighted dot appearing on the nearest point when hovering. Unchecking Pointer Active should show all red highlight dots simultaneously. Changing Pointer Mode should alter how the nearest point is determined (2D distance vs horizontal or vertical only). All eight controls should be visible above the chart in a grid layout within a card.
Static Annotations
An interactive line chart with static text annotations, inspired by the Observable Plot static annotations gallery example. The chart displays simulated stock price data (~700 trading days from 2014–2017) as a time-series line, with Plot.tip marks placed at specific dates to annotate key events such as all-time highs, stock splits, product launches, and earnings misses. Red dots mark each annotated data point.
Five predefined annotations are available as toggle chips: 2015-02-23 (new all-time high, $133), 2016-05-12 (two-year low, $90), 2017-05-09 (new record high, $153), 2014-06-09 (stock split, $80), and 2016-09-07 (iPhone 7 launch, $107). Three are enabled by default and two are disabled. Users can toggle each annotation on or off by clicking its chip.
Controls include: a Line Color dropdown (Steel Blue, Crimson, Forest Green, Dark Orange, Indigo, Dark Teal), a Stroke Width slider (0.5–4.0), an Annotation Anchor dropdown (Auto per annotation, Top, Bottom, Left, Right) that overrides the default anchor position of all tip marks, a Tip Font Size slider (8–16px), and a Show Crosshair checkbox that toggles an interactive crosshairX for exploring data values on hover.
Below the chart, detail cards appear for each enabled annotation showing the date, price, and description text.
On load the chart should show a steel blue line with three annotation tips visible (Feb 2015, May 2016, May 2017) with red dot markers, a crosshair enabled, and annotation detail cards below. All controls should be visible above the chart in a grid layout within a card.
Tip Format
An interactive scatterplot demonstrating Observable Plot’s tip format option, inspired by the Plot tip format gallery example. The chart displays simulated Olympic athlete data (30 athletes) as dots plotting weight (x) vs height in meters (y), colored by sex via stroke. Additional channels (name, sport, nationality relabeled as “country”) are included in the tooltip.
The key concept demonstrated is customizing tooltip display using the tip: { format: {...} } option. Users can control which fields appear in the tooltip (name, sport, country, stroke/sex), add unit suffixes to the x and y axis values (e.g., “80kg”, “1.85m”), and observe the nationality channel being relabeled as “country” in the tooltip via the channel label option.
Controls include: an X Format dropdown to select a unit suffix for weight values (None, kg, m, cm, lbs, ft), a Y Format dropdown to select a unit suffix for height values (same options), a Sport Filter dropdown to filter athletes by sport (All, Athletics, Basketball, etc.), a Dot Size slider (3–14px), and four toggle buttons for tip fields (Name, Sport, Country, Sex/stroke) that control which channels appear in the tooltip via the format object’s boolean values.
An info banner below the controls shows the current format configuration, including the unit format strings and whether stroke is visible or hidden.
On load the chart should show 30 dots with weight on x-axis and height on y-axis, colored by sex (M/F), with weight formatted as “kg” and height formatted as “m” in tooltips. Name, Sport, and Country should be visible in tips, while Sex (stroke) should be hidden. Hovering over a dot should display a tooltip with the formatted values and selected channels. All three dropdowns, the slider, and four toggle buttons should be visible above the chart within a card.
Tips with Paired Channels
An interactive histogram demonstrating Observable Plot’s tip behavior with paired channels (x1/x2 from binX, y1/y2 from stackY), inspired by the Plot tips paired channels gallery example. The chart displays simulated Olympic athlete data (200 athletes across 10 sports) as a stacked or diverging histogram, with tip: true tooltips that show the paired channel ranges — the bin range (e.g., “Weight: 60–65”) and the stack range for each category.
Two chart modes are available: Stacked (standard stacked histogram where bars pile on top of each other) and Diverging (one category extends upward, the other downward, with y values spanning zero). The tips automatically adapt to show the paired y1–y2 values in both modes.
Controls include: a Chart Mode dropdown (Stacked, Diverging), an X Axis dropdown (Weight, Height, Age), a Fill By dropdown (Sex, Sport), a Bins slider (5–50), an Opacity slider (0.10–1.00), and a Color Scheme dropdown (Observable 10, Tableau 10, Category 10, Dark 2, Set 2). An info banner below the controls describes the current mode’s paired channel behavior.
On load the chart should show a stacked histogram of Weight filled by Sex with Observable 10 colors, 20 bins, and 0.85 opacity. A color legend should appear above the chart. Hovering over any bar should display a tooltip with the bin range (x1–x2) and the stack range (y1–y2). Switching to Diverging mode should cause male bars to extend upward and female bars downward. All six controls should be visible above the chart in a grid layout within a card.