29:null 2a:["$","title",null,{"children":"Cross-facet crosshair | Observable | Observable"}] 2f:T5d8,viewof penguin = Plot.plot({ inset: 5, marginRight: 50, marks: [ Plot.frame(), // this mark listens to the interaction (index, scales, values, dimensions, context) => { const xh = svg``; const yh = svg``; const g = svg`${xh}${yh}`; context.ownerSVGElement.addEventListener("input", () => { const { value } = context.ownerSVGElement; if (value == null) { g.setAttribute("visibility", "hidden"); } else { const { body_mass_g, culmen_length_mm } = value; const x = scales.x(body_mass_g); yh.setAttribute("x1", x); yh.setAttribute("x2", x); const y = scales.y(culmen_length_mm); xh.setAttribute("y1", y); xh.setAttribute("y2", y); g.setAttribute("visibility", "visible"); } }); return g; }, Plot.dot(penguins, { x: "body_mass_g", y: "culmen_length_mm", fx: "species", fy: "sex" }), // this mark drives the interaction Plot.dot( penguins, Plot.pointer({ x: "body_mass_g", y: "culmen_length_mm", fx: "species", fy: "sex", fill: "island" }) ) ] })30:T8f5,viewof xy = Plot.plot({ inset: 5, marks: [ Plot.frame(), Plot.dot(penguins, { x: "body_mass_g", y: "culmen_length_mm", fx: "species", fy: "sex" }), // A custom mark that listens to the pointer directly function ( index, scales, values, { marginLeft: l, marginTop: t, marginRight, marginBottom, width, height, r = width - marginRight, b = height - marginBottom }, { ownerSVGElement, document } ) { const mark = this; ownerSVGElement.value = null; // TODO: this uses svg`` for convenience, for genericity we could use document.createElement const xh = svg``; const yh = svg``; const g = svg` ${xh}${yh} `; function move(event) { const [x, y] = d3.pointer(event, g); if (mark.sticky || x < l || x > r || y < t || y > b) return; ownerSVGElement.value = { x: scales.x?.invert?.(x) ?? x, y: scales.y?.invert?.(y) ?? y }; mark._position = [x, y]; ownerSVGElement.dispatchEvent(new Event("input")); } ownerSVGElement.addEventListener("pointermove", move); g.addEventListener("click", (event) => { mark.sticky = !mark.sticky; move(event); }); g.addEventListener("pointerleave", (event) => { if (mark.sticky) return; ownerSVGElement.value = null; ownerSVGElement.dispatchEvent(new Event("input")); }); ownerSVGElement.addEventListener("input", (event) => { const { value, screen } = ownerSVGElement; if (value == null) { g.setAttribute("visibility", "hidden"); } else { const [x, y] = mark._position; yh.setAttribute("x1", x); yh.setAttribute("x2", x); xh.setAttribute("y1", y); xh.setAttribute("y2", y); g.setAttribute("visibility", "visible"); } }); return g; } ] })31:Tc27,viewof combined = Plot.plot({ inset: 5, marks: [ Plot.frame(), Plot.dot(penguins, { x: "body_mass_g", y: "culmen_length_mm", fx: "species", fy: "sex" }), // A mark with a custom render function that listens to the pointer Plot.dot(penguins, { x: "body_mass_g", y: "culmen_length_mm", fx: "species", fy: "sex", fill: "orange", render: function (index, scales, values, dimensions, context, next) { const mark = this; const { marginLeft: l, marginTop: t, marginRight, marginBottom, width, height, r = width - marginRight, b = height - marginBottom } = dimensions; const { ownerSVGElement, document } = context; ownerSVGElement.value = null; // Note: while this uses svg`` for convenience, for genericity we could use document.createElement const xh = svg``; const yh = svg``; let selected = svg``; // for the closest penguin const g = svg` ${xh}${yh} ${selected} `; function move(event) { if (mark.sticky) return; const [x, y] = d3.pointer(event, g); if (x < l || x > r || y < t || y > b) { selected.replaceWith((selected = svg``)); return; } const i = d3.least( index, (i) => (values.x[i] - x) ** 2 + (values.y[i] - y) ** 2 ); selected.replaceWith( (selected = next([i], scales, values, dimensions, context)) ); ownerSVGElement.value = { x: scales.x?.invert?.(x) ?? x, y: scales.y?.invert?.(y) ?? y, facet: g.__data__, datum: mark.data[i] }; mark._position = [x, y]; ownerSVGElement.dispatchEvent(new Event("input")); } ownerSVGElement.addEventListener("pointermove", move); g.addEventListener("click", (event) => { mark.sticky = !mark.sticky; move(event); }); g.addEventListener("pointerleave", (event) => { if (mark.sticky) return; ownerSVGElement.value = null; ownerSVGElement.dispatchEvent(new Event("input")); }); ownerSVGElement.addEventListener("input", (event) => { const { value, screen } = ownerSVGElement; if (value == null) { g.setAttribute("visibility", "hidden"); } else { const [x, y] = mark._position; yh.setAttribute("x1", x); yh.setAttribute("x2", x); xh.setAttribute("y1", y); xh.setAttribute("y2", y); g.setAttribute("visibility", "visible"); } }); return g; } }) ] })32:Tc0d,Plot.plot({ inset: 5, marks: [ Plot.frame(), Plot.dot(penguins, { x: "body_mass_g", y: "culmen_length_mm", fx: "species", fy: "sex" }), // A mark with a custom render function that listens to the pointer Plot.dot(penguins, { x: "body_mass_g", y: "culmen_length_mm", fx: "species", fy: "sex", fill: "island", stroke: "currentColor", render: function (index, scales, values, dimensions, context, next) { const mark = this; const { marginLeft: l, marginTop: t, marginRight, marginBottom, width, height, r = width - marginRight, b = height - marginBottom } = dimensions; const { ownerSVGElement, document } = context; ownerSVGElement.value = null; // Note: this uses svg`` for convenience, but for genericity we could use document.createElement const xh = svg``; const yh = svg``; let selected = svg``; // for the closest penguin const g = svg` ${xh}${yh} ${selected} `; function move(event) { if (mark.sticky) return; const [x, y] = d3.pointer(event, g); if (x < l || x > r || y < t || y > b) return; ownerSVGElement.value = { x: scales.x?.invert?.(x) ?? x, y: scales.y?.invert?.(y) ?? y, facet: g.__data__ }; mark._position = [x, y]; ownerSVGElement.dispatchEvent(new Event("input")); } ownerSVGElement.addEventListener("pointermove", move); g.addEventListener("click", (event) => { mark.sticky = !mark.sticky; move(event); }); g.addEventListener("pointerleave", (event) => { if (mark.sticky) return; ownerSVGElement.value = null; ownerSVGElement.dispatchEvent(new Event("input")); }); ownerSVGElement.addEventListener("input", (event) => { const { value, screen } = ownerSVGElement; if (value == null) { g.setAttribute("visibility", "hidden"); } else { const [x, y] = mark._position; yh.setAttribute("x1", x); yh.setAttribute("x2", x); xh.setAttribute("y1", y); xh.setAttribute("y2", y); g.setAttribute("visibility", "visible"); selected.replaceWith( (selected = next( index.filter( (i) => (values.x[i] - x) ** 2 + (values.y[i] - y) ** 2 < 400 ), scales, values, dimensions, context )) ); } }); return g; } }) ] })33:[] 2d:{"id":"33fcd8b94baca9dc","slug":"cross-facet-crosshair","title":"Cross-facet crosshair","thumbnail":"0e33dd1d9a228128274eeb5cc26b2f39b7e1e5a6fbb6d838fa0c9856fc6939a1","access_level":"public","create_time":"$D2024-09-25T07:01:16.810Z","update_time":"$D2024-10-03T16:52:40.295Z","view_time":null,"first_public_time":"$D2024-10-03T16:52:47.244Z","has_unpublished_edits":null,"fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":368,"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":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Cross-facet crosshair","cells":[{"id":0,"value":"# Cross-facet crosshair\n\nThis custom mark listens to Plot’s [**pointer**](https://observablehq.com/plot/interactions/pointer) interaction and updates a crosshair on all facets as it highlights the penguin closest to the mouse. (See the [“five techniques” series](https://observablehq.com/blog/five-techniques-to-improve-chart-annotations).)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":256,"value":"penguin","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"A continuous version (see [#1629](https://github.com/observablehq/plot/issues/1629)) might feel nicer under the mouse—but then it does not snap to the closest data point:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"xy","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"A mixture of the best of both worlds is possible—and we can additionally show the facet and the closest datum on the value:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"combined","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"Or, maybe, we want to highlight *all* the penguins that have characteristics similar to the pointer's location *across all facets*? That is possible, too.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":298,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"