© 2016—2017 - Renaud Blanch
Le but de ce TP est de prendre en main la bibliothèque D3.js pour réaliser la visualisation d'un jeu de données.
Récupérez l'archive contenant le jeu de données, la version de D3.js que nous allons utiliser et un squelette de visualisation. Décompressez-la, et parcourez son contenu pour vous familiariser avec la structure du projet.
Le répertoire data contient le fichier des données, il s'agit de la liste des passagers du Titanic embarqués lors de son dernier voyage.
Les différentes colonnes, séparées par des tabulations, indiquent la classe du voyageur (pclass), s'il a survécu ou non (survived), son nom (name), son genre (sex), son âge (age), et le tarif qu'il a payé (fare).
Le répertoire vendor contient le code de D3.js version 4.
Le répertoire viz contient un embryon de visualisation qui va afficher en HTML la liste numérotée des noms des passagers du Titanic, suivis d'une croix si la personne n'a pas survécu au naufrage.
Afin de pouvoir tester le squelette, il faut disposer d'un serveur web. Le plus simple est d'ouvrir un terminal et de se placer dans le répertoire où l'archive a été décompressée, puis d'utiliser le langage python pour lancer un serveur web de test à cet endroit :
% tar xzvf titanic.tgz x titanic/data/ x titanic/data/titanic.tsv x titanic/vendor x titanic/viz/ x titanic/viz/titanic.html % cd titanic/ % python -m SimpleHTTPServer 8000 Serving HTTP on 0.0.0.0 port 8000 ...
Vous pouvez ensuite ouvrir dans un onglet votre version de la visualisation qui doit afficher la liste des noms, de la même manière que la version du sujet.
La visualisation va consister à afficher les deux grandeurs quantitatives (l'âge et le tarif) comme les deux dimensions x et y d'un scatterplot, suivant ainsi les recommandations de Bertin. Nous afficherons les différentes valeurs nominales ainsi : le genre sera représenté par une forme (carré pour les hommes, rond pour les femmes), les fait d'avoir survécu ou non sera représenté par la transparence. Le résultat final pourra ressembler à l'image ci-dessous :
En reprenant les conventions proposées par M. Bostock, ajoutez un élément SVG à la page, et créez deux échelles (voir le tutoriel) à partir de l'âge et du tarif. Faites ajouter des groupes contenant un cercle de rayon 2.8, avec une translation correspondant à l'âge et au tarif de chacun des passagers. Le résultat doit ressembler à cette image :
Pour afficher si le passager a survécu, ajoutez deux styles qui s'appliqueront aux éléments ayant pour classe dead et alive, rendant le premier partiellement transparent, et le second presque vide, mais avec un contour opaque :
.dead { opacity: .25; }
.alive { opacity: 1.; fill-opacity:.01; stroke: black; }
Ajoutez un attribut class à chaque élément que vous ajoutez dont la valeur dépendra de si le passager a survécu ou non.
Le résultat doit conduire à :
Pour encoder si le passager est un homme ou une femme, on a décidé d'utiliser la forme de la marque. Pour cela, procédez en deux temps. En utilisant un filtre sur la sélection, ajoutez des ronds uniquement pour les femmes. Réutilisez la sélection une deuxième fois en ne gardant que les hommes et en ajoutant cette fois un carré de côté 5, avec un x et un y à -2.5 pour qu'il soit centré. Le résultat donnera alors (regardez bien, il y a des carrés, d'ailleurs plus dans les morts, et plus de ronds dans les vivants) :
Affichez les axes de la visualisation, changez l'axe du tarif pour qu'il utilise une échelle logarithmique, ajoutez le nom des passagers en infobulle sur les éléments qui les représentent (en utilisant l'élément title de SVG). Et voilà le résultat !
mise à jour : 5 mars 2017