2b:null 2c:["$","title",null,{"children":"Plot interaction: pointer-driven marks | Observable | Observable"}] 31:T4de,## Timeline pointer Besides the default pointer, the interaction pattern includes _drawing a line connecting all the points that come earlier_. This reinforces the idea that the average value at a certain point in time is modeled on the values that precede it (and not on the values that follow it, since we don’t know how to look in the future —Captain Obvious). To make this happen, we want to generate an index of all the points that have a value of _x_ less than or equal to the current point. The render transform can look up these values in the _x_ values: ```js render: (index, scales, values, dimensions, context, next) => { const i = index.length > 0 ? index[0] : 0; // the pointer’s target (or default if we’re not pointing) const X = values.x; // the horizontal position channel const x0 = X[i]; // the point’s reference position const newIndex = Array.from(X, (_, i) => i).filter((i) => X[i] <= x0); // all points before x0 return next(newIndex, scales, values, dimensions, context); // render } ``` Note that the *values* are scaled—they are in pixels and not in data space. It doesn’t matter here. If we want to compare the underlying data instead, we can look at `values.channels.x.value`.32:T486,Plot.plot({ width, height: 200, marginRight: 100, r, color, marks: [ // polls are pure decoration Plot.dot(polls, { x: "date", y: "pct", fill: "party", r: "numeric_grade", fillOpacity: 0.2 }), Plot.lineY(averages, { x: "date", y: "pct", stroke: "party", strokeWidth: 1, curve: "natural", opacity: 0.25 }), Plot.ruleX( averages.filter((d) => d.party === "DEM"), pointerMX({ x: "date", atrest: "maxX" }) ), Plot.lineY( averages, pointerMX({ x: "date", y: "pct", selector: "before", atrest: "maxX", z: "party", stroke: "party", curve: "natural", strokeWidth: 3, markerStart: true }) ), Plot.text( averages.filter((d) => d.party === "DEM"), pointerMX({ x: "date", atrest: "maxX", text: ({ date }) => d3.isoFormat(date).slice(0, 10), fill: "currentColor", stroke: "var(--plot-background)", strokeWidth: 12, frameAnchor: "top", dy: -10 }) ) ] })33:T564,Plot.plot({ width, height: 250, marginRight: 100, r, color, marks: [ // polls are pure decoration Plot.dot(polls, { x: "date", y: "pct", fill: "party", r: "numeric_grade", fillOpacity: 0.2 }), Plot.lineY(averages, { x: "date", y: "pct", stroke: "party", strokeWidth: 1, curve: "natural", opacity: 0.25 }), Plot.ruleX(averages, pointerMX({ x: "date", atrest: "maxX" })), Plot.lineY( averages, pointerMX({ x: "date", atrest: "maxX", y: "pct", selector: "before", z: "party", stroke: "party", curve: "natural", strokeWidth: 3, markerStart: true }) ), Plot.tip( averages, pointerMX({ x: "date", atrest: "maxX", y: "pct", z: "party", y: "pct", fill: "party", selector: "eq", atrest: "maxX", dx: 9, format: { x: false, z: false }, anchor: "left" }) ), Plot.text( averages, pointerMX({ x: "date", atrest: "maxX", text: ({ date }) => d3.isoFormat(date).slice(0, 10), fill: "currentColor", stroke: "var(--plot-background)", strokeWidth: 12, frameAnchor: "top", dy: -10 }) ) ] })34:T563,Plot.plot({ width, height: 250, marginRight: 100, r, color, marks: [ Plot.dot(polls, { x: "date", y: "pct", fill: "party", r: "numeric_grade", fillOpacity: 0.2 }), Plot.lineY(averages, { x: "date", y: "pct", stroke: "party", strokeWidth: 1, curve: "natural", opacity: 0.25 }), Plot.ruleX(averages, pointerMX({ x: "date", atrest: "maxX" })), Plot.lineY( averages, pointerMX({ x: "date", atrest: "maxX", y: "pct", selector: "before", z: "party", stroke: "party", curve: "natural", strokeWidth: 3, markerStart: true }) ), Plot.tip( averages, pointerMX({ x: "date", atrest: "maxX", y: "pct", z: "party", y: "pct", fill: "party", selector: "eq", dx: 9, format: { x: false, z: false }, anchor: "left", render: customOverlapRender({minDistance: 40}) }) ), Plot.text( averages, pointerMX({ x: "date", atrest: "maxX", text: ({ date }) => d3.isoFormat(date).slice(0, 10), fill: "currentColor", stroke: "var(--plot-background)", strokeWidth: 12, frameAnchor: "top", dy: -10 }) ) ] })35:T9c2,outcomePollingAverage = { const datefmt = d3.utcFormat("%b. %d"); const chart = Plot.plot({ width: 550, height: 230, marginBottom: 38, r, color, title: html`

National polling average`, caption: "Data: FiveThirtyEight — inspiration: The New York Times", style: "user-select: none; touch-action: none; max-width: 100%;", // beware of preventing vertical scrolling x: { domain: [new Date("2024-06-01"), new Date("2024-10-15")], grid: true }, y: { domain: [24, 54], ticks: 3, tickFormat: (d) => `${d}%`, grid: true, label: null }, marks: [ Plot.dot(polls, { x: "date", y: "pct", fill: "party", r: "numeric_grade", fillOpacity: 0.2 }), Plot.lineY(averages, { x: "date", y: "pct", stroke: "party", strokeWidth: 1, curve: "natural", opacity: 0.25 }), Plot.dot( averages, pointerMX({ symbol: "triangle", x: "date", frameAnchor: "top", atrest: "maxX", fill: "black", rotate: 180 }) ), Plot.ruleX(averages, pointerMX({ x: "date", atrest: "maxX" })), Plot.lineY( averages, pointerMX({ x: "date", atrest: "maxX", y: "pct", selector: "before", z: "party", stroke: "party", curve: "natural", strokeWidth: 3, markerStart: true }) ), Plot.text( averages, pointerMX( renderMultipleText({ x: "date", atrest: "maxX", y: "pct", channels: { z: "party" }, fill: "party", selector: "eq", fontWeight: "bold", fontSize: 14, text: (d) => `${d.candidate} | ${Math.round(d.pct)}%`, textAnchor: "end", stroke: "white", dx: 50, render: customOverlapRender() }) ) ), Plot.text( averages, pointerMX({ x: "date", atrest: "maxX", text: ({ date }) => datefmt(date), fill: "currentColor", frameAnchor: "top", dy: -15 }) ) ] }); return html`

