dsfr-data-world-map - Composants

Carte du monde choropleth avec zoom interactif par continent. Colorie les pays selon une valeur numerique issue d'une source de donnees.

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	Defaut	Description
`source`	String	-	ID du `<dsfr-data-source>` ou `<dsfr-data-query>` fournissant les donnees (requis)
`code-field`	String	-	Chemin vers le code pays dans chaque enregistrement (requis)
`value-field`	String	-	Chemin vers la valeur numerique 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`	String	`continent`	`continent` : zoom au clic \| `none` : desactive

Palettes disponibles

Palette	Usage	Apercu
`sequentialAscending`	Donnees ordonnees croissantes (clair → fonce)
`sequentialDescending`	Donnees ordonnees decroissantes (fonce → clair)
`divergentAscending`	Donnees bipolaires (bleu → neutre → rouge)
`neutral`	Donnees 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 numerique (3 chiffres)

Exemples

1. Carte simple avec donnees 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="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 meme avec des distributions tres asymetriques (ex: PIB).

Les pays sans donnees 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 defini, l'unite est ajoutee apres la valeur.

Pipeline de donnees

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