Serializable spec

The builders you’ve met so far — createSpec, pipe, geom.*, scale.*, config — are convenience, not substance. Everything they produce is a plain, immutable object made only of objects, arrays, strings, numbers and booleans. A spec holds no functions, no class instances, no DOM references. That means it round-trips through JSON.stringify / JSON.parse unchanged: you can store a spec in a database, send it over the wire, generate it from another language, or write one by hand.

The builder is just sugar

pipe(...) and the geom.* / scale.* / config helpers just assemble and merge a plain object. This call:

import { createSpec, pipe, geom, scale, config } from '@graphysdk/viz-engine';

const spec = pipe(
  createSpec({ x: 'month', y: 'revenue', color: 'product' }),
  geom.line(),
  scale.x(),
  scale.y.continuous({ domainMin: 0 }),
  scale.color.palette(),
  config({ legend: { position: 'bottom' } })
);

produces exactly this object — and JSON.stringify(spec) gives you exactly this JSON (unset fields drop out):

{
  "mapping": { "x": "month", "y": "revenue", "color": "product" },
  "layers": [{ "type": "layer", "geom": "line" }],
  "scales": [
    { "type": "scale", "scaledAesthetic": "x", "scaleType": "inferred" },
    {
      "type": "scale",
      "scaledAesthetic": "y",
      "scaleType": "continuous",
      "domainMin": 0,
      "domainMax": null
    },
    { "type": "scale", "scaledAesthetic": "color", "scaleType": "palette" }
  ],
  "transforms": [],
  "highlights": [],
  "config": { "legend": { "position": "bottom" } }
}

You could paste that JSON into your source and feed it straight to the renderer with no builder in sight. What the builders add is types, defaults and guardrails — autocomplete for aesthetics and params, sensible fallbacks, and a compile-time check that the shape is valid.

How a chart is built — the compile → render pipeline that consumes a spec
Data structure — the table a spec references by column name
Extending — custom geoms, stats and transforms, and the plugins they ship in

Get Started

Core concepts

Chart types

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

The builder is just sugar

Next

​The builder is just sugar

​Next

The builder is just sugar

Next