From values to visuals.

Install the package.

Add Foldkit Viz to your project, then import the modules you need.

bun add @opsydyn/foldkit-viz

Working in this monorepo? Use workspace:* for the dependency. The geometry functions are pure TypeScript and have no D3 dependency.

A scale. A shape. A chart.

Map values into coordinates with two linear scales, then turn the points into an SVG path.

import { linear } from '@opsydyn/foldkit-viz/math/scale';
import { line } from '@opsydyn/foldkit-viz/shape/line';

const values = [10, 45, 23, 88, 67];
const x = linear({ domain: [0, 4], range: [0, 400] });
const y = linear({ domain: [0, 100], range: [200, 0] });

const points = values.map(
  (value, index): readonly [number, number] => [x(index), y(value)],
);
const path = line(points, { curve: 'catmullRom' });
// Use path as the d attribute of an SVG <path>.

In Astro, compute the path in frontmatter and render it directly. No browser JavaScript is needed for a static chart.

---
import { linear } from '@opsydyn/foldkit-viz/math/scale';
import { line } from '@opsydyn/foldkit-viz/shape/line';

const values = [10, 45, 23, 88, 67];
const x = linear({ domain: [0, 4], range: [0, 400] });
const y = linear({ domain: [0, 100], range: [200, 0] });
const points = values.map(
  (value, index): readonly [number, number] => [x(index), y(value)],
);
const path = line(points, { curve: 'catmullRom' });
---
<svg viewBox="0 0 400 200" role="img" aria-label="Sample values">
  <path d={path ?? ''} fill="none" stroke="currentColor" stroke-width="2" />
</svg>

Take the pieces you need.

Compose the chart around your data.

chart/cartesian maps your records through accessors into shared geometry. chart/theme supplies semantic light and dark paints and stable series styles. The optional foldkit/cartesian adapter renders frames, axes, marks, annotations, tooltips, legends and data tables through your parent's builder.

Choose layer order and replace the tooltip with a renderer receiving the original datum. Build colour mappings from stable series IDs before filtering; use symbols or dash patterns alongside colour. CSS variables and custom CSS colours pass through unchanged, with opacity set separately.

These modules are available from Foldkit Viz 0.10.0. Download a live example for an independent project containing the compiled modules, maintained source and captured settings.

Keep exploration in your Model.

Coordinates, bounded viewport navigation and nearest-record inspection are pure workspace APIs. Caller-supplied bounds, explicit gaps and source freshness compose with native Foldkit brush, pan, zoom and pin state; scoped Mount streams acquire browser facts. Explore the Signal desk →

More ways to compose.

Bars, word cloud, text layout and SVG paint are unreleased workspace APIs. Try grouped and stacked bars → Try the word cloud →

Word cloud takes measured text bounds and returns coordinates plus any words that could not fit. Measure fonts in a Command, then render the pure layout as SVG. Text wrapping accepts your measurement function. Paint definitions take caller-owned IDs and colours, including CSS variables.

Keep your model in charge.

For interactive FoldKit charts, keep selections and chart state in your Model, describe interactions with Messages, and update through the normal loop. The primitives compute geometry; your app owns effects and data loading.

The library targets FoldKit 0.167.x to 0.169.x and Effect 4.0.0. Astro integration and application server rendering belong to the separate @opsydyn/astro-foldkit package.