Skip to content
weftGitHub

TileMap

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

SourcePackage @weft-js/warp

Preview

tsx
import { state } from '@weft-js/core'import { TileMap } from '@weft-js/warp'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 @weft-js/warp

Usage

tsx
import { TileMap } from '@weft-js/warp'<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

PropTypeDefaultDescription
titlestring—The heading.
level2 | 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.
descriptionunknown—One supporting line under the title.
toolbarunknown—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.
loadingstring—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.
actionunknown—The next step under an empty or error state: a Retry button.
data{ id: string; value: number; }[]—The series to draw.
summarystring | ((c: { data: { id: string; value: number; }[]; title: string; }…—One sentence for screen readers and the page; generated from the data when absent.
tilesstring—Your own map: rows split by |, cells by ,.
unitstring—What a tile counts.

RelatedHeat grid