Plot.geo highlight country on hover: border thickness varies on swapping neighbouring countries

[espinielli]

I tried to highlight countries on hover but I see overlapping borders of different thickness when switching from one to its neighborough.
For example in this notebook

1. Hover over Russia: the border with Mongolia is thin
   

2. Hover hover Mongolia: the border with Russia is now thicker
   

Q: How do you get constant/consistent thickness?
Q: Also is the method (trick?) I used the right way to highlight polygons in Plot.geo?

Plot.plot({
  projection: "equal-earth",
  width,
  marks: [
    Plot.graticule(),
    Plot.geo(land, { fill: "#AAA" }),
    Plot.geo(countries, {
      // give it a class for easier CSS matching when highlighting
      className: "country",
      fill: (d) => +d.id,
      title: (d) => d.properties.name
    }),
    Plot.sphere(),
    // highlight
    () =>
      svg`<style>
        .country path:hover {stroke: red; stroke-width: 2; stroke-opacity: 1.0; transition: stroke-opacity .1s }
      `
  ]
})

Any helps or suggestions are welcome.
Thanks

[Fil]

It depends on the order in which the shapes are drawn (ie. Mongolia is drawn after Russia, so its fill is drawn on top of Russia's stroke).

To fix this you can create two marks (one for the fill, one for the stroke); use javascript (e.g. d3.selection's raise); or clip the shapes by themselves to ensure the stroke is drawn “inwards” (hard to do with Plot).

I've sent you a suggestion that implements the first suggestion
https://observablehq.com/compare/d423284aa770eb88...23b3a136ce8e492a

[espinielli]

Thanks I applied it to https://observablehq.com/@espinielli/world-firs-with-zoom-and-rotate and it works like a charm!