Responsive Visualisations

Ce wiki va comporter les développements et les étapes du projet intitulé "Responsive Visualisations" délivré par Aurélien Tabard.

La visualisation de données responsive (s’adaptant à la taille de l’écran) peut contribuer à rendre la lecture des données plus accessibles. Tous les périphériques n’ont pas les mêmes capacités (résolution, possibilité d’interaction, …), le but n’est donc pas d’offrir nécessairement des visualisations identiques pour un même jeu de données mais des vues complémentaires permettant à l’utilisateur de comprendre les informations dont il a besoin. Il est donc nécessaire d’établir différents points de vue, différentes mise en forme afin d’afficher les représentations. Il faut adapter la taille de la visualisation en fonction du support, ainsi que la quantité d’informations pour améliorer la lisibilité mais également la partie interactive (passer d’un clic de souris à du tactile par exemple).

Pré-commencement

Choisir visualisation simple et un jeu de données

Visualisation de base : Visualisation TimeLine et TreeMap

Mettre en place le responsive

Utiliser les outils du lien : https://blog.safaribooksonline.com/2014/02/17/building-responsible-visualizations-d3-js/

On peut redimensionner la fenêtre en ayant le graphique qui s'adapte et qui ne surcharge pas les données sur les axes. Ce non surchargement des axes se fait grâce à ces lignes de codes :

	yAxis.ticks(Math.max(height / 50, 2));
	xAxis.ticks(Math.max(width / 100, 2));

La fonction ticks met le nombre de données que nous voulons sur les axes. Nous prenons donc en compte la taille de la fenêtre qui vient d'être redimensionnée.

Mettre en place la généricité

Utiliser les outils du lien : http://bost.ocks.org/mike/chart/