plot

Compositional visualization library inspired by Algebra of Graphics

Inspired by Daniel Slutsky's Implementing the Algebra of Graphics in Clojure - Part 1 and AlgebraOfGraphics.

Files

FileDescription
.editorconfigEditor formatting configuration
.gitignoreGit ignore rules for build artifacts and dependencies
.tool-versionsasdf tool versions (Zig, Kit)
LICENSEMIT license file
README.mdThis file
examples/chartjs/animated-chart.kitExample: animated chart
examples/chartjs/bar-chart.kitExample: bar chart
examples/chartjs/candlestick-chart.kitExample: candlestick chart
examples/chartjs/donut-chart.kitExample: donut chart
examples/chartjs/legend-positions.kitExample: legend positions
examples/chartjs/line-chart.kitExample: line chart
examples/chartjs/ohlc-chart.kitExample: ohlc chart
examples/chartjs/pie-chart.kitExample: pie chart
examples/chartjs/radar-chart.kitExample: radar chart
examples/chartjs/scatter.kitExample: scatter
examples/observable/bar-chart.kitExample: bar chart
examples/observable/candlestick-chart.kitExample: candlestick chart
examples/observable/heatmap.kitExample: heatmap
examples/observable/line-chart.kitExample: line chart
examples/observable/ohlc-chart.kitExample: ohlc chart
examples/observable/scatter.kitExample: scatter
examples/observable/violin-chart.kitExample: violin chart
examples/plotly/bar-chart.kitExample: bar chart
examples/plotly/bubble-chart.kitExample: bubble chart
examples/plotly/candlestick-chart.kitExample: candlestick chart
examples/plotly/error-bars.kitExample: error bars
examples/plotly/funnel-chart.kitExample: funnel chart
examples/plotly/grouped-bar.kitExample: grouped bar
examples/plotly/heatmap.kitExample: heatmap
examples/plotly/line-chart.kitExample: line chart
examples/plotly/ohlc-chart.kitExample: ohlc chart
examples/plotly/pie-chart.kitExample: pie chart
examples/plotly/radar-chart.kitExample: radar chart
examples/plotly/scatter.kitExample: scatter
examples/plotly/stacked-area.kitExample: stacked area
examples/plotly/treemap-chart.kitExample: treemap chart
examples/plotly/violin-chart.kitExample: violin chart
examples/plotly/waterfall-chart.kitExample: waterfall chart
examples/svg/biplot.kitExample: PCA biplot (SVG with custom config)
examples/svg/bar-chart.kitExample: bar chart
examples/svg/candlestick-chart.kitExample: candlestick chart
examples/svg/donut-chart.kitExample: donut chart
examples/svg/funnel-chart.kitExample: funnel chart
examples/svg/heatmap.kitExample: heatmap
examples/svg/line-chart.kitExample: line chart
examples/svg/multi-point.kitExample: multi point
examples/svg/multi-series.kitExample: multi series
examples/svg/ohlc-chart.kitExample: ohlc chart
examples/svg/pie-chart.kitExample: pie chart
examples/svg/rainbow-chart.kitExample: rainbow chart
examples/svg/scatter.kitExample: scatter
examples/svg/waterfall-chart.kitExample: waterfall chart
examples/vega-lite/biplot.kitExample: PCA biplot (Vega-Lite)
examples/vega-lite/bar-chart.kitExample: bar chart
examples/vega-lite/bubble-chart.kitExample: bubble chart
examples/vega-lite/candlestick-chart.kitExample: candlestick chart
examples/vega-lite/density-chart.kitExample: density chart
examples/vega-lite/donut-chart.kitExample: donut chart
examples/vega-lite/faceted.kitExample: faceted
examples/vega-lite/funnel-chart.kitExample: funnel chart
examples/vega-lite/heatmap.kitExample: heatmap
examples/vega-lite/histogram.kitExample: histogram
examples/vega-lite/layered.kitExample: layered
examples/vega-lite/line-chart.kitExample: line chart
examples/vega-lite/lollipop-chart.kitExample: lollipop chart
examples/vega-lite/multi-series.kitExample: multi series
examples/vega-lite/ohlc-chart.kitExample: ohlc chart
examples/vega-lite/pie-chart.kitExample: pie chart
examples/vega-lite/rainbow-chart.kitExample: rainbow chart
examples/vega-lite/scatter.kitExample: scatter
examples/vega-lite/strip-chart-horizontal.kitExample: strip chart horizontal
examples/vega-lite/strip-chart.kitExample: strip chart
examples/vega-lite/violin-chart.kitExample: violin chart
examples/vega-lite/waterfall-chart.kitExample: waterfall chart
kit.tomlPackage manifest with metadata and dependencies
src/backends/chartjs.kitChart.js backend for kit-plot
src/backends/observable.kitObservable Plot backend for kit-plot
src/backends/plotly.kitPlotly.js backend for kit-plot
src/backends/svg.kitSVG backend for kit-plot - uses kit-svg for SVG generation
src/backends/vega-lite.kitVega-Lite JSON backend for kit-plot
src/plot.kitKit Plot - Compositional Visualization Library
src/shared.kitShared helper functions for kit-plot backends
src/types.kitCore type definitions for kit-plot
tests/integration.test.kitTests for integration
tests/plot.test.kitTests for plot

