Cookbook — Dot Plot — 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/dot-plot

Dot Plot

Cleveland dot plots are ideal for comparing values across many categories, especially when showing change between two time points. Unlike grouped bar charts, they reduce visual clutter and draw attention to the magnitude and direction of change. This recipe uses StreamOrdinalFrame with custom annotation rules to draw connecting lines between paired data points representing neonatal mortality rates in 1990 and 2013.

The Visualization

The Dot Plot compares changes between two values across categories. Each region has two dots — ● 1990 and ● 2013 — connected by a line colored by whether the rate improved (green) or worsened (red).

This data is from Unicef.

import { StreamOrdinalFrame } from "semiotic" const frameProps = { /* --- Data --- */ data: [{ region: "Developed regions", y1990: 7.6, y2013: 3.4 }, { region: "Developing regions", y1990: 36.4, y2013: 22 }, ... ], chartType: "point", /* --- Size --- */ size: [700,500], margin: { left: 235, top: 50, bottom: 40, right: 10 }, /* --- Layout --- */ connectorAccessor: (d12) => d12.region, projection: "horizontal", barPadding: 10, multiAxis: false, /* --- Process --- */ oAccessor: "region", rAccessor: ["y1990","y2013"], rExtent: [0,], /* --- Customize --- */ pieceStyle: d => ({ fill: d.__rIndex === 0 ? "#ac58e5" : "#533f82", r: 8, }), connectorStyle: d => ({ stroke: d.y1990 > d.y2013 ? "#28a745" : "#dc3545", strokeWidth: 2, opacity: 0.4 }), title: "Neonatal Mortality Rate by Region from 1990 to 2013", showAxes: true, /* --- Interact --- */ enableHover: true, /* --- Annotate --- */ tooltipContent: d => { const datum = d.data || d const year = datum.__rIndex === 0 ? "1990" : "2013" const value = datum.__rValue return ( <div className="tooltip-content"> <div>{datum.region}</div> <div>{year}: {value?.toFixed(1)}%</div> </div> ) }, oLabel: true } export default () => { return <StreamOrdinalFrame {...frameProps} /> }

How It Works

Each row represents a region with two data points (1990 and 2013). The multi-accessor rAccessor plots both values per category. The invertR prop reverses the axis so higher mortality appears on the left, making improvement (leftward movement) visually clear:

JSX

rAccessor: ["y1990", "y2013"], oAccessor: "region", projection: "horizontal", type: { type: "point", r: dotRadius }, rExtent: [0], invertR: true

The connecting lines between dots are drawn using customsvgAnnotationRules. Each data row is converted into a "range" annotation, and the annotation rule function accesses the y-scale and column positions to draw connecting lines between the two points:

JSX

svgAnnotationRules: ({ d, rScale, orFrameState }) => { if (d.type === "range") { const start = rScale(d.y1990) + dotRadius const end = rScale(d.y2013) - dotRadius const y = orFrameState.projectedColumns[d.region].middle return ( <line x1={start} x2={end} y1={y} y2={y} style={{ stroke: "black", strokeWidth: 2 }} /> ) } return null }

Key Takeaways

Multi-accessor rAccessor with type: "point"plots multiple values per category as dots.
svgAnnotationRules gives full access to the frame state (scales, column positions) for drawing custom connecting marks.
invertR reverses the quantitative axis, useful when lower values should appear on the "better" side.
Converting data into annotation objects is a powerful pattern for creating derived visual marks that depend on the computed layout.

StreamOrdinalFrame — the underlying frame for dot plot rendering
Slope Chart — another before-and-after comparison using connectors
Annotations — custom annotation rules and built-in annotation types