Observable Plot click events

Community Help
1

Does Observable Plot support click events, and how can I add a click event to each dot on the plot?

2

It’s not very easy today, but you can do it with a render transform:

2 Likes
3

Thank you very much for your patient answer. This method has solved my problem.

1 Like
4

Is there work being done to advance this? Very interested, but current solution are clunky.

Remaking an old chart here but I want to print the slopes when a user clicks.

My old solution pre-Plot() is here

5

No progress since last time, I’m afraid!

I don’t think this solves your problem (or sym0’s), but, if others come across this, I should note that all marks do support an href channel (see Mark options) that makes marks into links. E.g., in this example, you can click an earthquake to see details on the USGS website:

Plot.plot({
  projection: "equirectangular",
  style: "overflow: visible;",
  marks: [
    Plot.geo(land, {fill: "currentColor", fillOpacity: 0.2}),
    Plot.sphere(),
    Plot.geo(earthquakes, {
      r: (d) => Math.pow(10, d.properties.mag),
      fill: "red",
      fillOpacity: 0.2,
      stroke: "red",
      title: (d) => d.properties.title,
      href: (d) => d.properties.url,
      target: "_blank"
    })
  ]
})
6

Hey @tophtucker :wave: ! Looks like the rendering order of elements in Plot (or the order of the elements in the .value array) has perhaps changed since you created this example. When I click one of the circles, the value doesn’t correspond to the circle I’ve clicked.

For anyone else who finds themselves at the bottom of this thread, I’ve used an aria-label as a workaround. In my case, I wanted to highlight all elements of the same fill on mouseenter:

for (let i = 0; i < elements.length; i++) {
    elements[i].addEventListener("mouseenter", (ele) => {                    
    const focusCategory = elements[i].getAttribute("aria-label");          
    Array.from(elements).map((element, idx) => {            
      const category = element.getAttribute("aria-label");
      if (category === focusCategory) {
        element.style[`${colorType}Opacity`] = "1";
      } else {
        element.style[`${colorType}Opacity`] = "0.5";
      }
    });
  });

Happy to put together a quick notebook if it's helpful.