Contour chart

Isoline density view in contour colours with an index contour.

Guidance

The contour chart is Marmot's signature density view: query heat by hour and weekday, lineage density or usage, drawn as isolines in mm-contour like a survey sheet. There are 4 to 6 bands; the heaviest is an index contour in mm-contour-index, labelled with its value the way a map labels its index contours, so no legend is needed. Labelled points (marks) are annotated with a leader line and a mono caption.

Give it either a grid of values (rows by columns, such as 7 weekdays by 24 hours, with x-labels and y-labels for the range-frame axes) or points to estimate a density over x-domain and y-domain.

Use it for summaries on Insights and reports. The contour motif is decoration elsewhere, and it must never sit behind working data such as tables or forms.

Keyboard: Tab to the chart. In grid mode the arrow keys move a cross-hair between cells (Left and Right through the columns, Up and Down through the rows) and show the tooltip; in point mode Left and Right move between the marks. Home and End jump to the ends, and Escape hides the tooltip.

Properties

Property	Attribute	Type	Default	Description
grid	grid	number[][]	[]	Values by row then column, e.g. 7 weekdays × 24 hours of query counts.
points	points	DensityPoint[]	[]	Points to estimate a density from, when there is no grid.
xDomain	x-domain	[number, number] | null	null	[min, max] of x for points. Defaults to the data extent.
yDomain	y-domain	[number, number] | null	null	[min, max] of y for points. Defaults to the data extent.
xLabels	x-labels	string[]	[]	Column labels in grid mode, e.g. "00:00" to "23:00". The ends label the x axis.
yLabels	y-labels	string[]	[]	Row labels in grid mode, e.g. "Mon" to "Sun". The ends label the y axis.
xName	x-name	string	''	Name of the x dimension, e.g. "Hour (UTC)".
yName	y-name	string	''	Name of the y dimension, e.g. "Day".
bands	bands	number	5	Number of contour bands, 4 to 6.
unit	unit	string	''	Unit after values, e.g. "queries".
marks	marks	ContourMark[]	[]	Labelled points, annotated with leader lines.
smoothing	smoothing	number	0.6	Smoothing radius in grid cells.
label	label	string	''	What is measured, in sentence case, e.g. "Queries per hour". Starts the summary sentence and names the table.
summary	summary	string	''	Replaces the generated summary sentence read by screen readers.
height	height	number	240	Plot height in px.
defaultWidth	default-width	number	640	Width used before the first measurement and on the server, in px.
loading	loading	boolean	false	Shows the topographic loading field (after 200ms, for at least 400ms).
error	error	string	''	An error sentence. When set, the chart draws its empty frame with this sentence.
emptyText	empty-text	string	''	Sentence shown when there is no data.
tone	tone	'primary' | 'info'	'primary'	Key series colour: primary (burnt sienna, default) or info (slate). The only colour on the chart.
activeIndex		number		Index of the focused or hovered data point, or -1.

CSS parts

Part	Description
frame	The focusable plot region.
plot	The SVG drawing.
message	The empty or error sentence.

CSS custom properties

Property	Description
--mm-chart-key	Colour of the key series. Defaults to --mm-primary, or --mm-info with tone="info".
--mm-chart-ground	The ground behind the chart, used for label halos. Defaults to --mm-paper.

Examples

Every state of mm-contour-chart in Storybook, with keyboard and screen reader tests.