Cookbook — Ridgeline 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/ridgeline-plot

Ridgeline Plot

Ridgeline plots (also called joy plots) show the distribution of a quantitative variable across several categories, stacking density curves vertically with controlled overlap. This recipe recreates the famous "Perceptions of Probability" visualization using StreamOrdinalFrame's ridgeline summary type.

The Visualization

Ridgeline plots show variation across values and allow overflowing of the plot into adjoining columns by adjusting the amplitude property. Each category's distribution is rendered as a one-sided density curve that can overlap with neighboring rows.

The example is a remake of the Perceptions of Probability and Numbers by zonination.

import { RidgelinePlot } from "semiotic" const frameProps = { /* --- Data --- */ data: [{ k: "Almost Certainly", v: 95 }, { k: "Highly Likely", v: 80 }, ... ], /* --- Size --- */ size: [700,550], margin: { left: 150, top: 50, bottom: 75, right: 15 }, /* --- Layout --- */ orientation: "horizontal", categoryPadding: 5, /* --- Process --- */ valueAccessor: "v", categoryAccessor: "k", bins: 10, amplitude: 1.5, /* --- Customize --- */ title: " What [probability] would you assign to the [phrase]?", showGrid: false, colorBy: "k", colorScheme: ["#ac58e5","#E0488B", ... ], /* --- Interact --- */ enableHover: true } export default () => { return <RidgelinePlot {...frameProps} /> }

How It Works

The ridgeline layout is controlled by the summaryTypeprop. The amplitude parameter controls how much each density curve can overflow into adjacent rows, and binssets the histogram resolution:

JSX

summaryType: { type: "ridgeline", bins: 10, amplitude: 50, curve: "monotonex" }, summaryStyle: (d, i) => ({ fill: theme[i % theme.length], stroke: "black", strokeWidth: 2, fillOpacity: 0.5, strokeOpacity: 0.25 })

The data is organized with oAccessor: "k" (the probability phrase) and rAccessor: "v" (the probability value). The horizontal projection places categories as rows with distributions extending along the x-axis. Custom labels are positioned with right-alignment to sit neatly beside each ridge:

JSX

projection: "horizontal", oAccessor: "k", rAccessor: "v", oLabel: d => ( <text style={{ textAnchor: "end", fill: "grey" }} x={-10} y={5} > {d} </text> )

Key Takeaways

The ridgeline summary type creates overlapping density curves across ordinal categories.
The amplitude parameter controls how much each curve can extend into neighboring rows -- higher values create more dramatic overlap.
summaryHoverAnnotation enables hover tooltips on the summary shapes themselves.
Ridgeline plots work best with a horizontal projection and generous left margins for category labels.

StreamOrdinalFrame — the underlying frame with summary type support
Swarm Plot — an alternative distribution visualization
Marginal Graphics — ridgeline used as a marginal distribution on StreamXYFrame