Coordinated plots

[yurivish]

Is there a way to implement a linked hover interaction, where hovering on any chart in a set of linked charts would show the pointers for that x position across all linked charts?

Example here:

https://observablehq.com/@iopsystems/coordinated-plots

In general, the plots might not be of the same type and may want to exist in different parts of the DOM. Otherwise I think this could be done with facets.

[mbostock]

Take a look at render transforms as demonstrated here: #1871

[landisrm]

Hello, I'd like to do something similar, except I'd like to link together an Observable Plot and a leaflet map, as shown in this example https://observablehq.com/d/a1c5edd0489f4478. I looked at PR1871, but I'm very new to Observable and JavaScript (but very experienced with data analysis in Python and R, including Shiny), so I don't completely follow how to adapt that approach to my situation.

I think ideally I would be able to get the ID of the point that is hovered in the Plot, similar to what I am doing in the leaflet map

marker.on('mouseover', function(e) {
    mutable selectedPointId = loc.id;
    marker.setStyle({ 
        radius: 10,
        color: 'white',
        fill: true,
        fillColor: 'blue',
        fillOpacity: 1,
    });
});

which I am highlighting in the plot as

    Plot.dot(filteredLocs, {
      x: "timestamp",
      y: "cum_distance_m",
      r: "selected",
      fill: (d) => d.id === selectedPointId ? 'lightblue' : 'black',
      stroke: 'black',
      strokeWidth: 1,
    }),

Is there an equivalent way to get the id attribute of the hovered datum in Plot, so I can update the leaflet map in a similar way?

[Fil]

This is difficult, since you need to make sure you don't have circular effects.

To answer the first question "to get the ID of the point that is hovered in the Plot": you can do viewof hovered = Plot.plot({…, and in a separate cell do

{
  if (hovered?.id && hovered.id !== mutable selectedPointId)
    mutable selectedPointId = hovered?.id;
}

This will set the value of selectedPointId when you mouse over the chart. However it will not highlight that point on the map. To do so, you will have to restructure the code a bit more, so you can manipulate the Leaflet markers without re-generating the whole map. I've sent you a suggestion in https://observablehq.com/compare/a1c5edd0489f4478...caec895a3afa74eb — hope it gets you on the right track.

[landisrm]

Thanks @Fil that looks great, I'll check it out. Much appreciation for showing me how to avoid redrawing the leaflet map as well