RootsLabs

More than a tool ! GitHub Google+ LinkedIn RSS

Visualiser des données géographiques avec jQuery

Progi1984 - Commentaires (3)

La dataviz ou visualisation de données est, selon Wikipedia, un résumé visuel des données chiffrées. Par exemple, cela peut être une carte avec des couleurs pour représenter des statistiques par zone géographique. Dans notre cas, nous allons utiliser jQuery pour représenter des données chiffrées.

Étape 1 : Préparer sa carte

Tout d’abord, il faut récupérer la carte souhaitée au format SVG. Dans notre cas, nous allons utiliser une carte des régions de France publiée sur Wikimedia Commons (Lien vers la carte SVG). Après avoir récupéré la carte, nous allons l’ouvrir dans un éditeur de texte style Notepad++, voire via la source de votre navigateur.

source_svg

Nous allons chercher les données qui nous seront utiles : la zone des régions, et non celles des départements. Dans notre carte, nous cherchons les balises de type « path » qui représentent les régions. L’attribut « d » représente les points qui forment le tracé de chaque zone.
Nous devons aussi récupérer la largeur et la hauteur du svg. Pour cela, on cherche la balise principale « svg » et ses deux attributs : « width » et « height« .

A partir de toutes ces données, on prépare le fichier Javascript qui définira la carte. Dans les clés width et height, on définit les deux attributs récupérés dans la balise « svg« . Dans la clé pathes, on crée les différents zones où l’on crée des clés dont nous définissons l’identifiant et le nom (name); et où l’on copie les balises de type « path » que l’on a récupéré dans le fichier SVG e.

Voici le résultat :

Étape 2 : Affichage de la carte avec jVectorMap

Nous allons utiliser jVectorMap qui permet d’afficher des cartes vectorielles sur tous les navigateurs.

Le fichier « jvectormap-map.js » correspond au fichier contenant notre définition des régions françaises de l’étape 1.

Une carte de ce type devrait apparaître :
jvectormap_base

Étape 3 : Remplir notre carte de France avec des données

Nos données, dans notre cas, seront générées aléatoirement.

On définit les données numériques dans un tableau dont la clé est la même clé que l’on a utilisé comme identifiant de région dans le fichier de définition de la carte. Ensuite, lors de l’instanciation de vectorMap, on précise que les valeurs sont stockés dans ce tableau et l’intervalle de couleurs utilisés pour les données.

Voilà le rendu :
jvectormap_color

A vous de faire vos propres cartes…

Commentaires

1. LN, le 10 juin 2013 à 21:58

au final, ça ressemble un peu à ce que fait google analytics, non ?

2. Progi1984, le 10 juin 2013 à 23:12

Disons que dans ce cas, oui ! L’article a été écrit pour expliquer la technique utilisée pour faire de la représentation géographique de données. On pourrait remplacer la carte par celui d’un centre commercial, et les données par les magasins qui la composent, ou la carte par un quartier, et les données par les habitants qui l’habitent, etc…

3. LN, le 11 juin 2013 à 21:31

ah dans ce cas je comprends mieux 😉 (enfin de toute façon je le ferais pas, trop complexe pour moi, pour l’instant tout du moins)

Ajouter un commentaire

Commentaire :