Constellation Scatter Plot React component
A scatter plot drawn as a night sky: points twinkle, each segment is joined into a constellation, and pointing at a star lights up its whole group.
About the Constellation Scatter Plot component
Constellation Scatter Plot makes clusters obvious. Points are stars, and each group is joined by the shortest set of lines, so a segment reads as a single shape in the sky rather than a colour in a legend.
Point at any star and its whole constellation lights up while the rest fade back, and the stats at the top follow it. Pills do the same if you want to stay on one group.
When to use it
Use it when grouped points are the story, like customer segments, product clusters or survey groups.
For finding a trend across one set of points, a plain scatter plot with a trend line is clearer.
Installation
Add the Constellation Scatter Plot component to your project with the shadcn CLI. It lands in components/constellation-scatter-plot.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/constellation-scatter-plotProps
<ConstellationScatterPlot /> accepts 10 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Accounts by health" |
| subtitle | string | "Usage against revenue, joined up by segment." |
| groups | { label: string; points: StarPoint[] }[] | GROUPS |
| xLabel | string | "Usage" |
| yLabel | string | "Revenue" |
| color Colour of the constellation in focus. | string | — |
| height Height of the plot, in px. | number | 290 |
| formatX | (value: number) => string | (n) => `${Math.round(n)}%` |
| formatY | (value: number) => string | (n) => `$${Math.round(n)}k` |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Accounts by health"
- subtitlestringDefault: "Usage against revenue, joined up by segment."
- groups{ label: string; points: StarPoint[] }[]Default: GROUPS
- xLabelstringDefault: "Usage"
- yLabelstringDefault: "Revenue"
- color
Colour of the constellation in focus.
string - height
Height of the plot, in px.
numberDefault: 290 - formatX(value: number) => stringDefault: (n) => `${Math.round(n)}%`
- formatY(value: number) => stringDefault: (n) => `$${Math.round(n)}k`
Constellation Scatter Plot FAQ
- How are the lines chosen?
- It builds a minimum spanning tree for each group: the shortest set of lines that reaches every star, which keeps crossings to a minimum.
- How many points work well?
- Up to about 15 per group and 60 in total. Past that the lines start to crowd.
- Can I format the axes?
- Yes, with formatX and formatY, which are also used in the readout.
- What happens with reduced motion?
- The stars stop twinkling. Everything else works the same.
