▚termino
~/docs/custom/scatter

▚ScatterChartcustom

Multi-series dot plot with gridlines and legend

~/custom/scatter
live
$ termino scatter — two drifting clusters
· · · · ·
········································
· ● ●● ● · ·
······●·●●······●●●✚··●·················
· ● · ● ● ● ● ✚ · ·
········●●·✚●······●·✚●···●●●✚✚●········
· ● · ●✚✚ ●● ● ·●● ·
·····················●·●·●·····●········
· · · · ·
· · · · ·
0 100
● alpha 0→100
● beta 0→100
grid · gridlines — ✚ on overlap

##API

Points map to cells; `●` per series color. Overlapping points from different series render `✚`. Optional `·` gridlines on both axes, min/max range labels on the bottom row, and a legend with each series' y-range.

properties
proptypedefaultdescription
series{ label, color, points }[]-Series with { x, y } points
width / heightnumber40 / 10Plot area
minX / maxX / minY / maxYnumberautoFixed bounds (auto from data)
gridlines / legendbooleantrueGrid and legend rows

##Keymap

~/keymap
—Display only

##Notes

  • ▸Bounds default to the union of all series — add fixed bounds to compare frames.
  • ▸Cluster drift + grids reads like a live correlation plot.

##Source

Real implementation — this is the code that runs in your terminal.

tsxscatter.tsx
1import { createElement as h, useMemo } from "react";
2import { Canvas } from "./canvas";
3import { renderScatter, type ScatterSeries } from "./chart";
4
5export interface ScatterChartProps {
6  series: ScatterSeries[];
7  width?: number;
8  height?: number;
9  minX?: number;
10  maxX?: number;
11  minY?: number;
12  maxY?: number;
13  gridlines?: boolean;
14  legend?: boolean;
15}
16
17export function ScatterChart({
18  series,
19  width = 40,
20  height = 10,
21  minX,
22  maxX,
23  minY,
24  maxY,
25  gridlines,
26  legend,
27}: Readonly<ScatterChartProps>) {
28  const rows = useMemo(
29    () =>
30      renderScatter(series, width, height, {
31        minX,
32        maxX,
33        minY,
34        maxY,
35        gridlines,
36        legend,
37      }),
38    [series, width, height, minX, maxX, minY, maxY, gridlines, legend],
39  );
40  return h("box", { flexDirection: "column", gap: 0, width }, h(Canvas, { rows, width }));
41}
42
← CandlestickChart
OHLC candles with wicks, up/down colors and index labels
FunnelChart →
Centered shrinking bars with per-stage gradient and percent