Le but que je me suis fixé était de créer un graphique vectoriel qui puisse être manipulé grâce au javascript. J'ai donc orienté la construction des différents éléments du graphique dans cette voie (simplification des référents, identification correcte des éléments) afin de pouvoir développer facilement le code javascript nécessaire à son "animation".
Je ne voulais reproduire qu'un simple flash que je trouvais mignon au début, j'ai ensuite eu l'idée de ce "démonstrateur d'écart-type" après une intervention d'un groupe de EIA.
L'idée générale derrière ce graphique manipulable est éventuellement de pouvoir l'intégrer dans un cours de statistiques afin de visualiser ce qu'est un écart-type. Bien sûr, à elle seule, cette animation ne peut rien expliquer, mais grâce au SVG combiné au javascript, il est simple (et compréhensible) d'ajouter des animations manipulables pour comprendre beaucoup de principes mathématiques.
J'ai rajouté les éléments décoratifs de mon premier SVG pour faire joli...
J'ai développé le SVG avec Exchanger XML Editor Lite et fait beaucoup de correction en live grâce à Firebug, celui-ci permet de travailler directement sur la structure DOM et de changer le contenu des attributs en instantané dans le navigateur Firefox.
Comme cité plus tôt, j'ai construit le SVG de façon à pouvoir le modifier très simplement, prenons l'exemple de la courbe : il s'agit en fait de 2 courbes, l'une étant inversée par rapport à sa description d'origine scale(-1 1), toutes 2 décrites dans une balise defs. Ce qui m'a permis de l'appeler dans le graphique et de la centrer simplement par un transform="translate(x, y)". Cette méthode a simplifié le travail du fait que je n'ai eu qu'à modifier la définition de la courde à un endroit pour que le changement soit reflété sur tout le graphique. En fait, Opera et le chargement AJAX présentaient tout deux d'importants problèmes d'ajustement dû au trop nombreuses références. J'ai dû créer 2 courbes distinctes (mais ayant pratiquement les mêmes propriétés).
Finalement, je me suis bien amusé, j'adore le SVG par rapport à Flash, c'est clair, on peut comprendre le code, rien n'est caché !
Voir le contenu du SVG - Voir directement le fichier SVG (sans animation)
Voir le contenu Javascript associé - Voir directement le fichier Javascript
Les navigateurs... IE ne sait rien faire et Opera refuse d'afficher le SVG après rechargement via AJAX, il faut accéder à la page directement pour que ça fonctionne. Je crois bien qu'il s'agisse d'un problème de headers de la requête AJAX, des configurations à régler que je ne maîtris pas encore parfaitement, mais ça viendra..
Ne pas oublier de déclarer le namespace xlink !! .
xmlns:xlink="http://www.w3.org/1999/xlink"
Ce petit dernier est super important pour pouvoir réemployer des définitions/éléments dans le SVG, la balise href="#" ne fonctionne pas bien si on ne la préfixe pas de xlink:href="#" et cette dernière est fréquemment utilisé, notamment pour créer un chemin au texte et réemployer des éléments.
La deuxième difficulté à été de pouvoir faire apparaître le SVG à l'intérieur de mon site web, en effet, cela n'est pas suffisamment dit (et employé sur le net!), mais il est important de lancer au navigateur les bons headers afin qu'il traite le SVG. Le problème est que IE ne sait pas traiter un contenu application/xhtml+xml et qu'il demande à enregistrer la page au lieu de l'afficher si c'est le cas. Ma petite combine à été de vérifier si le navigateur acceptait ces données grâce à cette requête PHP :
if (strstr($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml')) {
header("Content-Type: application/xhtml+xml; charset=UTF-8");
}else{
header("Content-Type: text/html; charset=UTF-8");
}
Après, la construction du javascript n'était pas si compliqué que ça grâce au bouquin que vous m'avez prêté (SVG Essentials), j'y ai trouvé toutes les astuces qui peuvent servir dans ce genre de cas.
La véritable difficulté de ce projet est au niveau mathématique. Le déplacement des courbes n'est pas "parfait" du tout. Le mouvement des courbes donne une idée, mais n'est pas précis, j'ai pondu quelques formules rapides pour que l'aspect désiré ressorte, mais elles doivent être grandement améliorées pour être employé dans un environnement pédagogique. Il faudrait que je révise ma littérature un petit peu :P .