OrdinalFrame — 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/frames/ordinal-frame

StreamOrdinalFrame

frames

import { StreamOrdinalFrame } from "semiotic"

Related: BarChart·SwarmPlot·BoxPlot

StreamOrdinalFrame is the foundational frame for all categorical data visualization. It handles bar charts, stacked bars, cluster bars, swarm plots, pie/donut charts, boxplots, violins, histograms, and more. Use it directly when you need full control over styling and layout beyond what the simpler Chart components provide.

Quick Start

Provide chartType, data,oAccessor (category), and rAccessor (value).

import { StreamOrdinalFrame } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { department: "Engineering", employees: 42 }, { department: "Sales", employees: 28 }, { department: "Marketing", employees: 19 }, { department: "Support", employees: 35 }, { department: "Design", employees: 12 }, ], chartType: "bar", /* --- Size --- */ size: [500,300], margin: { top: 20, bottom: 60, left: 70, right: 20 }, /* --- Process --- */ oAccessor: "department", rAccessor: "employees", /* --- Customize --- */ pieceStyle: () => ({ fill: "#6366f1" }), showAxes: true, /* --- Interact --- */ enableHover: true } export default () => { return <StreamOrdinalFrame {...frameProps} /> }

Examples

Stacked Bar Chart

Use stackBy to stack pieces within each category. Use barColors to map stack groups to colors.

import { StreamOrdinalFrame } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { region: "North", product: "Widget", revenue: 12000 }, { region: "North", product: "Gadget", revenue: 8000 }, // ... ], chartType: "bar", /* --- Size --- */ size: [500,300], margin: { top: 20, bottom: 60, left: 70, right: 20 }, /* --- Layout --- */ stackBy: "product", /* --- Process --- */ oAccessor: "region", rAccessor: "revenue", /* --- Customize --- */ showAxes: true, barColors: { Widget: "#6366f1", Gadget: "#f59e0b" }, /* --- Interact --- */ enableHover: true } export default () => { return <StreamOrdinalFrame {...frameProps} /> }

Swarm Plot

Use chartType="swarm" to display individual data points within categories. Points are jittered to avoid overlap.

import { StreamOrdinalFrame } from "semiotic" const frameProps = { /* --- Data --- */ data: Array.from({ length: 80 }, (_, i) => ({ department: ["Eng", "Sales", "Marketing", "Support"][i % 4], score: base + (Math.random() - 0.5) * 40 })), chartType: "swarm", /* --- Size --- */ size: [500,300], margin: { top: 20, bottom: 60, left: 70, right: 20 }, /* --- Process --- */ oAccessor: "department", rAccessor: "score", /* --- Customize --- */ pieceStyle: () => ({ fill: "#10b981", opacity: 0.7, r: 4 }), showAxes: true, /* --- Interact --- */ enableHover: true } export default () => { return <StreamOrdinalFrame {...frameProps} /> }

Props

Prop	Type	Required	Default	Description
`chartType`	string	Yes	—	"bar", "clusterbar", "point", "swarm", "pie", "donut", "boxplot", "violin", "histogram", "ridgeline", "timeline".
`runtimeMode`	"bounded" \| "streaming"	—	`"bounded"`	Whether data is static (bounded) or pushed via ref (streaming).
`data`	array	—	—	Array of data objects.
`size`	[number, number]	—	`[600, 400]`	Chart dimensions as [width, height].
`oAccessor`	string \| function	—	`"category"`	Accessor for the ordinal (category) dimension.
`rAccessor`	string \| function \| array	—	`"value"`	Accessor for the range (value) dimension. Array for multi-axis.
`projection`	"vertical" \| "horizontal" \| "radial"	—	`"vertical"`	Chart projection direction.
`stackBy`	string \| function	—	—	Stack pieces within each category by this field.
`groupBy`	string \| function	—	—	Group pieces side-by-side within each category.
`barPadding`	number	—	—	Padding between category bands in pixels.
`normalize`	boolean	—	`false`	Normalize stacked values to 100%.
`showAxes`	boolean	—	`true`	Show axes on the chart.
`oLabel`	string	—	—	Label for the ordinal axis.
`rLabel`	string	—	—	Label for the range axis.
`pieceStyle`	function	—	—	Style for bar/point marks. (datum, category) => Style.
`summaryStyle`	function	—	—	Style for summary marks (boxplot, violin). (datum, category) => Style.
`enableHover`	boolean	—	`true`	Enable hover tooltips.
`margin`	object	—	`{ top: 50, right: 40, bottom: 60, left: 70 }`	Chart margins.
`colorScheme`	string \| string[]	—	—	Color scheme for multi-series.
`barColors`	object	—	—	Category-to-color mapping.

BarChart -- simplified Chart component for bar visualizations
SwarmPlot -- simplified Chart component for swarm/beeswarm plots
BoxPlot -- statistical boxplots
StreamXYFrame -- for continuous x/y data (line, area, scatter)
StreamNetworkFrame -- for topological data (force layouts, hierarchies)