Cours de Visualisation de données

Cours et sujets de TD

La visualisation des données ou DataViz est une démarche qui aboutit à la transformation des données en graphiques plus faciles à lire. Nous utiliserons dans ce cours la bibliothèque Javascript Plot.ly

Structure d'un fichier html

Plotly étant une bibliothèque de fonctions JavaScript, on l'utilise côté client en l'appelant depuis un fichier HTML. Plotly va servir à créer des graphismes, à partir de données fournies directement ou en provenance d'un fichier ou d'un flux externe. On choisira le type de représentation et d'interactivité à fournir. Le fichier HTML de base aura la forme suivante :

Premier exemple -- Le code du premier exemple

Types de données

On distingue quatre familles de variables/données :

Les représentations graphiques des données qualitatives

Pour représenter ce type de donnée, nous avons principalement à notre disposition les diagrammes à barres et les diagrammes à secteurs.

Les représentations graphiques des données quantitatives

Les histogrammes et boîtes à moustaches sont les représentations classiques des donnés;es quantitatives.

Régression linéaire

linear regression

Lire des données au format JSON

Ce format est en fait la notation objet JavaScript, avec ici un tableau qui contient des objets eux-mêmes contenant deux couples variable/valeur. Le fichier data.json contiendra les données selon ce format. Ensuite, on peut crér une premiére version simple de notre histogramme.

Exercice 1:

Et si nous voulions changer les couleurs des barres ? Des contours ?

Exercice 2 :

La ville de Paris met à notre disposition des jeux de données. Aujourd'hui nous allons utiliser les données d'état civil disponibles ici.

On veut obtenir un graphe qui contient l'histogramme de la distribution du nombre de mariages par arrondissement et d'ajouter une seconde courbe qui correspond avec un second axe à la distribution des naissances.

Plus difficile : Et si nous voulions quelque chose dans ce genre : http://paris.mapize.com/2008 ?

Première approche : avec Plot.ly

Pour cela, nous allons utliser un scattergeo pour dessiner les données. Je vous encourage à consulter cet exemple. Nous utiliserons les coordonnées des mairies des arrondissements comme centre des cercles. Je vous ai préparé un objet qui les contient. Le voici. Il est possible de traiter les données sous le format csv, Plot.ly fournit des outils qui permettent facilement de parser de tels fichiers. Il faut appeler la fonction Plotly.d3.dsv () qui prend deux arguments ; le premier est le carractère séparateur et le deuxième est l'adresse du fichier csv à parser. Voici le résultat pour les naissances uniquement :

On peut constater qu'il est difficile de s'y retrouver. Car la carte fournie par Plot.ly n'est pas riche. Ce type de représultat est à utiliser pour des donnés; qu'on souhaite représenter sur une plus grande échelle (au moins un pays).

Deuxième approche : avec Google maps api

Je vous invite tout d'abord à consulter ce tutoriel. La doc bien utile se trouve ici. Il en faudra pas oublier d'ajouter l'appel à l'API dans l'entête du document comme ceci.

Le résultat est quand même nettement plus parlant ! À vous maintenant d'ajouter judicieusement les autres types d'acte sur la carte. On doit pouvoir activer l'affichage des types d'acte séparément. Il serait également intéressant d'avoir les chiffres en survolant les cercles.

Un peu d'aide pour ceux qui rament ;-)

Code

Un premier jeu de données
Fichier html pour commencer.
Premier exemple -- Le code du premier exemple
Premier exemple avec deux représentations. -- Le code

Projets