Playground — Statistical Annotations — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/playground/statistical-annotations

Statistical Annotations Playground

Experiment with LOESS smoothing, streaming anomaly detection, and forecast/anomaly overlays on LineChart. Adjust the controls below each chart to see how the parameters affect the visualization, then copy the generated code.

LOESS Smoothing

LOESS fits a locally-weighted regression at each data point, producing a smooth curve that follows non-linear patterns. The bandwidthparameter controls how much of the data influences each local fit — low values track closely, high values smooth aggressively. Toggle the linear comparison to see how LOESS captures structure that a straight line misses.

Dataset:

LOESS

Bandwidth

LOESS Color

#8b5cf6

LOESS Width

Show Linear

Points

Point Radius

Point Opacity

Layout

Show Grid

Generated Code

JSX

import { Scatterplot } from "semiotic" const data = [ { "x": 1, "y": 5 }, { "x": 2, "y": 8 }, { "x": 3, "y": 14 }, { "x": 4, "y": 11 } // ...20 points ] <Scatterplot data={data} xAccessor="x" yAccessor="y" annotations={[ { type: "trend", method: "loess", label: "LOESS" }, { type: "trend", method: "linear", color: "#94a3b8", strokeDasharray: "4,4", label: "Linear" } ]} />

Streaming Anomaly Detection

The anomaly band recomputes from the current window buffer each frame. The threshold slider controls how many standard deviations define the normal range — lower values flag more points as anomalies, higher values only catch extreme outliers. Try different signals to see how the band adapts to varying data distributions.

Signal:

Anomaly Band

Threshold (σ)

Show Band

Band Fill

#6366f1

Band Opacity

Anomaly Color

#ef4444

Anomaly Radius

Stream

Buffer Size

Show Axes

Generated Code

JSX

import { useRef, useEffect } from "react" import { StreamXYFrame } from "semiotic" const chartRef = useRef() // Push data at any frequency chartRef.current.push({ time: Date.now(), value: reading }) <StreamXYFrame ref={chartRef} chartType="scatter" runtimeMode="streaming" timeAccessor="time" valueAccessor="value" showAxes pointStyle={() => ({ fill: "#6366f1", r: 3, opacity: 0.6 })} annotations={[ { type: "anomaly-band", label: "±2σ", }, ]} />

Forecast & Anomaly Detection

The forecast and anomaly props onLineChart provide built-in statistical overlays.Auto mode computes regression from training data and extrapolates with a confidence envelope. Pre-computed modereads segment flags and bounds directly from your data — use this when bounds come from an external ML model.

In pre-computed mode, the line is styled by segment: training(dashed, no bounds), observed (solid, with model bounds and anomaly flags), and forecast (dotted, with widening bounds).

Dataset:Train/Forecast split at x=60 · 80 points

Forecast

Forecast Steps

Confidence Level

Forecast Color

#6366f1

Envelope Opacity

Anomaly

Enable Anomaly Detection

Threshold (σ)

Anomaly Dot Color

#ef4444

Anomaly Dot Radius

Layout

Show Grid

Curve

Chart Mode

Generated Code

JSX

import { LineChart } from "semiotic" const data = [...] // time series with trend + anomalies <LineChart data={data} xAccessor="time" yAccessor="value" showGrid forecast={{ trainEnd: 60, }} anomaly={{ }} />