Graphique simple nvd3

Mar 7 2016

Lorsqu’on souhaite illustrer graphiquement le contenu d’un fichier de données, faire de la data visualisation, on pourra s’appuyer sur des bibliothèques javascript. La principale est d3.js. Pour une mise en oeuvre plus aisée (mais plus limitée), on peut déjà bien s’amuser avec nvd3.

nvd3

nvd3 est une bibliothèque javascript de visualisation basée sur d3.js.

Pour pouvoir utiliser nvd3, il faut récupérer le css et le javascript sur le dépôt github nvd3 puis les mettre respectivement dans :

• <dossier du site>/themes/lanyon-hugo/static/css/nv.d3.min.css et

• <dossier du site>/themes/lanyon-hugo/static/js/nv.d3.min.js.

Ensuite, dans <dossier du site>/themes/lanyon-hugo/partials/head.html, insérer :

<link href="/css/nv.d3.min.css" rel="stylesheet">
<script src="/js/nv.d3.min.js"></script>

Pour construire mon exemple, j’ai aussi inséré la référence du javascript que j’ai créé pour l’occasion :

<script src="/js/multi-series-line.js"></script>

Attention : Les exemples du site nvd3 ne fonctionnent pas avec la version du projet qui est sur github, il faut donc récupérer les exemples sur github et les adapter pour son propre usage.

En général, l’exemple disponible n’est pas utilisable directement : il faut adapter les données en entrée pour les mettre dans le format attendu par le script.

On peut tester que cela fonctionne en faisant un premier graphique.

premier graphique

Voici les Données source, ainsi que le Script exemple adapté aux données sources.

explications

Pour mettre le graphique dans la page, j’ai inséré les lignes suivantes dans mon post :

<div id="multi-series-line">
<svg width="100%" height="400px"></svg>
</div>

<script>
	msl('#multi-series-line svg', '/assets/data-multiserieslines.csv', 'Montant', 100);
</script>

L’exemple disponible sur le site nvd3 a été adapté. Il comportait le code suivant :

 /*These lines are all chart setup.  Pick and choose which chart features you want to utilize. */
 nv.addGraph(function() {
   var chart = nv.models.lineChart()
                 .margin({left: 100})  //Adjust chart margins to give the x-axis some breathing room.
                 .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
                 .transitionDuration(350)  //how fast do you want the lines to transition?
                 .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
                 .showYAxis(true)        //Show the y-axis
                 .showXAxis(true)        //Show the x-axis
   ;

   chart.xAxis     //Chart x-axis settings
       .axisLabel('Time (ms)')
       .tickFormat(d3.format(',r'));

   chart.yAxis     //Chart y-axis settings
       .axisLabel('Voltage (v)')
       .tickFormat(d3.format('.02f'));

   /* Done setting the chart up? Time to render it!*/
   var myData = sinAndCos();   //You need data...

   d3.select('#chart svg')    //Select the <svg> element you want to render the chart in.   
       .datum(myData)         //Populate the <svg> element with chart data...
       .call(chart);          //Finally, render the chart!

   //Update the chart when window resizes.
   nv.utils.windowResize(function() { chart.update() });
   return chart;
 });

Ce code a dû ête adapté de deux façons :

1. la première a été d’enfermer le code dans une fonction afin qu’il soit réutilisable aisément ;
2. la seconde a été de créer une fonction de lecture de données basée sur d3.csv afin de pouvoir lire un fichier csv en entrée du graphe.

Ces techniques seront détaillées dans un post ultérieur.