Cookbook — Slope Chart — 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/slope-chart

Slope Chart

Slope charts are excellent for comparing values between two time periods or conditions. They make it immediately clear which categories improved, declined, or stayed stable. This recipe uses StreamOrdinalFrame'sconnectorType to draw lines between points across two ordinal columns, creating an effective before-and-after comparison of binge drinking rates across U.S. cities.

The Visualization

A slope chart is a common way to show change between two points in time. This data is from Big Cities Health Coalition.

import { StreamOrdinalFrame } from "semiotic" const frameProps = { /* --- Data --- */ data: [{ name: "New York", color: "#ac58e5", year: 2011, value: 17.9 }, { name: "Las Vegas", color: "#E0488B", year: 2011, value: 18.7 }, ... ], chartType: "point", /* --- Size --- */ size: [540,450], margin: { left: 40, top: 50, bottom: 75, right: 160 }, /* --- Layout --- */ connectorAccessor: (d12) => d12.name, /* --- Process --- */ oAccessor: "year", rAccessor: "value", rExtent: [0,], /* --- Customize --- */ pieceStyle: (d12) => ({ fill: d12.color, stroke: "white", strokeOpacity: 0.5 }), connectorStyle: (d12) => ({ stroke: d12.color, strokeWidth: 2, opacity: 0.5 }), title: "% of Adults Who Binge Drink", showAxes: true, foregroundGraphics: [ <g transform="translate(400, 73)" key="legend"> <text key={1} fill={"#ac58e5"}> New York </text> <text key={2} y={20} fill={"#E0488B"}> Las Vegas </text> <text key={3} y={40} fill={"#9fd0cb"}> San Diego </text> <text key={4} y={60} fill={"#e0d33a"}> Denver </text> <text key={5} y={80} fill={"#7566ff"}> Oakland </text> </g> ], /* --- Annotate --- */ tooltipContent: d => { const datum = d.data || d return ( <div style={{ padding: "4px 8px", fontSize: 13 }}> <strong>{datum.name}</strong> <div>{datum.year}: {Number(datum.value).toFixed(1)}%</div> </div> ) }, oLabel: true } export default () => { return <StreamOrdinalFrame {...frameProps} /> }

How It Works

The data contains one row per city per year. StreamOrdinalFrame groups these into columns by year. The connectorTypefunction returns the city name, so pieces sharing the same city name across columns get connected with a filled path:

JSX

const frameProps = { oAccessor: "year", rAccessor: "value", rExtent: [0], type: { type: "point", r: () => 5 }, connectorType: d => d.name, connectorStyle: d => ({ fill: d.source.color, stroke: d.source.color, strokeOpacity: 0.5, fillOpacity: 0.5 }), style: d => ({ fill: d.color, stroke: "white", strokeOpacity: 0.5 }) }

A manual legend is placed using foregroundGraphics to identify each city by color. Axes on both left and right sides help readers compare exact values at both endpoints:

JSX

axes: [ { orient: "left", tickFormat: d => `${d}%`, baseline: false, label: { name: "Adults Who Binge Drink" } }, { tickFormat: d => `${d}%`, baseline: false, orient: "right" } ]

Key Takeaways

connectorType links pieces across ordinal columns by a shared identifier, creating the slope lines.
Using type: "point" instead of "bar" turns the chart from a grouped bar chart into a slope chart.
Dual axes (left and right) help readers read precise values at both time points without visual clutter.
foregroundGraphics lets you place custom legend elements anywhere in the SVG coordinate space.

StreamOrdinalFrame — the underlying frame for slope chart rendering
Dot Plot — a related before-and-after comparison chart