Market heatmap

A React component in Beamline's Trading category.

Treemap of markets sized by weight and coloured by change, grouped by sector, with hatched no-data tiles.

Use it for

Market overview: what moved and how big it is.

Not for

Exact comparisons → bar-list or data-grid.

Anatomy

group labels
tile (symbol; ▲/▼ and signed change when the tile is big enough)
hover card
legend
List toggle and list view: the same markets as rows (symbol, name, change, weight), largest first — the equivalent of tiles too small to tap

Variants

saturateAt: fraction

States

up
down
no data (hatched)
list (the List toggle, or `view="list"`): rows of at least 32px replace the map

Keyboard

Every tile is a button with a spoken direction and change; focus shows the hover card.
List is a toggle button before the legend; in list view each row is a button when onSelect is given

Motion

Hover brightens; no movement.

Props

Prop	Type	Default	Description
`items` (required)	`{ symbol, name?, group?, weight, change }[]`	—
`saturateAt`	`number`	`0.05`
`height`	`number`	`420`
`onSelect`	`(symbol) => void`	—
`legend`	`boolean`	`true`	Colour scale, no-data key and the List toggle under the map.
`weightLabel`	`string`	`"Market cap"`	What tile area means, in the hover card and legend.
`view / defaultView / onViewChange`	`"map" \| "list"`	`"map"`	Map or the same markets as full-size rows (for phones, where small tiles are hard to tap).
`style / ref`	`CSSProperties / native Ref`	—
`classNames`	`MarketHeatmapClassNames`	—

Dependencies

d3-hierarchy

Import

import { MarketHeatmap } from "@/components/market-heatmap/market-heatmap";

Get it

Market heatmap is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent