import { BumpChart } from "semiotic"
BumpChart ranks every series within each x-column. Set ribbon={true}to encode the original magnitude as area while retaining rank as vertical position. Trajectory colors, neutral marks, axes, labels, and tooltips resolve through the active Semiotic theme. The standard primitive styling, style-rule, legend, selection, annotation, responsive, and accessibility props are available as well.
Interactive line-to-ribbon bump chart
Switch between a traditional fixed-width bump chart and magnitude-encoded ribbons, or click Change rankings to animate a second ordering scenario. Both modes share the same centerline and boundary geometry, so the line-to-ribbon transition only changes screen-space width. Hover a trajectory to highlight its full path. Only the five series with the best mean rank receive categorical colors; the other five share one neutral color.
Toggle line and ribbon modes, or change the ranking scenario. Hover a trajectory to isolate its complete ranking path.
JSX
import { useState } from "react" import { BumpChart } from "semiotic" function RankingExample() { const [ribbon, setRibbon] = useState(false) const [updated, setUpdated] = useState(false) return ( <> <button onClick={() => setRibbon(value => !value)}> {ribbon ? "Show lines" : "Show ribbons"} </button> <button onClick={() => setUpdated(value => !value)}> Change rankings </button> <BumpChart data={updated ? dataB : dataA} xAccessor="year" yAccessor="score" lineBy="team" ribbon={ribbon} highlightTop={5} animate={{ duration: 750, easing: "ease-out", intro: false }} width={760} height={430} /> </> ) }
Why the ribbons keep their weight
Ordinary area interpolation moves upper and lower edges vertically. On a steep rank change, that projection makes a wide band appear pinched. BumpChart samples the centerline and offsets each boundary along its local perpendicular, following the approach ofd3.svg.ribbon. The requested width is preserved even through large jumps, and the fixed sample count gives the frame transition engine stable vertices to interpolate.
Props
| Prop | Type | Required | Default | Description |
|---|
data | array | Yes | — | Flat rows containing one magnitude per series and ranking column. |
xAccessor | string | function | — | "x" | Ranking column. First-seen order determines the x-axis order. |
yAccessor | string | function | — | "y" | Magnitude used to calculate rank and ribbon width. |
lineBy | string | function | — | "series" | Series identity carried across ranking columns. |
rankDirection | "descending" | "ascending" | — | "descending" | Whether high or low magnitudes receive rank 1. |
ribbon | boolean | — | false | Draw magnitude-encoded ribbons instead of fixed-width lines. |
ribbonSizeRange | [number, number] | — | [4, 28] | Minimum and maximum full ribbon width in pixels. |
curve | "smooth" | "linear" | — | "smooth" | Horizontal-tangent S-curves or straight transitions. |
highlightTop | number | — | — | Color only the N series with the best overall mean rank. |
neutralColor | string | — | theme muted | Shared color for trajectories outside highlightTop. |
colorScheme | string | string[] | object | — | theme categorical | Categorical colors for trajectories. Theme colors remain the default. |
color | string | — | — | Uniform trajectory and point color. |
styleRules | array | — | — | Apply ordered, data-aware fill, stroke, and opacity rules. |
stroke / strokeWidth / opacity | string / number / number | — | — | Shared primitive styling applied to ribbons, lines, and optional points. |
showLabels | boolean | "start" | "end" | "both" | — | true | Show trajectory labels at either endpoint. |
xFormat / yFormat | function | — | — | Format time or ordered x labels and original values in tooltips. |
annotations | array | — | — | Chart annotations; x positions can use the original x values, including Date objects. |
showLegend | boolean | — | false | Show a categorical legend in addition to the default endpoint labels. |
hoverHighlight | boolean | "series" | — | true | Dim every trajectory except the series under the pointer. |
animate | boolean | object | — | false | Animate rank, ribbon-width, line-to-ribbon, and enter/exit changes. |