machines-ui
animated

Scatter

An ASCII scatter plot: x/y points mapped onto a grid, with optional accent points and a linear-trend strip.

Install

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { GraphScatter } from '@fractaldesign/machines-ui';

Preview

[ CORRELATION ]
Scatter plot with 12 points, x 1.2 to 6.8, y 0.8 to 4.1, trend strip below.
<script lang="ts">
	import { GraphScatter, type ScatterPoint } from '@fractaldesign/machines-ui';

	const data: ScatterPoint[] = [
	  { x: 1.2, y: 0.8 },
	  { x: 3.6, y: 2.4, accent: true },
	  { x: 6.8, y: 4.1 }
	];
</script>

<GraphScatter title="CORRELATION" trend {data} />

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`.
data* ScatterPoint[] —Points to plot. x and y are real numbers; the plot scales them.
cols number 60Scene width in columns (excluding y-axis gutter). Default 60.
rows number 14Scene height in rows (excluding x-axis row and optional trend row). Default 14.
trend boolean falseRender a single-row linear trend strip below the plot. Default false.
animated boolean trueAnimate the reveal. Default true. Reduced motion shows the full plot.
speedMs number 60Milliseconds between reveals of new points. Default 60.
label string ''Caption rendered muted under the plot.
class string ''

API

  • class forwarded to the outer element
  • motion runs live; set animated={false} to freeze
  • a11y honours prefers-reduced-motion

Types

NameKindDescription
ScatterPointinterfaceA single point in the scatter plot.
Seginterface

Theming

CSS custom properties this component reads.

  • --graph-accent
  • --graph-accent-2
  • --text-muted
  • --text-primary
  • --text-secondary

Related

Built from

src/lib/components/animated/GraphScatter.svelte

machines-ui