# Plot Pointer - x,y coordinates

**URL:** <https://talk.observablehq.com/t/plot-pointer-x-y-coordinates/8124>\
**Category:** Help\
**Created:** [July 25, 2023, 3:37pm UTC](https://talk.observablehq.com/t/plot-pointer-x-y-coordinates/8124 "2023-07-25T15:37:23Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![bz-jm](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@bz-jm](https://talk.observablehq.com/u/bz-jm)\
**Post date:** [July 25, 2023, 3:37pm UTC](https://talk.observablehq.com/t/plot-pointer-x-y-coordinates/8124/1 "2023-07-25T15:37:23Z")

</div>

I am using plot to create a chart. The configuration looks like this:

```auto
var plot = Plot.plot({
...
  y: {grid: true, stroke: "#898989", label: null, ticks: interval},
  x: {label: null },
  marks: [
...
    Plot.dot(result, Plot.pointerX({x: properties.xAxisField, y: properties.yAxisField, fill: "#6078ff", r: 8 }))
  ]
})

```

All is well. The chart is created as expected. The question I have is related to Plot.pointerX. Based upon the documentation here: [Pointer transform | Observable Plot](https://observablehq.com/plot/interactions/pointer) we can create a listener for the pointer event as stated:

> The pointer transform emits an [_input_ event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) whenever the focused points changes, and sets the value of the plot element to the focused data. This allows you to use a plot as an [Observable view](https://observablehq.com/@observablehq/views) (viewof), or to register an _input_ event listener to react to pointing.

I implemented this listener as follows and it works as stated and e.target.value contains the data from the point as expected:

```auto
document.addEventListener("input", updateValue);

function updateValue(e) {
  console.log(e);
  console.log(e.target.value);
}

```

The question I have is: Can the mouse position (x,y coords) be obtained from this event such that I know the position of the “dot” that is being hovered when the event is fired? Much thanks in advance

(@Fil tagging you in the off chance you happen to be available).

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [July 26, 2023, 3:12pm UTC](https://talk.observablehq.com/t/plot-pointer-x-y-coordinates/8124/2 "2023-07-26T15:12:00Z")

</div>

No, the input event generated by Plot is not a mouse or pointer event, and so doesn’t have corresponding coordinates for the mouse or pointer position. More technically, it is an [InputEvent](https://www.w3.org/TR/uievents/#idl-inputevent), which is a [UIEvent](https://www.w3.org/TR/uievents/#uievent), but you need a [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent) if you want mouse or pointer coordinates. Plot won’t tell you the mouse event that triggered the input event.

That said, you can listen for mouse or pointer events yourself, and then do something with those coordinates or stash them somewhere, so that you know the mouse or pointer position(s) when you receive an input event from Plot.

Maybe you could describe what you are trying to do at a higher level?

---

<div class="post-metadata">

**Author:** ![bz-jm](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@bz-jm](https://talk.observablehq.com/u/bz-jm)\
**Post date:** [July 26, 2023, 7:12pm UTC](https://talk.observablehq.com/t/plot-pointer-x-y-coordinates/8124/3 "2023-07-26T19:12:38Z")

</div>

@mbostock thanks for the quick response!

I’m basically trying to achieve the mouseover affect seen here: [Monthly Recurring Revenue - Baremetrics Demo](https://demo.baremetrics.com/stats/mrr) (but based upon plot rather then straight d3). Here is where I am at: [Untitled / Brian | Observable](https://observablehq.com/d/24a1dce7d3f07727) (keeping in mind I’m using this outside of observable notebooks - standard js).

I want to overlay html on the SVG using standard JS but I need to know the location of the dot/pointer that is currently active so I can offset the location of the div appropriately. I can show/hide the div already, but the location is problematic. As a note, I’m using the standard tip currently just as a proof of concept, but that would go away once the JS/HTML solution is achievable. Any thoughts/insights are greatly appreciated.

And thanks as always for the awesome work you continue to do on d3/plot!

---

<div class="post-metadata">

**Author:** ![Cobus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cobus/32/9670_2.png) [@Cobus](https://talk.observablehq.com/u/Cobus)\
**Post date:** [July 26, 2023, 8:05pm UTC](https://talk.observablehq.com/t/plot-pointer-x-y-coordinates/8124/4 "2023-07-26T20:05:01Z")

</div>

This may be of interest… using tippy.js with Plot to create HTML tooltips.

> **[Hoverable tooltips for Plot](https://observablehq.com/d/baeb8cbead1ed3d2)**
>
> Plot has recently added tooltips! While super nice, they are a bit limited. This notebook shows how to use Tippy.js to add interactive tooltips to a map generated by \`Plot.geo\`. If you hover over the red dots in the image below, you should see a...

---

<div class="post-metadata">

**Author:** ![bz-jm](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@bz-jm](https://talk.observablehq.com/u/bz-jm)\
**Post date:** [July 26, 2023, 8:35pm UTC](https://talk.observablehq.com/t/plot-pointer-x-y-coordinates/8124/5 "2023-07-26T20:35:18Z")

</div>

@Cobus Thank you! I did see that post and I agree that is the idea I am going for. However it appears the d3 selector is for all “circles”

```auto
  let dots = d3.select(map).selectAll("circle");

```

I actually have two different circles (one at the top of the area and one on the baseline), only one of which (the top) should be used for the position of the tooltip…

![Screenshot 2023-07-26 at 4.35.39 PM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/a/aec078f171975ca5d3cf32431cd91cdcb4e405d5.png)

Is it possible to give a more specific selector to one of these so as to target one over the other?

```auto
    Plot.dot(result, Plot.pointerX({x: "x", y: 0, py: "y", fill: "#FFF", stroke: "#E5E7EB", strokeWidth:1, r: 5, strokeOpacity: 1, fillOpacity:1 })),        
    Plot.dot(result, Plot.pointerX({x: "x", y: "y", fill: "#6078ff", r: 8 })),   

```

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [July 26, 2023, 11:05pm UTC](https://talk.observablehq.com/t/plot-pointer-x-y-coordinates/8124/6 "2023-07-26T23:05:56Z")

</div>

> [@bz-jm](#):
>
> I actually have two different circles (one at the top of the area and one on the baseline), only one of which (the top) should be used for the position of the tooltip…  
> …  
> Is it possible to give a more specific selector to one of these so as to target one over the other?

I think it would be great if you could specify a class or id attribute to a mark but I don’t think that’s an option. Of course, you can take any action you like as a function of the title attribute. For example, you might take no action at all, if the title is `null`.

---

<div class="post-metadata">

**Author:** ![bz-jm](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@bz-jm](https://talk.observablehq.com/u/bz-jm)\
**Post date:** [July 27, 2023, 2:47pm UTC](https://talk.observablehq.com/t/plot-pointer-x-y-coordinates/8124/7 "2023-07-27T14:47:18Z")

</div>

> [@mcmcclur](#):
>
> I think it would be great if you could specify a class or id attribute to a mark

@mcmcclur I believe this would solve my present issue. Also, it seems you mentioned this at some point ([here](https://github.com/observablehq/plot/pull/253#issuecomment-887596142)) in the past and there has been an enhancement coded already here: [Add class name option for marks by RLesser · Pull Request #1098 · observablehq/plot · GitHub](https://github.com/observablehq/plot/pull/1098)

@mbostock @Fil any chance this pull request could be merged into the main branch sometime in the near future?

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [July 31, 2023, 12:40pm UTC](https://talk.observablehq.com/t/plot-pointer-x-y-coordinates/8124/8 "2023-07-31T12:40:08Z")

</div>

Adding an **id** is problematic if you have several charts on a page, so this is probably not going to be done. I’m still in favor of a simple option to add a className (note that it’s already _possible_ to do this within a render transform, but that’s obviously too complicated).

---

<div class="post-metadata">

**Author:** ![bz-jm](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@bz-jm](https://talk.observablehq.com/u/bz-jm)\
**Post date:** [July 31, 2023, 8:21pm UTC](https://talk.observablehq.com/t/plot-pointer-x-y-coordinates/8124/9 "2023-07-31T20:21:01Z")

</div>

@Fil I’m specifically addressing the className (which is what would work for me) which is what I believe the patch I was asking about already solves?

Could you look into the pull request and see what is necessary to pull that into the main branch? I don’t think it has anything to do with “id”'s based on what I read, but I could be wrong?

Also, do you have an example of the render transform? I’m willing to use that for the moment if it can target one set of plot “circles/dots” and not the other.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [July 31, 2023, 9:01pm UTC](https://talk.observablehq.com/t/plot-pointer-x-y-coordinates/8124/10 "2023-07-31T21:01:00Z")

</div>

I know, I was commenting on Mark’s mention of _id_. For an example with the render transform, see [opacity artifacts in line segments - #2 by Fil](https://talk.observablehq.com/t/opacity-artifacts-in-line-segments/8142/2). We don’t recommend using that route though, because it’s much more complicated that needs to be.

In your case, you could set a specific **ariaDescription** option on the mark you want to target, for example `ariaDescription: "informational dots about cities"`.  
Then select this marks’ dots with, for example:

> d3.select(map).selectAll(“[aria-description^=informational] circle”);

In a sense this works like the desired className, except it’s “hijacking” the [aria-description](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-description) property—and as a consequence it’s recommended to set the contents of that property to a semantically correct sentence.

---

<div class="post-metadata">

**Author:** ![bz-jm](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@bz-jm](https://talk.observablehq.com/u/bz-jm)\
**Post date:** [July 31, 2023, 9:50pm UTC](https://talk.observablehq.com/t/plot-pointer-x-y-coordinates/8124/11 "2023-07-31T21:50:27Z")

</div>

@Fil thank you, I like that idea! I’m going to give this a go and see if I can get it working with that feedback!

---

<div class="post-metadata">

**Author:** ![bz-jm](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@bz-jm](https://talk.observablehq.com/u/bz-jm)\
**Post date:** [August 8, 2023, 7:11pm UTC](https://talk.observablehq.com/t/plot-pointer-x-y-coordinates/8124/12 "2023-08-08T19:11:34Z")

</div>

> [@Fil](#):
>
> In your case, you could set a specific **ariaDescription** option on the mark you want to target

This works as described. Thank you @Fil!