Production Automatisée de Graphiques, Statistiques et Documents                      gilles.hunault "at" univ-angers.fr   -- partie 5 sur 5 : Graphiques sur le Web avec D3 et Krona

 

Table des matières cliquable   1. Affichage de tableaux de données en D3   2. Tracés de courbes avec via D3   3. Tracés interactifs d'arbres en D3   4. Tracés de phylogénies et de taxonomies avec Krona   Il est possible d'afficher toutes les solutions via ?solutions=1 et de toutes les masquer avec ?solutions=0.

 

1. Affichage de tableaux de données en D3 Reproduire, en Javascript, à l'aide de D3, le tableau des pays de l'UE avec population et superficie, comme dans la page paysUE.php. On pourra commencer par utiliser le fichier de données paysUEjs.csv avant d'essayer de faire un "scraping" des données en Javascript à partir de la page paysUE. Solution :     masquer la solution   On trouvera à l'adresse paysUE_d3.php une solution basée sur le fichier CSV et à l'adresse paysUE_d3url.php une solution basée sur l'URL de l'union européenne. Pour la solution basée sur le fichier CSV, nous avons priviliégié une approche "progressive", avec de nombreux ajouts successifs (ajout de l'élément table, puis de l'élément thead, de l'élément tbody...) plutôt que de tout faire en une seule fois, avec une fonction Javascript. C'est, à notre avis plus "pédagogique" pour une première écriture de script en javascript et D3. La solution proposée ne rend pas le tableau triable. Pourquoi ? On consultera paysUE_d3v2.php pour corriger ce problème. En ce qui concerne la version qui utilise sur l'URL, il s'agit d'une solution "multi-tableaux" obtenus par l'application d'expressions régulières, qui ressemble donc fortement à la solution en PHP seul (exercice 4 de la séance 2).   2. Tracés de courbes avec via D3 Compléter l'exercice précédent en rajoutant, toujours avec D3, les tracés des superficies et des populations, sous forme de points ou de cercles de rayon proportionnel à la donnée à tracer. Solution :     masquer la solution   Pas encore ! A ce jour (2016), aucun étudiant ni aucun internaute averti n'a fourni de solution satisfaisante.   3. Tracés interactifs d'arbres en D3 Télécharger l'archive d3tree.zip et vérifier que la page Web d3tree affiche bien un arbre dont les noeuds sont cliquables. Ecrire ensuite au choix un programme PHP qui lit un fichier d'arcs au sens de DOT et qui produit une page Web de l'arbre interactif correspondant ou une page HTML avec un formulaire avec des arcs au sens de DOT géré en Javascript qui produit là encore un arbre dont les noeuds sont cliquables. Au passage, comment vérifier que le graphe est bien un arbre ? Solution :     masquer la solution   Pas encore ! A ce jour (2016), aucun étudiant ni aucun internaute averti n'a fourni de solution satisfaisante. Toutefois, la lecture de l'archive d3tree.zip devrait au moins aider à comprendre comment écrire les arcs du graphe...   4. Tracés de phylogénies et de taxonomies avec Krona On suppose qu'on dispose de phylogénies et de données hiérarchisées, comme par exemple dans les fichiers taxonomie.txt et timeresults.csv. Comment les tracer avec Krona ? Solution :     masquer la solution   Pas encore ! A ce jour (2016), aucun étudiant ni aucun internaute averti n'a fourni de solution satisfaisante.   Code-source de cette page ;  fichiers inclus : pagsd_inc.php et pagsd.js.

 

 

   Retour à la page principale de   (gH)