Dependencies

  • kit-svg - Type-safe SVG generation library for Kit
  • kit-dataframe - High-performance columnar DataFrame for Kit with SIMD acceleration
  • kit-linear-algebra - High-performance linear algebra via BLAS/LAPACK (uses Accelerate on macOS, OpenBLAS on Linux)
  • kit-ticker - Well-known ticker symbols for stocks, ETFs, indexes, and crypto
  • kit-ta-lib - A TA-Lib wrapper for Kit

Installation

kit add gitlab.com/kit-lang/packages/kit-plot.git

Usage

import Kit.Plot as Plot

Quick Start

import Kit.Plot as Plot

# Create data
data = [
  [("x", Plot.VFloat 1.0),  ("y", Plot.VFloat 2.0)], 
  [("x", Plot.VFloat 2.0),  ("y", Plot.VFloat 4.0)], 
  [("x", Plot.VFloat 3.0),  ("y", Plot.VFloat 3.0)]
]

# Build a scatter plot using pipes
spec = data
  |> Plot.data
  |> Plot.x "x"
  |> Plot.y "y"
  |> Plot.scatter
  |> Plot.to-spec
  |> Plot.title "My Scatter Plot"

# Output as Vega-Lite JSON
Plot.print-json spec

# Or output as SVG
Plot.print-svg spec

Core Concepts

Layer-Based Composition

Everything starts with a Layer - a single visualization of data with mappings and visual marks.

# Create a layer
layer = data
  |> Plot.data       # Attach data
  |> Plot.x "x"      # Map x aesthetic
  |> Plot.y "y"      # Map y aesthetic
  |> Plot.scatter    # Set visual mark

Aesthetic Mappings

Map data fields to visual properties:

FunctionDescription
Plot.xX-axis position
Plot.yY-axis position
Plot.colorColor encoding
Plot.sizeSize encoding
Plot.shapeShape encoding
Plot.alphaOpacity encoding
Plot.fillFill color
Plot.strokeStroke color
Plot.labelText labels

Visual Marks

FunctionDescription
Plot.scatterScatter plot (points)
Plot.lineLine chart
Plot.barBar chart
Plot.areaArea chart
Plot.histogramHistogram
Plot.boxplotBox plot
Plot.textText marks
Plot.ruleReference lines
Plot.rainbowRainbow chart (log-regression colored bands)
Plot.rainbow-with-configRainbow chart with custom config
Plot.biplotPCA biplot (scores + loading arrows)
Plot.biplot-with-configPCA biplot with custom config

Backend Support Matrix

Chart TypeVega-LiteSVGPlotlyChart.jsObservable
Scatter
Line
Bar
Area
Histogram
Boxplot
Text
Rule
Pie / Donut
Heatmap
Lollipop
Density
Strip
Violin
Waterfall
Funnel
Candlestick
OHLC
Error Bar
Radar
Treemap
Rainbow
Biplot

Examples

Line Chart

time-series = [
  [("month", Plot.VInt 1),  ("sales", Plot.VFloat 120.0)], 
  [("month", Plot.VInt 2),  ("sales", Plot.VFloat 150.0)], 
  [("month", Plot.VInt 3),  ("sales", Plot.VFloat 180.0)]
]

spec = time-series
  |> Plot.data
  |> Plot.x "month"
  |> Plot.y "sales"
  |> Plot.line
  |> Plot.to-spec
  |> Plot.title "Monthly Sales"
  |> Plot.x-label "Month"
  |> Plot.y-label "Sales ($)"

Bar Chart

categories = [
  [("category", Plot.VString "A"),  ("value", Plot.VFloat 45.0)], 
  [("category", Plot.VString "B"),  ("value", Plot.VFloat 72.0)], 
  [("category", Plot.VString "C"),  ("value", Plot.VFloat 58.0)]
]

spec = categories
  |> Plot.data
  |> Plot.x "category"
  |> Plot.y "value"
  |> Plot.bar
  |> Plot.to-spec
  |> Plot.title "Category Comparison"

Layered Plot

Overlay multiple visual marks:

scatter-layer = data
  |> Plot.data
  |> Plot.x "x"
  |> Plot.y "y"
  |> Plot.scatter

line-layer = data
  |> Plot.data
  |> Plot.x "x"
  |> Plot.y "y"
  |> Plot.line

spec = Plot.overlay [scatter-layer, line-layer]
  |> Plot.title "Scatter with Line"

