Cookbook — Timeline — 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/cookbook/timeline

Timeline

Timeline and Gantt charts visualize events or tasks across time, showing duration and sequence at a glance. This recipe uses StreamOrdinalFrame's built-in timeline type to display U.S. presidential terms, with each row representing a president and bar length representing their time in office.

The Visualization

This data is from the List of Presidents of the United States Wikipedia page.

import { StreamOrdinalFrame } from "semiotic" const colors = { Democratic: 4, Republican: 1, "Democratic-Republican": 2, Whig: 3 } const theme = ["#ac58e5","#E0488B","#9fd0cb","#e0d33a","#7566ff","#533f82","#7a255d","#365350","#a19a11","#3f4482"] const frameProps = { /* --- Data --- */ data: [{ name: "George Washington", start: 1789, end: 1797, party: "None" }, { name: "John Adams", start: 1797, end: 1801, party: "Federalist" }, ... ], chartType: "timeline", /* --- Size --- */ size: [900,800], margin: { left: 200, top: 40, bottom: 50, right: 20 }, /* --- Layout --- */ projection: "horizontal", barPadding: 2, /* --- Process --- */ oAccessor: "name", rAccessor: (d12) => [d12.start, d12.end], /* --- Customize --- */ pieceStyle: d => ({ fill: theme[colors[d.party] || 0], stroke: theme[(colors[d.party] || 0) + 5] }), title: "U.S. Presidential Terms", showAxes: true, foregroundGraphics: Object.keys(colors) .concat(["Other"]) .map((d, i) => ( <text key={d} x={700} y={i * 20 + 60}> <tspan fontSize="20" fill={theme[colors[d] || 0]}> ● </tspan>{" "} {d} </text> )), /* --- Annotate --- */ oLabel: true } export default () => { return <StreamOrdinalFrame {...frameProps} /> }

How It Works

The timeline type expects the rAccessor to return a two-element array representing the start and end of each event. Combined with a horizontal projection, each president gets a row with a bar spanning their term:

JSX

rAccessor: d => [d.start, d.end], oAccessor: "name", projection: "horizontal", type: "timeline", axes: [{ orient: "bottom", ticks: 10 }]

Color encodes political party using a lookup hash. TheoLabel function colors each president's name to match their party, and foregroundGraphics adds a color legend:

JSX

style: d => ({ fill: theme[colors[d.party] || 0], stroke: theme[(colors[d.party] || 0) + 5] }), oLabel: (d, i) => ( <text y={3} textAnchor="end" fontSize="11" fill={theme[colors[i[0].party] || 0]} > {d} </text> )

Key Takeaways

The timeline type in StreamOrdinalFrame renders range-based bars from a two-element array accessor.
Horizontal projection with generous left margins provides space for long category labels.
The oLabel callback receives both the label string and the associated data array, enabling data-driven label styling.
foregroundGraphics renders on top of the chart area, making it ideal for legends and annotations.

StreamOrdinalFrame — the underlying frame with timeline type support
Dot Plot — another horizontal ordinal layout
BarChart — standard bar layout for simpler categorical data