Performance · limits

Stress cases

Each case up to past its limit, with the library's defaults: legends, tables and a name for every mark. Nothing plays until you press its button. Smooth is a 95th percentile of 20 ms or less between frames, no frame over 50 ms, and a hover shown within 100 ms.

Bars that update

Every value changes in one staged update: values, then the order.

Bars
Update effect

Not run yet.

Hover on a large chart

Hovers a bar every 50 ms, each dimming every other bar.

Bars

Not run yet.

A line on dates, playing

Daily visits, red below their 28-day average (with one series, the period's), and the core arrow riding the leading edge: only("visits", parallel(threshold(…), travel("arrow", …))), played by playback() into reveal().

Years
Series

Not run yet.

Host columns with watch

D3 columns in a hand-written transition, red above 50 through expressive().

Columns
Follow

Not run yet.

ValueAbove 50

A switch with many pairs

Bars turning into columns with morph().

Bars

Not run yet.

The first draw

Static columns, to the first frame that shows them.

Columns

Not run yet.

Things to try

  • Run a case at each size, from the smallest up, and watch where its readout stops saying Smooth. The limits depend on the device: README's Limits table has them for a desktop CPU, unthrottled and slowed down four times.
  • On the D3 columns, compare watch, which follows every frame of the host's own transition, with refresh() once it ends.
  • Look under the bars: where their names would overlap, a chart draws only every 2nd, 5th, 10th, 20th and so on, and leaves the values out when they'd overlap too. Hover a bar, or open its table, for every name and value.
  • Tab into a chart and press Page Up and Page Down: on the bars they move a tenth of the bars at a time, and on the date line a month, so ten years of days is 120 presses rather than 3,653.
  • In a clone of the repository, npm run bench presses the same buttons in headless Chromium, against npm run dev, and records every readout.