cell plot event listener

New To Observable
1

I am using an example for Cell Plot from here.

How do I add an event listener to the cell plot? I want to use mouse click on a cell, to get the x and y values to global variables.

Plot.plot({
  marks: [
    Plot.cell(cooccurrences, {
      x: "item_a",
      y: "item_b",
      fill: "count", 
      title: d => `${d.item_a} + ${d.item_b} = ${d.count}`,     // add tooltips for each cell
      sort: { y: "fill", x: "fill", reverse: true, limit: 20 }  
    }),
    // Add a textual annotation to each cell
    Plot.text(cooccurrences, colorContrast({    // colorContrast is a transform that changes the text color for accessibility    
      x: "item_a",
      y: "item_b",
      text: "count",
      fill: "count",
      pointerEvents: "none",      // make the text ignore the mouse pointer (so the cell tooltip works)
    }))
  ],
  x: { tickRotate: 90},
  color: { scheme: "greens"},
  marginLeft: 250,
  marginRight: 100,
  marginBottom: 200,
  grid: true,
  width
})
2

Unfortunately that example is very old. Plot has since added the Plot.tip mark and Plot.pointer transform, as well as the tip shorthand for all marks.

Using a tip (or a pointer) will automatically set the outermost element’s value property to the data point that’s closes to the cursor.

You can find current examples in the last section of the Plot Gallery: