Extension:Graph/Interactive Graph Tutorial/fr

Dans ce tutoriel, nous allons créer un graphe interactif qui affichera les taux de fertilité historiques par pays, avec un curseur pour sélectionner l'année, et une carte pour montrer la distribution des taux partout sur la planète. Si vous voulez investiguer le code source de ce graphe uniquement, il est disponible sur une page séparée. Utilisez le bac à sable interactif de Graph pour vos tests. Vous pourriez également être intéressés par la documentation complète de Vega (en anglais).

Déplacez le curseur pour modifier l'année et survolez les pays à l'aide de la souris pour afficher les taux. Essayez !



Dessiner des formes
Nous commençons par dessiner quelques éléments (marks). Le code du graphe est encadré avec la balise  même ci celui-ci n'est pas encore interactif. Ouvrez le bac à sable interactif de Graph et copiez y le code suivant sans la balise &lt;graph> pour vous donner une idée.

Astuce : utilisez l'« Editeur de code » pour copier les spécifités du graphe dans l'éditeur Vega pour vous entrainer.



Signal isDragging
Pour que l'on puisse faire glisser notre objet curseur, il faut d'abord savoir si on a cliqué dessus ou pas. Pour cela, on ajoute un signal qui passe à  quand l'objet est cliqué (isDragging) et une marque textuelle pour afficher (debogage) le résultat :



Signal handlePosition
Maintenant que nous savons quand l'objet est glissé, nous ajoutons un signal  qui ne change de valeur que lorsque le signal isDragging est true. Nous attachons aussi le nouveau signal aux coordonnées « x » du curseur via la section « update » :



Signal de calibrage de la position du curseur
Avoir la position en pixels du curseur n'est pas très utile - nous préfèrerions plutôt avoir une valeur qui a un sens pour notre graphe, comme l'année. Les échelles (scales) Vega fournissent un mécanisme utile pour convertir nos données (par exemple les années) ainsi que les coordonnées de l'écran, et revenir en arrière (inverser). Dans cette étape, nous ajoutons à yearsScale une échelle linéaire pour les valeurs de l'intervalle 1960..2013, pour qu'elle soit cadrée sur la largeur complète du graphique (cadrage exclu). Nous ajoutons un nouveau signal scaledHandlePosition pour convertir la position X de la souris en valeur significative d'année.



Mettre à jour la valeur de l'année
Si vous l'avez remarqué, le curseur peut dépasser la largeur du graphique ce qui produit des résultats incohérents. Aussi la valeur à l'échelle n'est pas un nombre entier comme on pourrait s'y attendre de la valeur d'une année. Pour corriger cela, on peut ajouter un signal de post-traitement supplémentaire appelé annéeActuelle (currentYear) pour la convertir en entier et la contraindre dans l'intervalle nécessaire. Nous lui donnons une valeur initiale raisonnable, et relions l'intitulé de l'année yearLabel à la position du curseur sur l'échelle. Notez que la position du curseur doit être comprise à l'intérieur des coordonnées de l'écran pour pouvoir utiliser yearsScale et retrouver la valeur :



Nettoyage final
À présent nous pouvons retirer toutes les marques de débogages. Nous n'avons également plus besoin de séparer les signaux handlePosition et scaledHandlePosition parce que la mise à l'échelle peut avoir lieu dans la même passe :



Prochaine étape
Veuillez continuer à la partie 2.