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 :

la première a été d’enfermer le code dans une fonction afin qu’il soit réutilisable aisément ;
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.

favicon, sidebar

Feb 20 2016

Créer une favicon

Si on n’est pas designer ou graphiste, il vaut mieux utiliser un site de génération automatique : site générateur de favicon

Modifier le texte à côté de la favicon

Il suffit d’indiquer le paramètre du site qui contient le titre i.e. Title.

dans <dossier du site>/config.toml, insérer dans la section Params:

[Params]
	Title="le nouveau titre"

Mettre le lien vers un post dans la sidebar

Ajouter dans l’entête de l’article sidebar = true et weight = 10 qui indique la position relative des liens de la sidebar (le plus lourd tombe au fond)

+++
date = "2016-02-20"
draft = false
title = "favicon, sidebar"
sidebar = true
weight = 10
+++

google analytics

Feb 20 2016

Script à intégrer

sur le site de Google analytics, il faut inscrire son nom de domaine, puis copier le script indiqué dans un template : themes/lanyon-hugo/layouts/partials/google_analytics.html

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXX-1', 'auto');
  ga('send', 'pageview');

</script>

Template

Il faut maintenant mettre une référence vers ce template dans le template de la page qui devra contenir le script google analytics :

dans le fichier themes/lanyon-hugo/layouts/_default/single.html, ajouter :

{{ partial "google_analytics.html" . }}

Ajouter des commentaires via disqus

Feb 17 2016

Script de configuration

Pour permettre le chargement de la zone de commentaires créée par disqus, il faut créer un template en créant le fichier : themes/lanyon-hugo/layouts/partials/disqus.html.

Ce fichier doit contenir le code suivant (code récupéré sur le site de hugo). Le code est spécifique pour permettre le chargement des commentaires, uniquement si le serveur ne tourne pas sur localhost.

<div id="disqus_thread"></div>
<script type="text/javascript">

(function() {
    // Don't ever inject Disqus on localhost--it creates unwanted
    // discussions from 'localhost:1313' on your Disqus account...
    if (window.location.hostname == "localhost")
        return;

    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    var disqus_shortname = '{{ .Site.DisqusShortname }}';
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

Template

Il faut maintenant mettre une référence vers ce template dans le template de la page qui devra contenir la zone disqus :

dans le fichier themes/lanyon-hugo/layouts/_default/single.html, ajouter :

{{ partial "disqus.html" . }}

de telle sorte que le contenu soit :

{{ partial "default_head.html" . }}

<div class="post">
  <h1 class="post-title">{{ .Title }}</h1>
  <span class="post-date">{{ .Date.Format .Site.Params.DateForm }}</span>
  {{ .Content }}
</div>

{{ partial "disqus.html" . }}
{{ partial "default_foot.html" . }}

disqusShortname

Enfin, ajouter aux paramètres du site, dans le fichier config.toml

disqusShortname = "le_nom_indique_par_disqus lors de l'inscription du disqus"

hugo, highlight.js et d3.js

Feb 14 2016

Highlight.js (à partir d’un cdn i.e. content delivery network)

Pour pouvoir activer la coloration syntaxique pour le thème Lanyon, on peut inclure dans le header les chemins vers les scripts (entre les balises <head> et </head>):

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

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/default.min.css">

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>

<script>hljs.initHighlightingOnLoad();</script>

On peut maintenant tester que cela fonctionne en entrant :

import numpy as np
import pandas

for i in range(10):
  print(i)

D3.js (à partir d’un cdn)

De la même façon, il faut indiquer dans head.html (le même fichier que dans la section précédente) :

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js"></script>

mise en place

Feb 7 2016

Hugo

Hugo est un programme de génération de site statique qui permet de transformer aisément des fichiers markdown en site web.

Configuration

Pour connaître l’architecture du système :

$ uname -i

Récupérer hugo et suivre les instructions d’installation (c’est en fait un fichier binaire, il n’y a pas de réelle installation).

On peut maintenant créer un squelette de site :

$ hugo new site <nom du site>

crée un répertoire qui contient une structure prédéfinie destinée à être transformée par Hugo en site web.

$ cd <nom du site>/post/
$ mkdir themes

le dossier themes contiendra l’esthétique du site ainsi que les ressources statiques (javascript, image etc…) qu’on voudra utiliser par la suite.

Maintenant que le dossier de themes est prêt, on peut y cloner un thème

$ cd themes
$ git clone https://github.com/tummychow/lanyon-hugo.git

Le thème ne fonctionnera pas directement : il faut indiquer un paramètre dans le fichier de configuration config.toml à la racine du site :

[Params]
	DateForm = "Jan 2 2006"

Tant qu’on est dans le fichier de configuration, on peut (mais pas obligatoire) en profiter pour changer le titre du site et la baseurl qui contient le nom de domaine :

baseurl = "http://mon-superbe-site/"
languageCode = "fr-fr"
title = "notepad"

On peut maintenant créer un nouveau post :

$ cd <nom du site>
$ hugo new post/premier_post.md

Cette commande créera un fichier post.md dans le répertoire <nom du site>/content/post/

Le fichier post.md comporte un entête particulier destiné à être interprété par hugo:

+++
date = "2016-02-07T15:02:19+01:00"
draft = true
title = "titre du post qui sera affiché dans le site"
+++

Ajouter du contenu à la suite de l’entête et lancer la commande :

$ hugo server --theme=lanyon-hugo --buildDrafts

Si on est sous windows, pour la version de hugo disponible actuellement (le problème devrait disparaître pour la version v0.16), il faut plutôt lancer la commande :

$ hugo server --theme=lanyon-hugo --buildDrafts --renderToDisk=true

Cette commande indique à hugo d’utiliser le theme lanyon-hugo (qu’on vient de cloner depuis github) et d’afficher tout les posts, y compris les drafts. En effet, l’entête contenait draft=true : par défaut, sans l’option --buildDrafts, hugo n’aurait pas traité notre post.md pour le transformer en site web.

à ce stade, nous avons une page acessible en prévisualisation dans le navigateur (un vrai navigateur, pas internet explorer) ; il suffit d’indiquer l’url : localhost:1313 dans la barre d’adresse.

Où en est-on ?

Je peux créer un site en rédigeant mes posts en markdown, avec un thème minimaliste et je peux prévisualiser le résultat dans mon navigateur.

Older Newer

FWD>>FunWithData

Graphique simple nvd3

nvd3

premier graphique

explications

favicon, sidebar

Créer une favicon

Modifier le texte à côté de la favicon

Mettre le lien vers un post dans la sidebar

google analytics

Script à intégrer

Template

Ajouter des commentaires via disqus

Script de configuration

Template

disqusShortname

hugo, highlight.js et d3.js

Highlight.js (à partir d’un cdn i.e. content delivery network)

D3.js (à partir d’un cdn)

mise en place

Hugo

Configuration

Où en est-on ?