Faceted Plot

Create small multiples:

spec = grouped-data
  |> Plot.data
  |> Plot.x "x"
  |> Plot.y "y"
  |> Plot.scatter
  |> Plot.to-spec
  |> Plot.facet-wrap "group"
  |> Plot.title "By Group"

Rainbow Chart

Overlay logarithmically-spaced colored bands on price data to indicate valuation zones:

price-data = [
  [("date", Plot.VString "2020-01-01"),  ("price", Plot.VFloat 7200.0)],
  [("date", Plot.VString "2021-01-01"),  ("price", Plot.VFloat 29000.0)],
  [("date", Plot.VString "2022-01-01"),  ("price", Plot.VFloat 47000.0)],
  [("date", Plot.VString "2023-01-01"),  ("price", Plot.VFloat 16500.0)],
  [("date", Plot.VString "2024-01-01"),  ("price", Plot.VFloat 42000.0)]
]

spec = price-data
  |> Plot.data
  |> Plot.x "date"
  |> Plot.y "price"
  |> Plot.rainbow
  |> Plot.to-spec
  |> Plot.title "Bitcoin Rainbow Chart"

The default config uses 9 bands from "Basically a Fire Sale" to "Maximum Bubble Territory". Customize with rainbow-with-config:

cfg = Plot.default-rainbow-config
spec = price-data
  |> Plot.data
  |> Plot.x "date"
  |> Plot.y "price"
  |> Plot.rainbow-with-config cfg
  |> Plot.to-spec

PCA Biplot

Overlay PCA observation scores (scatter points) with variable loadings (arrows). PCA is computed via power iteration on the covariance matrix -- no external dependencies required.

iris-data = [
  [("sepal-length", Plot.VFloat 5.1),  ("sepal-width", Plot.VFloat 3.5),  ("petal-length", Plot.VFloat 1.4),  ("petal-width", Plot.VFloat 0.2),  ("species", Plot.VString "setosa")],
  [("sepal-length", Plot.VFloat 7.0),  ("sepal-width", Plot.VFloat 3.2),  ("petal-length", Plot.VFloat 4.7),  ("petal-width", Plot.VFloat 1.4),  ("species", Plot.VString "versicolor")],
  [("sepal-length", Plot.VFloat 6.3),  ("sepal-width", Plot.VFloat 3.3),  ("petal-length", Plot.VFloat 6.0),  ("petal-width", Plot.VFloat 2.5),  ("species", Plot.VString "virginica")]
]

spec = iris-data
  |> Plot.data
  |> Plot.color "species"
  |> Plot.biplot
  |> Plot.to-spec
  |> Plot.title "Iris PCA Biplot"

No Plot.x/Plot.y needed -- axes are auto-set to PC1/PC2 with variance labels. Fields mapped to aesthetics (color, label) are excluded from PCA automatically. Customize with biplot-with-config:

cfg = {
  standardize: true,
  pc-x: 1,
  pc-y: 2,
  show-loadings: true,
  loading-scale: 1.2,
  arrow-color: "#0066cc",
  label-color: "#222222",
  num-iterations: 100,
  fields: []
}

spec = iris-data
  |> Plot.data
  |> Plot.color "species"
  |> Plot.biplot-with-config cfg
  |> Plot.to-spec

Output Backends

Vega-Lite JSON

# Get JSON string
json = Plot.to-vega-lite spec

# Print to stdout
Plot.print-json spec

# Get embeddable HTML
html = Plot.to-vega-lite-html spec

SVG

# Get SVG string
svg = Plot.to-svg spec

# Print to stdout
Plot.print-svg spec

# Custom configuration
svg = Plot.to-svg-with-config spec config

API Design

All multi-argument functions use data-first signatures for pipe compatibility:

# The layer/spec is always the first argument
Plot.x layer "field"      # Layer -> String -> Layer
Plot.title spec "text"    # PlotSpec -> String -> PlotSpec

# This enables clean pipe chains
data |> Plot.data |> Plot.x "x" |> Plot.y "y" |> Plot.scatter

License

MIT License - see LICENSE for details.

Third-Party Licenses

kit-plot generates output for several third-party visualization libraries. These libraries are not bundled with kit-plot but are loaded via CDN in the generated HTML output:

LibraryLicense
Chart.jsMIT License
Vega-LiteBSD 3-Clause License
Plotly.jsMIT License
Observable PlotISC License

Exported Functions & Types

value-to-json

Convert a plot Value to a JSONValue.

Value -> JSONValue

value-to-json (VInt 42)  # => JSONInt 42
value-to-json (VString "hello")  # => JSONString "hello"

lookup-field

Look up a field value in a data row by field name.

List (String, Value) -> String -> Option Value

row = [("x", VInt 10), ("y", VInt 20)]
lookup-field row "x"  # => Some (VInt 10)
lookup-field row "z"  # => None

