Visualisation de données

La visualisation de données est utilisée dans tous les domaines. Dans les médias papiers, les schémas sont souvent utilisés pour synthétiser des données percutantes. A l'aide de l'outil informatique, il est aujourd'hui possible de créer des visualisations de données de tous types et de toutes formes. Au travers cet article, nous nous focaliserons davantage sur deux outils : le SVG, un format de données basé sur du XML, et d3JS, une librairie JS fournissant une panoplie de diagrammes utilisée dans des journaux non moins connus que le New York Times. Le langage de programmation choisi pour manipuler les données est le JS.

Choix du modèle de données

Il est à noter qu'il existe des banques de données gratuites sur le web relatives à un éventail colossal de sujets et accessibles à tous, telles que data.nantes données relatives à la métropole Nantaise ou encore data.gouv regroupant des données récoltées par des institutions publiques. Les données utilisées dans cet exemple m'ont été fournies par des étudiants de l'école Mines Nantes. Elles sont relatives à des parutions dans les universités du monde entier. Le format utilisé au début était le XML, pour plus de commodité les données ont été converties en JSON. C’est le même jeu de données qui a été utilisé à la fois pour la visualisation SVG et celle via d3JS. Les données sont injectées en AJAX :

$(document).ready(function(){
      $.ajax({
            dataType:'json',
            url:'DataVisualisation.json',
            data:{},
            success: parseJson,
            error:function(err){
                console.error(err);
            }
      });
});
Import des données JSON en AJAX

Choix de la visualisation

Il existe beaucoup de façons différentes pour faire de la visualisation de données. J'ai choisi d'en détailler deux.

Visualisation de données en utilisant une image vectorielle

L'une des deux visualisations de données, plutôt basique, a été réalisée à l'aide d'un planisphère SVG. Internet regorge d'image SVG payante ou non qui peuvent être utilisées pour ce genre d'exercice. Il est également possible de réaliser ses propres images vectorielles en format SVG à l'aide de logiciel tel que Inkscape (logiciel libre sous licence GNU is Not Unix General Public Licence (GNU GPL) – dessin vectoriel) ou encore Spket (gratuit pour une utilisation privée - modification du code). Développé en 1999, SVG est aujourd'hui utilisé dans des domaines tels que la cartographie. Dans des balises XML sont répertoriés toutes les coordonnées, dimensions et structures des objets de l'image. S'ajoute à cela, une partie relative au style en CSS ou possiblement en XSL. Le SVG peut donc être inclus dans un fichier XML mais peut également être manipulé par l'intermédiaire d'un DOM. Pour ma part, c’est un planisphère SVG qui a été utilisé, en voici le rendu brut :

Voici un extrait du code relatif à la France :

<svg [...]>
	<g>
		<path id="FR" title="France" class="land" d="M483.733,297.837l0.167,-			0.049l0.283,-0.176l0.236,-0.056l0.135,[...],0.324L502.306,330.228z"/>
	</g>
</svg>
Chemin relatif à la France en SVG

La balise SVG, introduite en HTML 5, permet d’embarquer du contenu SVG dans une page web. L’élément g est un conteneur utilisé pour regrouper l’intégralité des objets, ici les différents pays. La balise path est une balise générique permettant de créer des chemins. L’attribut d est obligatoire et référence les commandes à exécuter pour dessiner le tracé. L’id nous sert essentiellement à modifier les propriétés de l’un des objets.

Visualisation de données via d3JS

d3JS est une librairie graphique JS qui permet de réaliser des schémas / diagrammes / cartographies dynamiques basés sur un jeu de données numériques. Son utilisation s'est démocratisée en 2011 et dénombre aujourd'hui plus de 300 visualisations de données différentes. La complexité principale de son utilisation réside dans l’agencement des données. En effet, il faut fournir le format de données attendu par le d3 choisi. Une fois le schéma sélectionné, il suffit de suivre le tutoriel disponible sur Github. Pour ma part, voici le rendu du d3 choisi disponible sur Github, ainsi que sa documentation attenante :