${chart}`; }36:T5a9,# Reusable code Most of the examples above use the same [options transform](https://observablehq.com/plot/features/transforms#transform), defined in the cell below, that you can copy and paste into your project. It works like [Plot.pointerX](https://observablehq.com/plot/interactions/pointer#pointerX), with two additional parameters that describe: * **atrest** — what we want as a default position when the user is not pointing * **selector** - what we want to select once a reference position has been determined The following atrest options are supported: * **null** — the default: show nothing if you’re not pointing * **first** - the first point in the facet (after sorting and filtering) * **last** - the last point in the facet (after sorting and filtering) * **minX** - the point with the minimum *x* value * **maxX** - the point with the maximum *x* value * **minY** - the point with the minimum *y* value * **maxY** - the point with the maximum *y* value The following selector options are supported: * **null** - the default: only show the reference point * **before** (alias **lte**) - before the reference point (x ≤ x0) * **lt** - strictly before * **after** (alias **gte**) - after * **gt** - strictly after * **x** (alias **eq** for pointerX) - same *x* position * **y** - same *y* position * **z** - same series (*z*, *stroke* or *fill*) In all the options above, *x*, *y* and *z* are unscaled — all in data space. 37:Te6e,function pointerMore(pointer) { return ({ atrest = null, selector = "point", render, ...options } = {}) => { const I = new WeakMap(); // Memoize the at rest index for each facet (for performance). return pointer({ ...options, render(index, scales, values, dimensions, context, next) { const facet = context.getMarkState(this).facets[index.fi ?? 0]; // full index for the current facet const { x, x1, x2, y, y1, y2, z, stroke, fill } = values.channels; const X = x?.value ?? x2?.value ?? x1?.value; const Y = y?.value ?? y2?.value ?? y1?.value; const VX = values.x ?? values.x2 ?? values.x1; const VY = values.y ?? values.y2 ?? values.y1; const Z = z?.value ?? stroke?.value ?? fill?.value; // at rest if (!I.has(facet)) { let select; switch (String(atrest).toLowerCase()) { case "null": select = () => []; break; case "minx": if (!X) throw new Error("missing channel x"); select = (index) => [d3.least(index, (i) => X[i])]; break; case "maxx": if (!X) throw new Error("missing channel x"); select = (index) => [d3.greatest(index, (i) => X[i])]; break; case "miny": if (!Y) throw new Error("missing channel y"); select = (index) => [d3.least(index, (i) => Y[i])]; break; case "maxy": if (!Y) throw new Error("missing channel y"); select = (index) => [d3.greatest(index, (i) => Y[i])]; break; case "first": select = (index) => index.slice(0, 1); break; case "last": select = (index) => index.slice(-1); break; // TODO top, bottom, left, right… ? } if (!select) throw new Error(`unsupported atrest method ${atrest}`); I.set(facet, select(facet)); } if (index.length === 0) index = I.get(facet); // selector switch (String(selector).toLowerCase()) { case "point": break; case "before": case "lte": if (!VX) throw new Error("missing channel x"); index = facet.filter((i) => VX[i] <= VX[index[0]]); break; case "lt": if (!VX) throw new Error("missing channel x"); index = facet.filter((i) => VX[i] < VX[index[0]]); break; case "after": case "gte": if (!VX) throw new Error("missing channel x"); index = facet.filter((i) => VX[i] >= VX[index[0]]); break; case "gt": if (!VX) throw new Error("missing channel x"); index = facet.filter((i) => VX[i] > VX[index[0]]); break; case "eq": case "x": if (!VX) throw new Error("missing channel x"); index = facet.filter((i) => VX[i] == VX[index[0]]); break; case "y": if (!VY) throw new Error("missing channel y"); index = facet.filter((i) => VY[i] == VY[index[0]]); break; case "z": if (!Z) throw new Error("missing channel z"); index = facet.filter((i) => Z[i] == Z[index[0]]); break; default: throw new Error(`unsupported selector ${selector}`); } return render ? render(index, scales, values, dimensions, context, next) : next(index, scales, values, dimensions, context); } }); }; }38:T431,function renderMultipleText({render: prerender, ...options} = {}) { const multiple = (index, scales, values, dimensions, context, next) => { const g = next(index, scales, values, dimensions, context); const text = g.querySelectorAll("text"); const white = g.getAttribute("stroke"); index.forEach((i, j) => { text[j].setAttribute("stroke", "none"); text[j].setAttribute("fill", white); const [candidate, pct] = text[j].textContent.split(" | "); text[j].textContent = pct; g.append( svg`${text[j]}${candidate}` ); }) return g; }; // combine the renderers const render = prerender ? (i, s, v, d, c, next) => prerender(i, s, v, d, c, (i, s, v, d, c) => multiple(i, s, v, d, c, next)) : multiple; return {...options, render} }39:[{"id":"baf9e21a42d594332a41248270da2260a198db42a3afde7e5ccff8f8621951757d82f2baef653d191d956328f761b2b0009cf5dee53d1e97937975fc4b575f3c","href":"https://static.observableusercontent.com/files/baf9e21a42d594332a41248270da2260a198db42a3afde7e5ccff8f8621951757d82f2baef653d191d956328f761b2b0009cf5dee53d1e97937975fc4b575f3c","name":"averages.csv","type":"text/csv","lastModified":1727172909284.391,"size":24411},{"id":"5bcd3e5fdbb48ed72f72de8908eb456fe171c6d707741ac8c63788512f1708e6d995649225465e504fd007e1e32095efdddd2813c95d52d473ca927282d936e3","href":"https://static.observableusercontent.com/files/5bcd3e5fdbb48ed72f72de8908eb456fe171c6d707741ac8c63788512f1708e6d995649225465e504fd007e1e32095efdddd2813c95d52d473ca927282d936e3","name":"polls@1.csv","type":"text/csv","lastModified":1727172910271.786,"size":955774},{"id":"5b56e0b34df3c771de255c4976ad9ae5402030ee3e2e6ce108c90874e1907f26e2b559a5e7cd99fdaecd1b60ea8d0d0153cd67a6bead88c489fa856ca7f35c4d","href":"https://static.observableusercontent.com/files/5b56e0b34df3c771de255c4976ad9ae5402030ee3e2e6ce108c90874e1907f26e2b559a5e7cd99fdaecd1b60ea8d0d0153cd67a6bead88c489fa856ca7f35c4d","name":"nytimes-interaction.mp4","type":"video/mp4","lastModified":1724841623524.578,"size":193571}] 2f:{"id":"09c13d7366a29bbc","slug":"plot-pointer-driven-marks","title":"Plot interaction: pointer-driven marks","thumbnail":"0e80b993a78cccda871661d1eb164f78ab5951c63acc7350337e74f0aefec89a","access_level":"public","create_time":"$D2024-08-21T21:28:27.009Z","update_time":"$D2025-06-05T06:17:41.543Z","view_time":null,"first_public_time":"$D2024-09-24T15:11:30.690Z","fork":false,"stars":61,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":2564,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"editor"}],"comments":[{"id":"4ee6d88a21745963","reply_to_id":null,"content":"Hi Fil, very cool notebook! I'm curious if there's any way to get transforms like this one to work across facets – it's something I noticed when trying to build something a little bit similar to this a while ago (highlighting all \"related points\" across all facets when hovering on a single point).","create_time":"$D2024-09-24T16:48:25.737Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"de2630f386f3cdb1","login":"yurivish","name":"Yuri Vishnevsky","avatar_url":"https://avatars-next.observableusercontent.com/c0c68df86cdf3364fbb25a90d00bb51b5aa7308a1ba7de3fa44d1ae591054612","tier":null}},{"id":"a6fe20b4b81564c9","reply_to_id":"4ee6d88a21745963","content":"sure! here's an example (with several variants)\nhttps://observablehq.com/@observablehq/cross-facet-crosshair","create_time":"$D2024-09-25T12:09:17.130Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"fe20e53357107ec6","reply_to_id":"4ee6d88a21745963","content":"Oh, that's great! I started playing with it earlier today but didn't quite get to a working version yet since I got distracted with other stuff (will link here when I do.) I'm seeing what the simplest way is to use that approach but with a Plot.pointer, where each facet can subscribe to the \"input\" event, so all of them can update in response. I didn't realize until today that each facet's render function was called separately. 😄","create_time":"$D2024-09-26T02:23:49.013Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"de2630f386f3cdb1","login":"yurivish","name":"Yuri Vishnevsky","avatar_url":"https://avatars-next.observableusercontent.com/c0c68df86cdf3364fbb25a90d00bb51b5aa7308a1ba7de3fa44d1ae591054612","tier":null}},{"id":"f9ad54c488511bcf","reply_to_id":"4ee6d88a21745963","content":"Haven't figured it out yet – playing around here: https://observablehq.com/d/5a386abaa1549df2\n\nEach line represents a particular latency quantile of a particular instance (machine). The lines are faceted by quantile, and I'd like to use a hover interaction to highlight all quantiles of a particular instance in red.\n\nI'm using a \"key\" channel to link the data points across facets – any datum with the same key as the hovered point should be highlighted.\n\nI think the translation that the pointer mark applies to the parent needs to be compensated for somehow: https://github.com/observablehq/plot/blob/e0bf09ea4dd537188c1fe11eca169d46bafb4fa8/src/interactions/pointer.js#L119C13-L119C15\n\nA previous attempt (https://observablehq.com/d/5a386abaa1549df2#cell-7) was simpler but limited by the fact that only the hovered facet is re-rendered. \n\nI wonder if it would be simpler to build this if the pointer mark re-rendered all facets, including those with an empty index set.","create_time":"$D2024-09-26T22:08:18.500Z","update_time":"$D2024-09-26T22:09:53.210Z","resolved":true,"user":{"type":"individual","id":"de2630f386f3cdb1","login":"yurivish","name":"Yuri Vishnevsky","avatar_url":"https://avatars-next.observableusercontent.com/c0c68df86cdf3364fbb25a90d00bb51b5aa7308a1ba7de3fa44d1ae591054612","tier":null}},{"id":"846476b6eb385fb9","reply_to_id":"4ee6d88a21745963","content":"🤯","create_time":"$D2024-09-27T17:01:22.093Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"de2630f386f3cdb1","login":"yurivish","name":"Yuri Vishnevsky","avatar_url":"https://avatars-next.observableusercontent.com/c0c68df86cdf3364fbb25a90d00bb51b5aa7308a1ba7de3fa44d1ae591054612","tier":null}},{"id":"a3aa809266e54522","reply_to_id":"4ee6d88a21745963","content":"Here's an iteration on top of your idea, simplifying the setup to use a pointer transform for the event trigger, which controls the visibility of a separate mark by modulating opacity directly rather than re-rendering: https://observablehq.com/d/5a386abaa1549df2#s2","create_time":"$D2024-09-27T17:09:39.683Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"de2630f386f3cdb1","login":"yurivish","name":"Yuri Vishnevsky","avatar_url":"https://avatars-next.observableusercontent.com/c0c68df86cdf3364fbb25a90d00bb51b5aa7308a1ba7de3fa44d1ae591054612","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":15,"collection":null,"type":"notebook","body":{"title":"Plot interaction: pointer-driven marks","cells":[{"id":0,"value":"# Plot interaction: pointer-driven marks\n\nThe New York Times’ [chart showing hundreds of election polls](https://www.nytimes.com/interactive/2024/us/elections/polls-president.html) for the 2024 presidential election has this great interaction pattern, where an annotation describes the most recent data points. But as soon as the viewer starts pointing over the chart, they take control and the annotations very naturally follow the mouse. Here it is, as a video:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1645,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1655,"value":"Showing a default annotation when the user is not pointing is such an immediate and useful pattern that I want to replicate it with Observable Plot. As always, there are many details to get right in the implementation. This post describes, step by step, the logic needed. It ends with a robust and reusable function that you can plug into your own charts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2052,"value":"Now, either stay with me and see the details… or jump to [the final chart](#outcome) or [the reusable code](#code). (Or go back to the [“five techniques” series](https://observablehq.com/blog/five-techniques-to-improve-chart-annotations).)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1657,"value":"## Data\n\nTo start, we need some data. The New York Times polls page credits FiveThirtyEight, which has [a dedicated page](https://projects.fivethirtyeight.com/polls/) offering to download many polls (the dots of the chart) and averages (the lines). Form these, I’ve filtered the national polls for the upcoming 2024 presidential election from the beginning of June, 2024 to mid September.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1278,"value":"averages = FileAttachment(\"averages.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1302,"value":"polls = FileAttachment(\"polls@1.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1920,"value":"## Base charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1672,"value":"We’ll need a common color scale throughout, and use colors (loosely) associated with each of the parties:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1519,"value":"Plot.legend({color})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1447,"value":"color = Plot.scale({color: { domain: [\"DEM\", \"IND\", \"REP\", \"LIB\", \"GRE\"] }})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1758,"value":"Similarly, we’ll use the same *r* scale in all the charts that show dots, to represent the “grading” of each poll. (Dots are merely decorative in most of these charts, but hey…)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1763,"value":"r = Plot.scale({r: { domain: [0, 3], range: [0.2, 2] }})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1676,"value":"The raw data can now be plotted with the dot and line marks, together with the default interactive tip on the line:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1294,"value":"Plot.plot({\n r,\n color,\n marks: [\n Plot.ruleY([0]),\n Plot.dot(polls, {\n x: \"date\",\n y: \"pct\",\n fill: \"party\",\n r: \"numeric_grade\",\n fillOpacity: 0.2\n }),\n Plot.lineY(averages, {\n x: \"date\",\n y: \"pct\",\n stroke: \"party\",\n strokeWidth: 2,\n tip: { channels: { candidate: \"candidate\" } }\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2457,"value":"(This chart is interesting in itself, showing how Harris replacing Biden on the ticket instantly killed half the support for Kennedy—but when the latter quit the race, it had no effect on either Trump or Harris’ rates.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":555,"value":"## Default pointer position\n\nWhen a user is not interacting with the chart, the usual **pointer** transform makes the mark (say, the tip mark) invisible. To do so, it calls the mark’s _render function_ with an empty `index = []`. Since what we want is to display a default value (say, the first value of the dataset), we use the _render transform_ to override the mark’s render function and call it with `index = [0]`:\n\n```js\n render: (index, scales, values, dimensions, context, next) => {\n if (index.length === 0) index = [0];\n return next(index, scales, values, dimensions, context);\n }\n```\n\nAnd that’s all we need for the base concept: show a default value when the user is not pointing.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":746,"value":"Plot.plot({\n width,\n height: 150,\n marginRight: 100,\n color,\n marks: [\n Plot.line(averages, {\n x: \"date\",\n y: \"pct\",\n strokeWidth: 2,\n stroke: \"party\"\n }),\n Plot.tip(\n averages,\n Plot.pointerX({\n x: \"date\",\n y: \"pct\",\n stroke: \"party\",\n render: (index, scales, values, dimensions, context, next) => {\n const i = index.length > 0 ? index[0] : 0;\n return next([i], scales, values, dimensions, context);\n }\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":428,"value":"Plot.plot({\n width,\n height: 150,\n marginRight: 100,\n color,\n marks: [\n Plot.lineY(\n averages,\n {\n x: \"date\",\n y: \"pct\",\n stroke: \"party\",\n strokeWidth: 1,\n opacity: 0.5\n }\n ),\n\n Plot.lineY(\n averages,\n Plot.pointerX({\n x: \"date\",\n y: \"pct\",\n stroke: \"party\",\n strokeWidth: 3,\n markerStart: true,\n render: (index, scales, values, dimensions, context, next) => {\n const i = index.length > 0 ? index[0] : 0;\n const X = values.x;\n const x0 = X[i]; // the pointer’s x\n const newIndex = Array.from(X, (_, i) => i).filter((i) => X[i] <= x0);\n mutable peek = {index, i, X, x0, newIndex};\n return next(newIndex, scales, values, dimensions, context);\n }\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1913,"value":"The cell below shows the values that this function sees as you point on the\nchart (click to expand the inspector):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1855,"value":"mutable peek = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":448,"value":"## Data-based default position\n\nThe default location for the interactive tip when we’re not hovering can be any of the available points. A common use case, rather than hard-coding the `0` as above, would be to define it in terms of the data. The complete implementation offers _maxX_, _minX_, _maxY_, _minY_, _first_, and _last_. This is extremely versatile, as you can combine _first_ with the sort transform to select whichever point you choose.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":587,"value":"For example, we can select the default point based on max(*y*):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":539,"value":"Plot.plot({\n width,\n height: 150,\n marginRight: 100,\n color,\n marks: [\n Plot.line(averages, {\n x: \"date\",\n y: \"pct\",\n stroke: \"party\"\n }),\n Plot.tip(\n averages,\n pointerMX({\n x: \"date\",\n y: \"pct\",\n stroke: \"party\",\n atrest: \"maxY\"\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":861,"value":"Or, to default the interactive tip to the poll that had the worst results for the ${party(\"DEM\")} candidate, we can sort the mark with a custom function:\n\n```js\n sort: (d) => d.party === \"DEM\" ? d.pct : NaN,\n```\n\n\nand select the _first_ point:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":864,"value":"Plot.plot({\n width,\n height: 150,\n color,\n r,\n marks: [\n Plot.dot(polls, {\n x: \"date\",\n y: \"pct\",\n fill: \"party\",\n r: \"numeric_grade\",\n fillOpacity: 0.2\n }),\n\n Plot.dot(\n polls,\n pointerMX({\n x: \"date\",\n y: \"pct\",\n fill: \"party\",\n sort: (d) => d.party === \"DEM\" ? d.pct : NaN,\n atrest: \"first\",\n r: 4\n })\n ),\n\n Plot.tip(\n polls,\n pointerMX({\n x: \"date\",\n y: \"pct\",\n fill: \"party\",\n sort: (d) => d.party === \"DEM\" ? d.pct : NaN,\n atrest: \"first\",\n r: 5\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":620,"value":"## Text annotations\n\nTo show the current day at the top of the frame, following the pointer, we can apply the same transform to the text mark:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":617,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"## Series\n\nWe want to display a tip for each party at a given date, not just the value that is closest to the pointer. Here the lines don’t need help (they are based on all the values that are before that date). But the tooltips do need help: once a tooltip has been identified, we need to locate its companion(s) (same _x_ in a different party).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":12,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":492,"value":"## Occlusion\n\nThe last technical hurdle is to avoid occlusion, by separating the ${party(\"DEM\")} and ${party(\"REP\")} labels when they overlap. This uses an additional custom render transform, which _only works for this particular chart_ (and is not the focus of this post, see [#1957](https://github.com/observablehq/plot/pull/1957) for more):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1983,"value":"customOverlapRender = ({ minDistance = 26 } = {}) =>\n (index, scales, values, dimensions, context, next) => {\n const { channels } = values;\n const Z =\n channels.z?.value ?? channels.stroke?.value ?? channels.fill?.value;\n if (index.length >= 2) {\n const a = index.find((i) => Z[i] === \"DEM\");\n const b = index.find((i) => Z[i] === \"REP\");\n let d = values.y[a] - values.y[b];\n if (Math.abs(d) < minDistance) {\n d = ((minDistance - Math.abs(d)) * Math.sign(d)) / 2;\n const Y = values.y.slice();\n Y[a] += d;\n Y[b] -= d;\n values = { ...values, y: Y };\n }\n }\n return next(index, scales, values, dimensions, context);\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1012,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2067,"value":"Et voilà… now we have all the pieces to assemble a good-looking chart at the top of this page.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2473,"value":"## The outcome\n\nAnd there it is:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2472,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2470,"value":"\n---\n\nKeep reading if you want even more details… or [jump to the reusable code](#code).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":505,"value":"## Faceting\n\nThis transform was designed to work with facets—though it probably doesn’t deliver the best user experience. For something more adapted to hovering on facets, see the [Cross-facet crosshair](https://observablehq.com/@observablehq/cross-facet-crosshair) notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":508,"value":"Plot.plot({\n width,\n height: 200,\n marginRight: 100,\n r,\n color,\n facet: { data: averages, y: \"party\" },\n fy: { domain: [\"DEM\", \"REP\"] },\n marks: [\n Plot.frame(),\n Plot.dot(polls, {\n x: \"date\",\n y: \"pct\",\n fy: \"party\",\n fill: \"party\",\n r: \"numeric_grade\",\n fillOpacity: 0.2\n }),\n\n Plot.lineY(averages, {\n x: \"date\",\n y: \"pct\",\n stroke: \"party\",\n strokeWidth: 1,\n curve: \"natural\",\n opacity: 0.25\n }),\n\n Plot.ruleX(averages, pointerMX({ x: \"date\", atrest: \"maxX\" })),\n\n Plot.lineY(\n averages,\n pointerMX({\n x: \"date\",\n atrest: \"maxX\",\n y: \"pct\",\n selector: \"before\",\n z: \"party\",\n stroke: \"party\",\n curve: \"natural\",\n strokeWidth: 3,\n markerStart: true\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":687,"value":"## At rest annotation\n\nAn extension of this interactive pattern is to show a main annotation by default, but remove it when you point to the data. in that case, the trick is to say if the `index` is empty, we show the mark; and if it’s not, we hide it. The code is simple enough:\n\n```js\n render: (index, scales, values, dimensions, context, next) => {\n if (index.length === 0) index = [0];\n else index = [];\n return next(index, scales, values, dimensions, context);\n }\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":693,"value":"Plot.plot({\n width,\n height: 150,\n axis: null,\n inset: 10,\n marginRight: 100,\n r,\n color,\n marks: [\n Plot.frame(),\n Plot.dot(polls, {\n x: \"date\",\n y: \"pct\",\n fill: \"party\",\n r: \"numeric_grade\",\n fillOpacity: 0.2,\n tip: true\n }),\n Plot.tip(\n polls,\n Plot.pointerX({\n maxRadius: Infinity,\n px: \"date\",\n dy: 12,\n fontSize: 25,\n title: [\"INTERACTIVE CHART\"],\n render: (index, scales, values, dimensions, context, next) => {\n if (index.length === 0) index = [0];\n else index = [];\n return next(index, scales, values, dimensions, context);\n }\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1045,"value":"## z-aware pointer\n\nThe transform addresses the case where you want a _z_-aware pointer ([#1574](https://github.com/observablehq/plot/pull/1574) / [#1671](https://github.com/observablehq/plot/pull/1671)), for example to select the line that contains the target.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1047,"value":"Plot.plot({\n width,\n height: 250,\n marginRight: 100,\n r,\n color,\n marks: [\n Plot.dot(polls, {\n x: \"date\",\n y: \"pct\",\n fill: \"party\",\n r: \"numeric_grade\",\n fillOpacity: 0.2\n }),\n\n Plot.lineY(averages, {\n x: \"date\",\n y: \"pct\",\n stroke: \"party\",\n strokeWidth: 1,\n curve: \"natural\",\n opacity: 0.25\n }),\n\n Plot.lineY(\n averages,\n pointerMX({\n x: \"date\",\n atrest: \"maxY\",\n y: \"pct\",\n selector: \"z\",\n stroke: \"party\",\n curve: \"natural\",\n strokeWidth: 3,\n markerEnd: true\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1108,"value":"## Categorical axes\n\nThe transform works with ordinal *x* too, and with stacked values (_e.g._, using *y2* instead of *y*):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1109,"value":"Plot.plot({\n marks: [\n Plot.barY(\n penguins,\n Plot.groupX(\n { y: \"count\" },\n { fill: \"species\", x: \"island\", fillOpacity: 0.5 }\n )\n ),\n Plot.barY(\n penguins,\n pointerMX(\n Plot.groupX(\n { y: \"count\" },\n {\n fill: \"species\",\n x: \"island\",\n atrest: \"maxx\",\n selector: \"eq\",\n maxRadius: Infinity\n }\n )\n )\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1132,"value":"Plot.plot({\n marks: [\n Plot.rectY(\n olympians,\n Plot.binX(\n { y: \"count\", interval: \"year\" },\n { fill: \"sex\", x: \"date_of_birth\", fillOpacity: 0.5 }\n )\n ),\n Plot.rectY(\n olympians,\n pointerMX(\n Plot.binX(\n { y: \"count\", interval: \"year\" },\n { fill: \"sex\", x: \"date_of_birth\", atrest: \"maxy\", selector }\n )\n )\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1180,"value":"Play with the various selectors in the chart above:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1173,"value":"viewof selector = Inputs.radio([\"x\", \"z\", \"before\", \"after\"], {label: \"selector\", value: \"before\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":533,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2025,"value":"pointerMX = pointerMore(Plot.pointerX)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2029,"value":"pointerM = pointerMore(Plot.pointer)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2032,"value":"pointerMY = pointerMore(Plot.pointerY)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":720,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2370,"value":"---\n\n## Helpers\n\n(These functions are only useful for this page, they are not related directly to the pointer transform.)\n\n* **party** writes text with an underline color like ${party(\"GRE\")}, ${party(\"REP\")}, ${party(\"DEM\")}.\n* **renderMultipleText** is an options transform that takes two lines of text and renders them as a percentage on a rect + a candidate name.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2059,"value":"party = (PAR) => htl.html`${PAR}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2350,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 30:"$2f:body"