has-field?

Check if a data row has a specific field.

List (String, Value) -> String -> Bool

row = [("x", VInt 10)]
has-field? row "x"  # => true
has-field? row "z"  # => false

get-field-value

Get a field value as JSONValue, defaulting to JSONNull if not found.

List (String, Value) -> String -> JSONValue

row = [("x", VInt 10)]
get-field-value row "x"  # => JSONInt 10
get-field-value row "z"  # => JSONNull

row-to-json

Convert a data row to a JSONObject.

List (String, Value) -> JSONValue

row = [("x", VInt 10), ("y", VInt 20)]
row-to-json row  # => JSONObject [("x", JSONInt 10), ("y", JSONInt 20)]

dataset-to-json

Convert a dataset (list of rows) to a JSONArray.

List (List (String, Value)) -> JSONValue

data = [[("x", VInt 1)], [("x", VInt 2)]]
dataset-to-json data  # => JSONArray [JSONObject [...], ...]

extract-values

Extract values from a field as a JSONArray.

List (List (String, Value)) -> String -> JSONValue

data = [[("x", VInt 1)], [("x", VInt 2)], [("y", VInt 3)]]
extract-values data "x"  # => JSONArray [JSONInt 1, JSONInt 2]

extract-values-list

Extract values as a list (for internal processing).

List (List (String, Value)) -> String -> List JSONValue

extract-unique-values

Extract unique values from a field as a JSONArray.

List (List (String, Value)) -> String -> JSONValue

data = [[("x", VString "a")], [("x", VString "b")], [("x", VString "a")]]
extract-unique-values data "x"  # => JSONArray [JSONString "a", JSONString "b"]

get-field-for-channel

Get the field name for a specific aesthetic channel from mappings.

List AesMapping -> AesChannel -> Option String

mappings = [{channel: AesX, field: "date"}, {channel: AesY, field: "value"}]
get-field-for-channel mappings AesX  # => Some "date"
get-field-for-channel mappings AesSize  # => None

get-x-field

Get x field name from aesthetic mappings, defaulting to "x".

List AesMapping -> String

get-y-field

Get y field name from aesthetic mappings, defaulting to "y".

List AesMapping -> String

get-color-field

Get color field name from aesthetic mappings (optional).

List AesMapping -> Option String

get-size-field

Get size field name from aesthetic mappings (optional).

List AesMapping -> Option String

get-series-color

Get a color from the palette by index. Falls back to primary color if index is out of bounds.

Palette -> Int -> String

palette = {primary: "#000", colors: ["#f00", "#0f0", "#00f"], ...}
get-series-color palette 0  # => "#f00"
get-series-color palette 99  # => "#000"

build-object-optional

Build a JSONObject, filtering out pairs where the value is None. Useful for constructing JSON with optional fields.

List (String, Option JSONValue) -> JSONValue

build-object-optional [
  ("name", Some (JSONString "test")),
  ("age", None)
]
# => JSONObject [("name", JSONString "test")]

build-object-nonempty

Build a JSONObject from a list of key-value pairs. Filters out pairs where the value is an empty string (for string values).

List (String, JSONValue) -> JSONValue

jstring

Convenience: wrap a string in JSONString.

String -> JSONValue

jint

Convenience: wrap an int in JSONInt.

Int -> JSONValue

jfloat

Convenience: wrap a float in JSONFloat.

Float -> JSONValue

jbool

Convenience: wrap a bool in JSONBool.

Bool -> JSONValue

jarray

Convenience: create a JSONArray.

List JSONValue -> JSONValue

jobject

Convenience: create a JSONObject.

List (String, JSONValue) -> JSONValue

compute-log-regression

Compute logarithmic regression coefficients (a, b) for data points. Fits log(y) = a * ln(x_index + 1) + b via least-squares. Returns (a, b) as a tuple.

[Float] -> (Float, Float)

compute-rainbow-bands

Compute rainbow band boundaries for each data point. Given regression params (a, b), number of bands, and a spread factor, returns a list of (regression-value, [band-boundary]) for each x index. Each element is a list of (num-bands + 1) boundary values evenly spaced in log space.

(Float, Float) -> Int -> Float -> Int -> [(Float, [Float])]

is-value-numeric?

Check if a Value is numeric (Int or Float).

Value -> Bool

value-to-float-num

Convert a Value to Float. Returns 0.0 for non-numeric values.

Value -> Float

extract-numeric-fields

Identify numeric field names from the first data row.

DataRow -> [String]

extract-numeric-matrix

Extract a matrix of floats from a dataset for given field names. Returns [[Float]] where each inner list is a row of values.

DataSet -> [String] -> [[Float]]

vec-dot

Dot product of two vectors.

[Float] -> [Float] -> Float

vec-norm

Euclidean norm of a vector.

[Float] -> Float

vec-normalize

Normalize a vector to unit length.

