Strategy 1: CSS pseudo element

What is a pseudo class

A CSS pseudo-class is a keyword added to a CSS selector that specifies a special state of the selected element(s). You can learn more about pseudo-classes in the MDN doc.

Essentially, this means you can assign a class to each shape in a graph and change its appearance when the user hovers over it.

Here is an example:

.scatterplotCircle {
  cursor: pointer;
  fill-opacity: .3;
  stroke-width: 2px;
}

.scatterplotCircle:hover {
  fill-opacity: 1;
  stroke-width: 1px;
}

Application on a scatterplot

Consider a scatterplot with multiple SVG circle elements, each assigned a .scatterplotCircle class. In the CSS file, you can set the fill-opacity to 0.3 using this class.

To change the appearance on hover, use the .scatterplotCircle:hover selector to increase the opacity to 1.

Pros & Cons

• Easy to implement
• Excellent performance (no JS computation, minimal redrawing)

• Poor design: non-hovered circles remain prominent, so the highlight effect is weak
• If the highlight information comes as a prop, another solution is needed

More examples

The examples below all use this strategy to implement their hover effect.

Exercices