fractalsvelte mascot fractalsvelte fractalsvelte
fractalsvelte mascot fractalsvelte fractalsvelte

Svelte 5 component · machines-ui · Animated

GraphScatter

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

All components Source

Install

GraphScatter is a Svelte 5 animated ASCII scatter component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.

pnpm add @fractaldesign/machines-ui

Import

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

Usage

Example 
<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

NameTypeDefault
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 Scene width in columns (excluding y-axis gutter). Default 60.60
rows number Scene height in rows (excluding x-axis row and optional trend row). Default 14.14
trend boolean Render a single-row linear trend strip below the plot. Default false.false
animated boolean Animate the reveal. Default true. Reduced motion shows the full plot.true
speedMs number Milliseconds between reveals of new points. Default 60.60
label string Caption rendered muted under the plot.''
class string ''

Related components

GraphScope An oscilloscope window that scrolls a data series leftwards, drawing each column as a line or as an area…GraphSequence An animated sequence diagram: four participants (Browser, Server, DB, Worker) on lifelines, with request…GraphSpinners A framed text spinner with built-in or custom frames and an optional loading label.GraphState A four-state machine drawn in ASCII — ready, think, act, done — with the current state and its outgoing…GraphStream A live sparkline with the current value in large type, appending a new reading on an interval and counting…GraphSurya A sun wheel with breathing rays that rises from the horizon to its apex and sets again, forever; purely…