[Float] -> [Float]

vec-scale

Scalar * vector.

Float -> [Float] -> [Float]

vec-sub

Vector subtraction: a - b.

[Float] -> [Float] -> [Float]

mat-vec-mul

Matrix-vector multiplication: mat * vec. mat is [[Float]] (list of rows), vec is [Float].

[[Float]] -> [Float] -> [Float]

compute-column-means

Compute column-wise means of a matrix.

[[Float]] -> [Float]

compute-column-stds

Compute column-wise standard deviations of a matrix (given means).

[[Float]] -> [Float] -> [Float]

center-matrix

Center a matrix by subtracting column means from each row.

[[Float]] -> [Float] -> [[Float]]

standardize-matrix

Standardize a centered matrix by dividing by column standard deviations.

[[Float]] -> [Float] -> [[Float]]

compute-covariance

Compute the covariance matrix from a centered matrix. Returns [[Float]] of size p x p.

[[Float]] -> [[Float]]

deflate-matrix

Remove an eigenvector's contribution from a matrix: A' = A - lambda * v * vT.

[[Float]] -> Float -> [Float] -> [[Float]]

power-iteration

Extract the dominant eigenvector via power iteration. Returns (eigenvalue, eigenvector).

[[Float]] -> Int -> (Float, [Float])

compute-pca

Full PCA pipeline: extract fields, center, [standardize], covariance, power iteration. Returns {scores: [[Float]], loadings: [[Float]], variance-pct: [Float], field-names: [String]}.

DataSet -> BiplotConfig -> [String] -> {scores: [[Float]], loadings: [[Float]], variance-pct: [Float], field-names: [String]}

from-int

Convert an integer to a Value.

Int -> Value

from-float

Convert a float to a Value.

Float -> Value

from-string

Convert a string to a Value.

String -> Value

from-bool

Convert a boolean to a Value.

Bool -> Value

null-value

The null value constant.

is-null?

Check if a value is null.

Value -> Bool

is-numeric?

Check if a value is numeric (int or float).

Value -> Bool

value-to-int

Extract an integer from a Value, if present.

Value -> Option Int

value-to-float

Extract a float from a Value, converting ints if needed.

Value -> Option Float

row

Create a data row from a list of field/value pairs.

[(String, Value)] -> DataRow

get-field

Get a field value from a data row by key.

String -> DataRow -> Option Value

empty-dataset

An empty dataset with no rows.

from-rows

Create a dataset from a list of rows.

[DataRow] -> DataSet

row-count

Get the number of rows in a dataset.

DataSet -> Int

data

Create a layer from a dataset. Entry point for the pipe API.

DataSet -> Layer

layer

An empty layer constant.

add-mapping

Add an aesthetic mapping to a layer.

Layer -> AesChannel -> String -> Layer

set-visual

Set the visual mark type for a layer.

Visual -> Layer -> Layer

set-stat

Set the statistical transformation for a layer.

Stat -> Layer -> Layer

add-scale

Add a scale to a layer for a specific channel.

Layer -> AesChannel -> Scale -> Layer

layer-label

Set the label (series name) for a layer. Used for legends.

Layer -> String -> Layer

get-mapping

Get an aesthetic mapping from a layer by channel.

Layer -> AesChannel -> Option AesMapping

has-mapping?

Check if a layer has a mapping for a channel.

Layer -> AesChannel -> Bool

get-mapped-field

Get the field name mapped to a channel, if present.

Layer -> AesChannel -> Option String

x

Map a field to the X-axis position.

Layer -> String -> Layer

y

Map a field to the Y-axis position.

Layer -> String -> Layer

color

Map a field to color encoding.

Layer -> String -> Layer

size

Map a field to size encoding.

Layer -> String -> Layer

shape

Map a field to shape encoding.

Layer -> String -> Layer

alpha

Map a field to opacity encoding.

Layer -> String -> Layer

label

Map a field to text labels.

Layer -> String -> Layer

fill

Map a field to fill color.

Layer -> String -> Layer

stroke

Map a field to stroke color.

Layer -> String -> Layer

scatter

Set the visual mark to scatter (points).

Layer -> Layer

scatter-sized

Set the visual mark to scatter with a specific size.

Layer -> Float -> Layer

bubble

Set the visual mark to bubble chart (scatter with data-driven size). Use with the size combinator to map a field to bubble size.

Layer -> Layer

line

Set the visual mark to line.

Layer -> Layer

line-width

Set the visual mark to line with a specific width.

Layer -> Float -> Layer

bar

Set the visual mark to bar.

Layer -> Layer

bar-position

Set the visual mark to bar with a specific position adjustment.

Layer -> BarPosition -> Layer

bar-grouped

Set the visual mark to grouped (dodged) bar for side-by-side comparison.

Layer -> Layer

bar-stacked-fill

Set the visual mark to stacked bar (normalized to 100%).

