2D charts

Non-uniform heatmap

Every row says where its cells sit and how wide each one is, so a grid sampled finely where the signal moves and coarsely where it does not is drawn at the widths it was measured at.

21 of 136

charts/non-uniform-heatmap

(plot) => {
  // Six cells, each twice the width of the one before it.
  const widths = [1, 2, 4, 8, 16, 32];
  const columns = {
    at: plot.uploadBuffer(column(6, (i) => widths[i] * 1.5 - 1)),
    width: plot.uploadBuffer(column(6, (i) => widths[i])),
  };
  return {
    kind: "heatmap",
    series: rows(plot, 6, 6, "field").map((row) => ({ ...row, columns })),
    // The cells run from 0 to 63. The axis fits their centres, so the range
    // is written to take in the outer half of the last one.
    x: { range: [0, 63] },
    legend: false,
  };
}

Arguments

{ kind: "heatmap" } is a HeatmapChart

A grid of coloured cells: one row per entry, one column per sample.

from HeatmapChart
kindrequired	"heatmap"
series	readonly []	The rows, from the bottom of the plot upward.
tooltip		The tooltip drawn at the cursor. None unless set.
from ChartChrome
title	string	The title above the plot.
legend	boolean	Whether a legend is drawn. Drawn unless set false.
at		The corner this chart hangs off, instead of taking its turn in the layout. Unset, a chart fills the canvas or its cell of Grid, which is what almost every page wants. Set, the chart is placed the way an Instrument is: off that corner, at ChartChrome.size of the canvas, and out of the grid. That is what a chart drawn over a scene needs, where the rest of the canvas has to stay scene.
size	readonly [number, number]	How much of the canvas this chart takes, as a fraction of each side. A placed chart that names no size takes half the canvas each way, because filling it would hide whatever it was placed over. Without ChartChrome.at the layout still decides where the chart goes and this decides how much room it takes there.
offset	readonly [number, number]	The offset from that corner, in logical pixels. Read only with ChartChrome.at.
from ChartFrame
x		The horizontal axis.
y		The vertical axis.
transposed	boolean	Swap the plotting directions. What makes a horizontal bar chart, which is what a ranking is almost always drawn as: names read left to right as words do, and there is room for as many as the plot is tall.
centred	boolean	Draw the axis lines through the origin rather than around the edges: two rules crossing at zero with the data in four quadrants.
gridOver	boolean	Draw the gridlines over the series rather than behind them. What a chart of sparse markers over a dense field wants, where the grid is the thing being read against.
guides	readonly []	Reference marks over the plot.
crosshair	boolean	Draw a crosshair at the cursor, with a readout at each axis.
select	boolean	Let a drag across the plot select an x range, reported as a RangeSelectedEvent. This takes the plain drag: a selectable chart brushes where an ordinary one pans. Panning one is then the shift-drag band zoom or a drag on the gutters below and beside the plot, and the double click still hands the axes back either way. The selection stands until the viewer makes another. A shift-drag zooms without disturbing it, so a region can be kept and examined.
pick	"point" | "series"	What a click selects, beyond activating the datum it hits.