Strat 1: CSS pseudo-class

What is a pseudo class

A CSS selector is a way to target specific elements in the DOM and customize them using CSS rules. For instance, h1 will target all level-1 headings in the document.

If you add the :hover keyword to the selector, the rules will be applied only when the element is hovered over!

Anatomy of a CSS rule using a pseudo-class

Give it a go! I've applied this rule to the title above. Hover over it to see it turn blue!

Application on a scatterplot

We can easily apply this technique to a scatterplot. Assign a class to each circle in the SVG area and use :hover to change its appearance:

.circle {
  fill-opacity: .3;
  stroke-width: 2px;
}

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

By default, each circle has a low opacity. On hover, the opacity jumps to 1 and the stroke becomes black — a small but noticeable change. Try it below:

import { data } from "./data";
import "./styles.css";

export default function App() {
  return (
    <svg width={430} height={320}>
      {data.map((d, i) => (
        <circle
          key={i}
          cx={d.x}
          cy={d.y}
          r={12}
          fill={d.color}
          className="circle"
        />
      ))}
    </svg>
  );
}

What property can you change?

There are several visual properties you can tweak to make a hovered point stand out.