Layer -> Layer

area

Set the visual mark to area.

Layer -> Layer

area-stacked

Set the visual mark to stacked area.

Layer -> Layer

area-fill

Set the visual mark to normalized stacked area (100% fill).

Layer -> Layer

histogram

Set the visual mark to histogram.

Layer -> Layer

histogram-bins

Set the visual mark to histogram with a specific number of bins.

Layer -> Int -> Layer

boxplot

Set the visual mark to boxplot.

Layer -> Layer

text

Set the visual mark to text.

Layer -> Layer

rule

Set the visual mark to rule (reference line).

Layer -> Layer

pie

Set the visual mark to pie chart.

Layer -> Layer

donut

Set the visual mark to donut chart (pie with inner radius).

Layer -> Layer

donut-with-radius

Set the visual mark to donut chart with custom inner radius.

Layer -> Float -> Layer

heatmap

Set the visual mark to heatmap.

Layer -> Layer

heatmap-with-scheme

Set the visual mark to heatmap with a specific color scheme.

Layer -> ColorScheme -> Layer

lollipop

Set the visual mark to lollipop (dot + stem).

Layer -> Layer

lollipop-sized

Set the visual mark to lollipop with custom dot size.

Layer -> Float -> Layer

density

Set the visual mark to density plot (kernel density estimation).

Layer -> Layer

density-bandwidth

Set the visual mark to density plot with custom bandwidth.

Layer -> Float -> Layer

strip

Set the visual mark to strip plot (categorical scatter).

Layer -> Layer

jitter

Set the visual mark to strip plot with jitter for overlapping points.

Layer -> Float -> Layer

violin

Set the visual mark to violin plot (distribution shape by category).

Layer -> Layer

violin-bandwidth

Set the visual mark to violin plot with custom bandwidth.

Layer -> Float -> Layer

waterfall

Set the visual mark to waterfall chart (with connectors).

Layer -> Layer

waterfall-no-connectors

Set the visual mark to waterfall chart without connectors.

Layer -> Layer

funnel

Set the visual mark to funnel chart (vertical orientation).

Layer -> Layer

funnel-horizontal

Set the visual mark to funnel chart with horizontal orientation.

Layer -> Layer

candlestick

Set the visual mark to candlestick chart with default field names (open, high, low, close).

Layer -> Layer

candlestick-fields

Set the visual mark to candlestick chart with custom field names.

Layer -> String -> String -> String -> String -> Layer

ohlc

Set the visual mark to OHLC bar chart with default field names (open, high, low, close).

Layer -> Layer

ohlc-fields

Set the visual mark to OHLC bar chart with custom field names.

Layer -> String -> String -> String -> String -> Layer

error-bar

Set the visual mark to error bars (symmetric error using a single error field). Displays scatter points with vertical error bars.

Layer -> String -> Layer

error-bar-asymmetric

Set the visual mark to asymmetric error bars (different upper and lower errors).

Layer -> String -> String -> Layer

radar

Set the visual mark to radar/spider chart. The axes parameter lists the field names for each axis. Supported by Chart.js (native) and Plotly (scatterpolar).

Layer -> [String] -> Layer

radar-with-opacity

Set the visual mark to radar chart with custom fill opacity.

Layer -> [String] -> Float -> Layer

treemap

Set the visual mark to treemap for hierarchical data. Requires id-field (unique identifier), parent-field (parent id, empty string for root), and value-field (size of each node). Supported by Plotly (native treemap type).

Layer -> String -> String -> String -> Layer

treemap-with-labels

Set the visual mark to treemap with custom label field.

Layer -> String -> String -> String -> String -> Layer

rainbow

Set the visual mark to rainbow chart with default 9-band Bitcoin-style configuration. Overlays logarithmic regression bands on price data to indicate valuation zones.

Layer -> Layer

rainbow-with-config

Set the visual mark to rainbow chart with custom configuration.

Layer -> RainbowConfig -> Layer

biplot

Set the visual mark to PCA biplot with default configuration. Auto-computes PCA on all numeric columns, excluding aesthetic-mapped fields. No Plot.x/Plot.y needed — axes are set to PC1/PC2 with variance labels.

Layer -> Layer

biplot-with-config

Set the visual mark to PCA biplot with custom configuration.

Layer -> BiplotConfig -> Layer

stat-identity

Apply identity transformation (no change).

Layer -> Layer

stat-count

Apply count aggregation.

Layer -> Layer

stat-bin

Apply binning transformation.

Layer -> Layer

stat-bin-n

Apply binning transformation with a specific number of bins.

Layer -> Int -> Layer

stat-smooth

Apply LOESS smoothing transformation.

Layer -> Layer

stat-smooth-linear

Apply linear regression smoothing.

Layer -> Layer

stat-smooth-loess

Apply LOESS smoothing transformation.

Layer -> Layer

scale-x-linear

