TileMap

A map of equal squares, so small places read as clearly as big ones.

SourcePackage @kerf-js/veneer

Preview

tsx

import { TileMap } from '@kerf-js/veneer'export function Teams() {  return (  <TileMap    title="Teams by state"    description={      'Every state the same size, so ' +      'small ones still read'    }    data={TEAMS_BY_STATE}    unit="teams"  />  )}const TEAMS_BY_STATE = (  'AK,ME,VT,NH,WA,ID,MT,ND,MN,IL,' +  'WI,MI,NY,RI,MA,OR,NV,WY,SD,IA,' +  'IN,OH,PA,NJ,CT,CA,UT,CO,NE,MO,' +  'KY,WV,VA,MD,DE,AZ,NM,KS,AR,TN,' +  'NC,SC,DC,OK,LA,MS,AL,GA,HI,TX,' +  'FL')  .split(',')  .map((id, i) => ({    id,    value:      (        {          CA: 188,          NY: 142,          TX: 121,          WA: 96,          MA: 74,          IL: 68,          CO: 57,          GA: 44,          FL: 52,        } as Record<string, number>      )[id] ?? 4 + ((i * 37) % 31),  }))

Installation

npm install @kerf-js/veneer

Usage

tsx

import { TileMap } from '@kerf-js/veneer'<TileMap  title="Teams by state"  description={    'Every state the same size, so ' +    'small ones still read'  }  data={TEAMS_BY_STATE}  unit="teams"/>

Accessibility

Every chart has a text alternative and a table view of its numbers, so nothing depends on seeing the marks. See Chart for its keyboard support.

API Reference

Prop	Type	Default	Description
`title`	`string`	—	The heading.
`level`	`2 \| 3 \| 4 \| 6 \| 5`	—	The title's heading level: one below the heading the chart sits under. Default 3, a chart in a page section.
`description`	`unknown`	—	One supporting line under the title.
`toolbar`	`unknown`	—	Beside the view toggle: a layout switch, a range picker.
`state`	`"error" \| "loading" \| "empty"`	—	Replaces the plot, in the same frame. With no data the frame shows `empty` on its own.
`loading`	`string`	—	Shows that work is under way.
`empty`	`{ title: string; detail?: unknown; }`	—	The title and detail shown in place of the plot when there is no data.
`error`	`{ title: string; detail?: unknown; }`	—	A message that marks the field invalid and says why.
`action`	`unknown`	—	The next step under an empty or error state: a Retry button.
`data`	`{ id: string; value: number; }[]`	—	The series to draw.
`summary`	`string \| ((c: { data: { id: string; value: number; }[]; title: string; }…`	—	One sentence for screen readers and the page; generated from the data when absent.
`tiles`	`string`	—	Your own map: rows split by `\|`, cells by `,`.
`unit`	`string`	—	What a tile counts.

RelatedHeat grid