Visualisation de données Article

Calculer un pourcentage de différence entre 2 chiffres

Calculer un pourcentage de différence entre 2 chiffres

Un peu de mathématiques aujourd’hui. Il arrive souvent d’avoir à calculer un pourcentage d’augmentation ou simple de différence entre 2 chiffres ou 2 montants.

Voici la solution simple pour le faire avec comme exemple le chiffre de base 271 et le 2ème chiffre 462 :

Dans ce cas le 2ème chiffre représente une augmentation de 70.48% par rapport au premier chiffre. La formule à retenir est donc :

Voilà, ce n’était pas bien compliqué au final 🙂

 

Créer un diagramme circulaire avec Google Charts

Créer un diagramme circulaire avec Google Charts

Grossièrement appelés diagrammes de Normandie « camemberts », les diagrammes circulaires sont parfaits pour résumer un ensemble de données à une variable. Il est très facile de créer ce type de diagramme grâce à des librairies comme Highchart ou Google Charts. Aujourd’hui, je vais vous montrer comment créer un diagramme circulaire grâce à Google Chart.

 

Comme vous le voyez, avec juste ces quelques lignes de code, on peut créer un diagramme circulaire vraiment facilement grâce à Google Charts.

Pratique pour un projet rapide, ou montrer des statistiques à votre boss d’une belle façon.

Tutoriel : Introduction à la librarie javascript d3.js

Tutoriel : Introduction à la librarie javascript d3.js

Voici le premier d’une longue lignée (je l’espère) de tutoriaux en français portant sur la librarie d3.js. Pour en savoir plus sur cette librairie reportez vous à la présentation que j’en ai faite sur ce post. L’objectif de ce premier tutoriel est de faire quelques exemples d’utilisation très simple de la librairie.

A l’instart de Jquery, d3.js est une librarie qui permet de manipuler le DOM. Mais là où d3.js est très efficace est dans la manipulation de SVG.

Manipuler ou créer une div avec d3.js

Ajouter et manipuler un rectangle SVG

Dessiner plusieurs éléments dans un groupe svg

Gérer des données au format JSON et dessiner en fonction de ces données

Dans ce dernier exemple, nous allons construire des nodes qui sont en fait des groupes svg ayant la class « node ». Ensuite, on va dessiner, suivant les données (variable data) un cercle et afficher le nom de ce cercle dans celui -ci.

Le dernier exemple introduit plusieurs nouveaux concepts : selectAll(), data(), et enter().

selectAll()

la methode de selection selectAll permet, comme son nom l’indique de selectionner les éléments définis par le selecteur css passé en argument. selectAll(« p ») va selectionner tous les éléments présents dans le DOM.

data()

La methode data() permet de « binder » (attacher) des données à des éléments sélectionnés par la methode selectAll(). Ces données une fois attachées seront utilisables dans la suite du chainage. Exemple : attr(« fill »,function(d){return d.color});

enter()

Cette fonction va « binder » les données à des éléments et créer les éléments sélectionnés par selectAll(). Si vous n’utilisez pas enter() alors aucun élément ne sera crée. Seul les éléments existants seront utilisés et donc s’il sont inexistant, rien ne s’affichera.

Ressources

Highcharts utilisé dans le journal Le Monde

Je suis tombé récemment sur un article du journal Le Monde qui utilisait Highcharts pour visualiser l’augmentation de l’impôt sur le revenu en fonction des parts et des revenus de chaque ménage. 

Highcharts arrive à maturité

Il est interessant de voir que le journal Le Monde se sert de cette librairie pour exposer des graphiques sur son site. Serait-ce l’âge de la maturité enfin arrivé pour cette librairie ô combien géniale ! 

Je dois dire que je vois de plus en plus de réalisation graphique faites avec Highcharts. Je pense personnellement que la visualisation de données se démocratise et que des fois un graphique vaux 1000 mots.

Voici l’article en question : Impôts : ce que vous allez vraiment payer

Conclusion 

Je vous rappelle que pour vos tests Highcharts, le site data.gouv.fr est très interessant et possède un grand nombre de dataset pertinents.

Ressources 

Visualisation de données avec sigma.js

Je viens de tomber sur une nouvelle librairie Javascript qui permet de faire de la visualisation de données en réseau (network graph). Je n’ai pas encore eu le temps de l’essayer mais je vais certainement me pencher dessus rapidement.

Voici le type de graphique réalisable : 

Je vous laisse regarder les exemples sur cette page : 

http://sigmajs.org/

Si quelqu’un à déjà utilisé cette librairie, je serais interessé d’avoir des avis dessus, alors laissez un commentaire.