Le composant <map-chart> visualise des données geographiques : departements, regions, academies ou monde selon l'attribut level (API cartes unifiee de DSFR Chart 2.1).

Carte departementale (level="dep", défaut)

Sans attribut level (ou avec level="dep"), <map-chart> affiche une carte de France avec données par departement.

<map-chart
  data='{"75": 95, "13": 82, "69": 78, "33": 71, "31": 68}'
  date="2024-01-15"
  name="Score RGAA"
  value-nat="78"
  selected-palette="sequentialAscending">
</map-chart>

Carte regionale nationale (level="reg")

Avec level="reg", la carte affiche le decoupage regional national. Les clés de data sont les codes region INSEE.

<map-chart
  level="reg"
  data='{"11": 95, "84": 82, "76": 78, "75": 71}'
  date="2024-01-15"
  name="Score RGAA"
  selected-palette="sequentialAscending">
</map-chart>

Carte des academies (level="aca")

Avec level="aca", les clés de data sont les noms d'academie en majuscules.

<map-chart
  level="aca"
  data='{"PARIS": 95, "LYON": 82, "STRASBOURG": 78}'
  date="2024-01-15"
  name="Score RGAA"
  selected-palette="sequentialAscending">
</map-chart>

Carte mondiale (level="monde")

Avec level="monde", les clés de data sont les codes pays ISO 3166-1 alpha-2. Via <dsfr-data-chart type="map-monde">, les codes alpha-3 et numériques sont convertis automatiquement.

<map-chart
  level="monde"
  data='{"FR": 95, "DE": 82, "US": 60}'
  date="2024-01-15"
  name="Indicateur"
  selected-palette="sequentialAscending">
</map-chart>

Zoom sur une region (<map-chart-reg>)

Le composant <map-chart-reg region="…"> zoome sur une region donnee : les clés de data sont alors les departements de cette region. Pour la carte nationale des regions, utiliser level="reg" ci-dessus.

<map-chart-reg
  data='{"75": 95, "77": 82, "78": 85, "91": 78, "92": 90}'
  date="2024-01-15"
  region="11"
  name="Score RGAA"
  selected-palette="sequentialAscending">
</map-chart-reg>

Attributs requis

Attribut Type Description
level String Decoupage : dep (défaut), reg, aca, monde — DSFR Chart ≥ 2.1
data String (JSON) Dictionnaire JSON : clés selon le level (code departement, code region, nom d'academie en majuscules, code pays ISO alpha-2), valeurs numériques
date String Date des données au format YYYY-MM-DD
highlight-index String (JSON) Liste des codes departements a mettre en avant : '["75", "69"]'
name String Nom de l'indicateur affiche dans la legende
value-nat Number (map-chart uniquement) Valeur nationale de reference

Codes des departements

Les codes utilisent la nomenclature officielle INSEE :