dsfr-data-world-map - Composants

Carte du monde choropleth avec zoom interactif par continent. Colorie les pays selon une valeur numérique issue d'une source de données.

Composant déprécié

Depuis DSFR Chart 2.1, la carte mondiale est fournie nativement : utilisez <dsfr-data-chart type="map-monde"> (aucun bundle supplémentaire, codes ISO alpha-3/numériques convertis automatiquement). dsfr-data-world-map sera retiré dans une prochaine version majeure — il reste pertinent uniquement si le zoom continent interactif est requis.

Ce composant est developpe specifiquement pour dsfr-data (pas un composant DSFR Chart). Il utilise d3-geo pour la projection et topojson-client pour les geometries. Les ~177 pays de la carte sont charges en lazy-loading.

Attributs

Attribut	Type	Défaut	Description
`source`	String	-	ID du `<dsfr-data-source>` ou `<dsfr-data-query>` fournissant les données (requis)
`code-field`	String	-	Chemin vers le code pays dans chaque enregistrement (requis)
`value-field`	String	-	Chemin vers la valeur numérique a representer (requis)
`code-format`	String	`iso-a2`	Format des codes pays : `iso-a2` (FR), `iso-a3` (FRA), `iso-num` (250)
`name`	String	-	Titre affiche dans la legende
`selected-palette`	String	`sequentialAscending`	Palette de couleurs DSFR (voir ci-dessous)
`unit-tooltip`	String	-	Unite affichee dans les tooltips (ex: "Mds USD")
`zoom-mode`	String	`continent`	`continent` : zoom au clic \| `none` : desactive. L'ancien nom `zoom` reste lu en alias deprecie (#299)

Palettes disponibles

Palette	Usage	Aperçu
`sequentialAscending`	Données ordonnees croissantes (clair → fonce)
`sequentialDescending`	Données ordonnees decroissantes (fonce → clair)
`divergentAscending`	Données bipolaires (bleu → neutre → rouge)
`neutral`	Données neutres (nuances de gris)

Formats de code pays

Format	Exemple (France)	Description
`iso-a2`	FR	ISO 3166-1 alpha-2 (2 lettres)
`iso-a3`	FRA	ISO 3166-1 alpha-3 (3 lettres)
`iso-num`	250	ISO 3166-1 numérique (3 chiffres)

Exemples

1. Carte simple avec données embarquees

<dsfr-data-source id="data"
  data='[{"code":"FR","pib":2783},{"code":"US","pib":25462},...]'>
</dsfr-data-source>

<dsfr-data-world-map source="data"
  code-field="code"
  value-field="pib"
  code-format="iso-a2"
  name="PIB"
  unit-tooltip="Mds USD"
  selected-palette="sequentialAscending">
</dsfr-data-world-map>

2. Avec une API (ODS/Tabular)

<dsfr-data-source id="population"
  api-type="opendatasoft"
  base-url="https://data.economie.gouv.fr"
  dataset-id="population-mondiale"
  select="pays_code, population">
</dsfr-data-source>

<dsfr-data-world-map source="population"
  code-field="pays_code"
  value-field="population"
  code-format="iso-a3"
  name="Population"
  unit-tooltip="hab.">
</dsfr-data-world-map>

3. Sans zoom continent

<dsfr-data-world-map source="data"
  code-field="code"
  value-field="valeur"
  zoom-mode="none">
</dsfr-data-world-map>

Fonctionnement

Echelle choropleth

Les couleurs sont attribuees par quantiles : les pays sont repartis en 9 groupes de taille egale, chacun recevant une teinte de la palette. Cela garantit une bonne lisibilite même avec des distributions tres asymetriques (ex: PIB).

Les pays sans données sont affiches en gris clair (#F0F0F0).

Zoom continent

Cliquer sur un pays zoome sur son continent (recalcul de la projection via fitExtent). Un bouton de retour apparait en haut a gauche. Cliquer a nouveau sur un pays du continent zoome revient a la vue monde.

Tooltip

Au survol d'un pays, un tooltip affiche le nom du pays (en francais) et sa valeur formatee. Si unit-tooltip est défini, l'unite est ajoutee apres la valeur.

Pipeline de données

dsfr-data-source (fetch / inline)
  → dsfr-data-query (optionnel : group-by, aggregate)
    → dsfr-data-world-map (affichage)