Set X-axis to linear scale.

Layer -> Layer

scale-x-log

Set X-axis to logarithmic scale.

Layer -> Layer

scale-x-sqrt

Set X-axis to square root scale.

Layer -> Layer

scale-x-time

Set X-axis to time scale.

Layer -> Layer

scale-y-linear

Set Y-axis to linear scale.

Layer -> Layer

scale-y-log

Set Y-axis to logarithmic scale.

Layer -> Layer

scale-y-sqrt

Set Y-axis to square root scale.

Layer -> Layer

scale-y-time

Set Y-axis to time scale.

Layer -> Layer

scale-color

Set color scale with a specific scheme.

Layer -> ColorScheme -> Layer

scale-color-categorical

Set color scale to categorical (category10).

Layer -> Layer

scale-color-viridis

Set color scale to viridis.

Layer -> Layer

scale-color-blues

Set color scale to blues.

Layer -> Layer

scale-color-greens

Set color scale to greens.

Layer -> Layer

scale-color-reds

Set color scale to reds.

Layer -> Layer

to-spec

Convert a layer to a plot specification.

Layer -> PlotSpec

overlay

Create a plot specification from multiple layers (overlay).

[Layer] -> PlotSpec

layers

Alias for overlay.

[Layer] -> PlotSpec

title

Set the plot title.

PlotSpec -> String -> PlotSpec

subtitle

Set the plot subtitle.

PlotSpec -> String -> PlotSpec

x-label

Set the X-axis label.

PlotSpec -> String -> PlotSpec

y-label

Set the Y-axis label.

PlotSpec -> String -> PlotSpec

dimensions

Set the plot dimensions (width and height).

PlotSpec -> Int -> Int -> PlotSpec

width

Set the plot width.

PlotSpec -> Int -> PlotSpec

height

Set the plot height.

PlotSpec -> Int -> PlotSpec

facet-wrap

Apply wrap faceting by a field.

PlotSpec -> String -> PlotSpec

facet-wrap-cols

Apply wrap faceting with a specific number of columns.

PlotSpec -> String -> Int -> PlotSpec

facet-grid

Apply grid faceting by row and column fields.

PlotSpec -> Option String -> Option String -> PlotSpec

facet-row

Apply row faceting by a field.

PlotSpec -> String -> PlotSpec

facet-col

Apply column faceting by a field.

PlotSpec -> String -> PlotSpec

theme

Set a custom theme for the plot.

PlotSpec -> PlotTheme -> PlotSpec

theme-dark

Apply the dark theme to the plot.

PlotSpec -> PlotSpec

theme-minimal

Apply the minimal theme to the plot.

PlotSpec -> PlotSpec

animate

Enable animation with a specific duration in milliseconds.

PlotSpec -> Int -> PlotSpec

animate-with-easing

Enable animation with duration and easing.

PlotSpec -> Int -> AnimationEasing -> PlotSpec

no-animate

Disable animation.

PlotSpec -> PlotSpec

legend-position

Set the legend position.

PlotSpec -> LegendPosition -> PlotSpec

legend-title

Set the legend title.

PlotSpec -> String -> PlotSpec

legend-font-size

Set the legend font size.

PlotSpec -> Int -> PlotSpec

no-legend

Hide the legend.

PlotSpec -> PlotSpec

to-vega-lite

Convert a plot specification to Vega-Lite JSON string.

PlotSpec -> String

to-vega-lite-html

Convert a plot specification to embeddable HTML with Vega-Lite.

PlotSpec -> String

Print Vega-Lite JSON to stdout.

PlotSpec -> String

Print embeddable HTML to stdout.

PlotSpec -> String

to-svg

Convert a plot specification to SVG string.

PlotSpec -> String

to-svg-with-config

Convert a plot specification to SVG with custom configuration.

PlotSpec -> SvgConfig -> String

Print SVG to stdout.

PlotSpec -> String

to-plotly

Convert a plot specification to Plotly JSON string.

PlotSpec -> String

to-plotly-html

Convert a plot specification to embeddable HTML with Plotly.js.

PlotSpec -> String

Print Plotly JSON to stdout.

PlotSpec -> String

Print Plotly HTML to stdout.

PlotSpec -> String

to-chartjs

Convert a plot specification to Chart.js JSON string.

PlotSpec -> String

to-chartjs-html

Convert a plot specification to embeddable HTML with Chart.js.

PlotSpec -> String

Print Chart.js JSON to stdout.

PlotSpec -> String

Print Chart.js HTML to stdout.

PlotSpec -> String

to-observable

Convert a plot specification to Observable Plot JavaScript.

PlotSpec -> String

to-observable-html

Convert a plot specification to embeddable HTML with Observable Plot.

PlotSpec -> String

Print Observable Plot JavaScript to stdout.

PlotSpec -> String

Print Observable Plot HTML to stdout.

