Composant · Données

TileMapChart

Documenté

TileMapChart (carte en tuiles / cartogramme « tilemap ») pose une grille de cellules carrées à des coordonnées (col, row) explicites, chacune colorée selon sa valeur sur une échelle séquentielle min→max. Idéal pour un cartogramme où chaque région occupe une case de taille égale, indépendamment de sa surface géographique réelle.

Exemples

Cartogramme régional

Chaque province occupe une tuile de même taille, positionnée pour rappeler sa place géographique ; la couleur encode la métrique (ici un indice).

Cartogramme régional

BC: 42
AB: 58
SK: 35
MB: 49
ON: 88
QC: 76
NB: 31
NS: 40

Voir le code (Svelte)

<div class="chart-wrapper">
  <TileMapChart
    label="Indice par province"
    data={[{"label":"BC","col":0,"row":1,"value":42},{"label":"AB","col":1,"row":1,"value":58},{"label":"SK","col":2,"row":1,"value":35},{"label":"MB","col":3,"row":1,"value":49},{"label":"ON","col":4,"row":1,"value":88},{"label":"QC","col":5,"row":1,"value":76},{"label":"NB","col":6,"row":1,"value":31},{"label":"NS","col":6,"row":2,"value":40}]}
  />
</div>

Grille dense

La taille des tuiles s'adapte automatiquement au nombre de colonnes et de lignes pour ne jamais déborder du cadre.

Grille dense

A1: 12
B1: 30
C1: 48
D1: 64
A2: 22
B2: 55
C2: 71
D2: 90
A3: 8
B3: 40
C3: 60
D3: 84

Voir le code (Svelte)

<div class="chart-wrapper">
  <TileMapChart
    label="Grille 4×3"
    data={[{"label":"A1","col":0,"row":0,"value":12},{"label":"B1","col":1,"row":0,"value":30},{"label":"C1","col":2,"row":0,"value":48},{"label":"D1","col":3,"row":0,"value":64},{"label":"A2","col":0,"row":1,"value":22},{"label":"B2","col":1,"row":1,"value":55},{"label":"C2","col":2,"row":1,"value":71},{"label":"D2","col":3,"row":1,"value":90},{"label":"A3","col":0,"row":2,"value":8},{"label":"B3","col":1,"row":2,"value":40},{"label":"C3","col":2,"row":2,"value":60},{"label":"D3","col":3,"row":2,"value":84}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`TileMapChartTile[]`	requis
`label`	`string`	requis
`width`	`number`	`480`
`height`	`number`	`360`
`class`	`string`	optionnel

TileMapChartTile = { label: string; col: number; row: number; value: number }.

Accessibilité

`label` nomme le graphique (role=img). Les libellés et valeurs sont rendus dans une liste accessible hors SVG. Le libellé court est posé au centre de chaque tuile assez grande.

Notes d'usage

Idéal pour un cartogramme à cases égales (régions, états) ou toute grille où la position porte un sens. Les tuiles dont col, row ou value est non finie sont ignorées.

Tokens

--st-semantic-data-category1 ... --st-semantic-data-category8
--st-semantic-surface-default
--st-semantic-text-secondary
--st-semantic-text-inverse
--st-semantic-surface-inverse
--st-radius-sm