michi-vz chart by chart: scatter and bubble

This is part 4 of 9 in a series touring all 22 michi-vz chart types, family by family. The series starts in Introducing @michi-vz. Part 3 covered pie, donut and treemap.

Fourth stop: circles. With axes they show correlation; without axes they let size do all the talking. Every michi-vz chart takes the same props in React, Vue, Svelte, Angular and plain HTML; the first chart below shows all four flavours, the rest show React to keep things short.

The scatter plot

Two variables, one point per observation: the scatter plot is how you see correlation, clusters, and the outlier that ruins your narrative. A third variable can ride along as bubble size via d, and getContext() hands you the Pearson correlation without any extra math on your side:

One object per point; d is optional and drives the bubble size scale:

const data = [
  { label: "core", x: 1200, y: 45, d: 18 },
  { label: "react", x: 950, y: 38, d: 12 },
  // ...one point per observation...
];

import { ScatterChart } from "@michi-vz/react";

<ScatterChart
  dataSet={data}
  width={640}
  height={320}
  pointLabels
/>;

• showCrosshair with crosshairLabels tracks the hovered point with axis readouts; clicking pins the tooltip.
• dScaleLegend renders a bubble-size reference legend so readers can decode the third variable.
• timeline steps the cloud through per-point date values, one snapshot per period.

Full props on the scatter plot API page.

The bubble chart

Drop the axes and let size do all the talking. The bubble chart packs circles into a cluster with a deterministic force layout, areas honestly proportional to value. Like the treemap, each bubble can split into a realized core and an untapped ring via partial:

One entry per bubble; add partial for the realized/untapped split:

const data = [
  { label: "core", value: 120 },
  { label: "react", value: 95 },
  // ...value sets the circle AREA, not the radius...
];

import { BubbleChart } from "@michi-vz/react";

<BubbleChart
  dataSet={data}
  width={640}
  height={360}
/>;

• gravity tightens or loosens the cluster; padding sets the gap between circles.
• layoutMode: "async" runs the same deterministic settle in 12 ms slices, so thousands of bubbles never freeze the page.
• The layout is identical on every render, so the chart does not jiggle between updates.

Full props on the bubble chart API page.

Next in the series: gauge, radar and radial tree.