PlotSpec -> String

Value

A data value that can appear in a dataset. Supports integers, floats, strings, booleans, and null values.

Variants

VInt {Int}
VFloat {Float}
VString {String}
VBool {Bool}
VNull

DataRow

A single row of data as a list of field name/value pairs.

DataSet

A dataset consisting of multiple data rows.

AesChannel

Visual channels that data can be mapped to. These represent the different ways data can be encoded visually.

Variants

AesX
AesY
AesColor
AesSize
AesShape
AesAlpha
AesLabel
AesFill
AesStroke

Maps a data field to a visual channel. Used to specify which data column drives which visual property.

BarPosition

Position adjustment for bar charts with grouped data.

Variants

PositionStack
PositionDodge
PositionFill

AreaPosition

Position adjustment for area charts (stacking options).

Variants

AreaNormal
AreaStack
AreaFill

FunnelOrientation

Orientation for funnel charts.

Variants

FunnelVertical
FunnelHorizontal

Error bar configuration for statistical uncertainty visualization.

Radar chart configuration for multi-variable comparison.

Treemap configuration for hierarchical data visualization.

Rainbow chart configuration for logarithmic regression band visualization. Used for Bitcoin-style rainbow charts showing valuation zones.

PCA biplot configuration for overlaying observation scores with variable loadings. Computes PCA via power iteration on the covariance matrix.

default-biplot-config

Default biplot configuration: standardize, show PC1 vs PC2 with loadings.

default-rainbow-config

Default 9-band Bitcoin-style rainbow configuration.

Field mapping for OHLC (Open-High-Low-Close) finance charts. Allows custom field names for candlestick and OHLC bar charts.

default-ohlc-fields

Default OHLC field names (open, high, low, close).

Visual

The visual mark type that determines how data points are rendered. Each variant represents a different chart type with optional configuration.

Variants

VisualScatter {size, alpha}
VisualLine {width}
VisualBar {width, position}
VisualArea {alpha, position}
VisualHistogram {bins}
VisualBoxplot
VisualText {size}
VisualRule {width}
VisualPie {inner-radius}
VisualHeatmap {color-scheme}
VisualLollipop {size}
VisualDensity {bandwidth}
VisualStrip {jitter}
VisualViolin {bandwidth}
VisualWaterfall {show-connectors}
VisualFunnel {orientation}
VisualCandlestick {fields, width}
VisualOHLC {fields, width}
VisualErrorBar {config, width}
VisualRadar {config}
VisualTreemap {config}
VisualRainbow {config}
VisualBiplot {config}

ColorScheme

Color schemes for categorical and continuous color scales.

Variants

Categorical10
Viridis
Blues
Greens
Reds
Oranges
Purples
Greys
CustomColors {_0}

Scale

Scale transformations for mapping data to visual properties.

Variants

ScaleLinear
ScaleLog
ScaleSqrt
ScaleOrdinal
ScaleTime
ScaleColor {ColorScheme}

SmoothMethod

Methods for smoothing/regression in stat-smooth.

Variants

Loess
LinearRegression

Stat

Statistical transformations applied to data before rendering.

Variants

StatIdentity
StatCount
StatBin {bins}
StatSmooth {method}

Facet

Faceting configuration for creating small multiples.

Variants

FacetNone
FacetWrap {field, columns}
FacetGrid {row, col}

A standardized color palette for consistent coloring across all backends. Used for multi-series charts and theming.

default-palette

Default color palette with category10-inspired colors.

dark-palette

Dark theme color palette with brighter colors for dark backgrounds.

minimal-palette

Minimal theme color palette with muted, understated colors.

Theme configuration for plot styling.

default-theme

Default theme with no custom styling.

dark-theme

Dark theme with dark background and light text.

minimal-theme

Minimal theme with clean, simple styling.

AnimationEasing

Easing functions for animations.

Variants

EaseLinear
EaseIn
EaseOut
EaseInOut

Animation configuration for chart transitions.

default-animation

Default animation configuration (enabled with library defaults).

no-animation

No animation configuration.

LegendPosition

Position of the legend relative to the chart.

Variants

LegendTop
LegendBottom
LegendLeft
LegendRight
LegendNone

Legend configuration for customizing appearance and position.

default-legend

Default legend configuration (right position, no title).

A single visualization layer combining data, mappings, and visual mark. Layers can be composed to create complex multi-layer plots.

empty-layer

An empty layer with no data, mappings, or visual.

Complete plot specification ready for rendering. Contains layers, metadata, faceting, theme, animation, and legend configuration.

empty-spec

An empty plot specification with default settings.

PlotError

Errors that can occur during plot construction or rendering.

Variants

InvalidData {message}
MissingMapping {channel}
RenderError {message}
UnsupportedVisual {visual}

Configuration for SVG backend rendering.

default-svg-config

Default SVG configuration with standard dimensions and colors.