Pour se faire, il faut créer une balise HTML à laquelle vient se greffer en JS le diagramme interactif d3JS.

<div class="bubbleChart"></div>
Div dédiée à accueiller le diagramme d3JS

Il est également nécessaire d’importer toutes les dépendances relatives au diagramme :

<script src="http://phuonghuynh.github.io/js/bower_components/d3/d3.min.js"></script>
[...]
Injection diagramme d3JS

Et enfin d’ajouter le code JS du schéma dans les scripts JS de la page disponible sur le site et modifiable à souhait :

var bubbleChart = new d3.svg.BubbleChart({
   [...]
});
Morceau de JS permettant de créer le diagramme d3JS

Agencement des données et implantation sur le modèle existant

Une dernière étape consiste à manipuler les données et à les injecter à la vue. Concernant les données, il existe une librairie JS regroupant des fonctions utilitaires pour manipuler objets, collections, tableaux, etc en JS. Elle se nomme UnderscoreJS. Pour l’utiliser, il suffit de l’injecter :

<script src="https://fastcdn.org/Underscore.js/1.8.3/underscore-min.js"></script>
Injection UnderscoreJS

Ensuite il est possible d’utiliser les différentes fonctions de la librairie telles que _.map (permet de créer un tableau issu de l’application d’une fonction sur une liste), _.filter (retourne les éléments de la liste si la condition choisie est vérifiée) ou encore _.flatten (sert à déplier un tableau) pour ne citer qu’elles. Concernant la vue, c’est le fameux framework CSS BootStrap qui a été utilisé pour mettre en forme la page.

Visualisation de données en utilisant une image vectorielle

L’idée générale de cette visualisation est de coloriser les pays en fonction du nombre de publications enregistrées et de la date sélectionnée dans une liste déroulante. Une fois triées et lorsque l’on sélectionne une année dans la liste de déroulante, on comptabilise en JS le nombre de publications par pays :

//A chaque clic
    $('#by-year').change(function(){
        var selectedDate = $("#by-year option:selected").text();
        if (selectedDate == "-- Toutes --"){
            _.each(dataViz,function(v,k){
                $('#min').text(minDataViz.nombre);
                $('#max').text(maxDataViz.nombre);
                rgb = colorize(minDataViz.nombre, maxDataViz.nombre, v.nombre);
                $('path[title="'+v.nom+'"]').css('fill', rgb);
            });
        } else {
            _.each(dataViz,function(v,k){
                 $('#min').text(minDataViz.dates[selectedDate]);
                $('#max').text(maxDataViz.dates[selectedDate]);
                rgb = colorize(minDataViz.dates[selectedDate], maxDataViz.dates[selectedDate], v.dates[selectedDate]);
                $('path[title="'+v.nom+'"]').css('fill', rgb);
            });
        }
    });
Calcul du nombre de publications par pays

Et on colorie le pays en fonction de la valeur calculée et des extremums pour l’année considérée :

function colorize(min, max, value){
     var maxRed = 255;
     var minRed = 10;
     if(min != max && value){
        var a = (maxRed - minRed) / (max - min);
        var b = maxRed - a*max;
        var y = a*value + b;
        if(y>=0){
            return "rgb("+parseInt(y)+", 100, 100)";
        }else {
            return "rgb("+minRed+", 100, 100)";
        }
    }else {
        return "rgb(0, 0, 0)";
    }
}
Colorisation des pays en fonction des publications

Voici un exemple du rendu, pour l’année 1970 :

Visualisation de données via d3JS

Une fois triées, les données sont injectées dans le code du diagramme :

var bubbleChart = new d3.svg.BubbleChart({
    data: {
        items: sortedData,
            [...]
        },
     }
);
Code du diagramme d3JS

Voici le rendu final :

Au clic sur une bulle extérieure, celle-ci prend la place de la bulle centrale.


 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.