Foldkit Viz

Visualisation primitives for FoldKit

Give your
data
shape.

Build expressive charts with Foldkit, the TypeScript frontend framework built on Effect. Pure geometry. Composable SVG. State and interaction you can understand.

Explore Signal Desk All examples
Six stacked activity series across twelve months. Focus a month to read its total in thousands.040k80k120kCoreToolsCommunityJan · 74kJanFeb · 89kFebMar · 74kMarApr · 80kAprMay · 97kMayJun · 104kJunJul · 90kJulAug · 80kAugSep · 99kSepOct · 107kOctNov · 124kNovDec · 130kDec
Built with Foldkit Viz Illustrative data · Hover or focus a month

New / In the workspace

Follow a signal. Find the words.

Explore the primitives
Signal Desk preview: latency over time, with explicit gaps and a supplied interval around estimated observations.Signal Desk preview: latency over time, with explicit gaps and a supplied interval around estimated observations.

Signal Desk

Explore the timeline

A moment in context. Missing observations, supplied intervals and a baseline that stays put.

Word-cloud preview: visualisation vocabulary arranged without overlap and sized by illustrative weight.Word-cloud preview: visualisation vocabulary arranged without overlap and sized by illustrative weight.

Word cloud

Explore the words

Give words their weight. Measured type, deliberate space and a layout you can reshape.

Pure geometry

Scales, shapes and layouts in pure TypeScript. No D3 dependency.

Composable primitives

Start with a scale. Add a shape. Bring your data, colours and creative direction.

Explicit interaction

Build on Foldkit’s model, messages and commands. Trace how your charts behave, test their state, and extend them with confidence.

View all examples
NetworkIllustrative data rendered with Foldkit Viz primitives.ProductDesignEngineeringMarketingOperationsCommunity

Connections

FlowIllustrative data rendered with Foldkit Viz primitives.Web → Sign up: 24Web → Active: 18Web → Purchase: 10Mobile → Sign up: 12Mobile → Active: 22Mobile → Return: 12API → Active: 10API → Purchase: 18Other → Purchase: 6Other → Return: 16WebMobileAPIOtherSign upActivePurchaseReturn

Where it flows

ScatterIllustrative data rendered with Foldkit Viz primitives.02550751000255075100

See relationships

GeographicIllustrative data rendered with Foldkit Viz primitives.NorwayFranceSwedenBelarusUkrainePolandAustriaHungaryMoldovaRomaniaLithuaniaLatviaEstoniaGermanyBulgariaGreeceAlbaniaCroatiaSwitzerlandLuxembourgBelgiumNetherlandsPortugalSpainIrelandItalyDenmarkUnited KingdomSloveniaFinlandSlovakiaCzechiaBosnia and Herz.MacedoniaSerbiaMontenegroEurope · Illustrative colour bands

Place matters

LineIllustrative data rendered with Foldkit Viz primitives.02550751000255075100

Choose your curve

HistogramIllustrative data rendered with Foldkit Viz primitives.0102030405002550751000 samples0 samples2 samples21 samples24 samples47 samples38 samples50 samples21 samples17 samples0 samples0 samples0 samples0 samples0 samples0 samples0 samples0 samples0 samples0 samples0 samples0 samples0 samples0 samples0 samples0 samples0 samples0 samples7 samples26 samples31 samples49 samples45 samples32 samples23 samples7 samples0 samples0 samples0 samples0 samples

Find the distribution

Real primitives. Illustrative data. Yours to make your own.

From values to visuals.

Start with a scale. Add a shape. Make it yours.

Read the quick start 
const x = linear({ domain: [0, 10], range: [0, 400] });
const path = line(points, { curve: 'catmullRom' });