Visualisation de données | Undisconnected

Calculer un pourcentage de différence entre 2 chiffres

Imatt — Sun, 08 May 2016 12:34:16 +0000

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 :

(462 − 271) ÷ 271 × 100 = 70.48

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

(montant2 - montant1) ÷ montant1 × 100 = pourcentage de la variation

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

The post Calculer un pourcentage de différence entre 2 chiffres first appeared on Undisconnected.

Créer un diagramme circulaire avec Google Charts

Imatt — Tue, 24 Feb 2015 05:17:18 +0000

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.




Diagramme circulaire

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.

The post Créer un diagramme circulaire avec Google Charts first appeared on Undisconnected.

Tutoriel : Introduction à la librarie javascript d3.js

Imatt — Mon, 01 Apr 2013 16:05:08 +0000

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 fait 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

W3 School, documentation sur le SVG
Le site de d3.js
Approfondir sur le DOM (Document Object Model)

The post Tutoriel : Introduction à la librarie javascript d3.js first appeared on Undisconnected.

Highcharts utilisé dans le journal Le Monde

Imatt — Tue, 02 Oct 2012 21:06:22 +0000

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

The post Highcharts utilisé dans le journal Le Monde first appeared on Undisconnected.

Visualisation de données avec sigma.js

Imatt — Sat, 21 Jul 2012 16:20:23 +0000

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.

The post Visualisation de données avec sigma.js first appeared on Undisconnected.

Infographie de malade : Évolution des navigateurs web à travers le monde

Imatt — Tue, 17 Jul 2012 16:02:46 +0000

Je viens de tomber sur une infographie de malade ! Il s’agit d’une video montrant l’évolution des différents navigateurs web (IE, Firefox, Chrome, Opéra et autres) dans chaque pays à travers le temps. (de 2008 à aujourd’hui).

On peut voir la tendance mondiale de la chute de Internet Explorer et la montée de Chrome très clairement. Ce qui est interessant dans cette vidéo est de pouvoir comparer par pays ou par continent. On s’aperçoit que cette tendance n’est pas mondiale. Internet Explorer reste vraiment majoritaire aux en Amérique du Nord, en Chine et en Australie. Par contre en Russie, en Inde et en Amérique du Sud chrome possède la meilleure part de marché. Firefox à pour sa part conquis l’Europe, la Mongolie et une grosse partie de l’Afrique du Nord.

La vidéo à été faites par statcounter.com.

Ressources :

The post Infographie de malade : Évolution des navigateurs web à travers le monde first appeared on Undisconnected.

D3.js : un pas de plus vers la data visualisation sur le web

Imatt — Wed, 04 Jul 2012 02:49:26 +0000

D3.js est une librarie graphique écrite en Javascript crée par Mike Bostock déjà auteur de la librarie Protovis. D3.js est en fait une évolution de protovis, son nom proviens de l’abréviation de Data-Driven Document.

Pourquoi D3.js au lieu de Protovis

D’après ce que j’ai compris, Mike Bostock a décidé d’arrêter le développement de Protovis pour commencer celui de d3.js dans le but d’offrir à tous une librarie puissante pour la visualisation basé sur des standards du W3C (HTML, SVG et CSS) au lieu de s’attacher à un framework propriétaire. D3.js est clairement axé Web et visualisation de données, ainsi il est très simple de manipuler des données via le DOM (Document Object Model).

Quelques exemples avec D3.js

Network Force Directed graph

New York Times

Cluster Layout

Cubism.js

Conclusion

Comme vous pouvez le voir d3.js est la source de beaucoup de type de représentations graphiques différentes mais aussi à la base de quelques libraries / plugins. Ainsi se termine la présentation (rapide je l’avoue) de la librarie d3.js. A suivre un tutoriel pour mettre en place son premier graphique avec la librarie.

The post D3.js : un pas de plus vers la data visualisation sur le web first appeared on Undisconnected.

Comment mettre des données à l’échelle avec un calcul simple

Imatt — Tue, 19 Jun 2012 12:35:13 +0000

Je suis actuellement en train de construire un plugin pour WordPress. Ce plugin a pour but d’afficher un tag cloud basé sur une librarie JS (d3.js) qui permet un rendu différent et amélioré du tag cloud de base de WordPress. Des fois certaines contraintes nous obligent à travailler à l’echelle (plus grand ou plus petit) et donc de normaliser un set de données.

L’exemple par le tag cloud (nuage de mots-clés)

Pour un tag cloud le principe consiste à compter le nombre de fois qu’un mot apparaît dans le blog (Ce nombre peut-être de grandeur très variable, par exemple un mot peu apparaître 10 fois comme un autre pourrait apparaître 1000 fois). Ensuite il faut afficher la liste des mots les plus trouvés et les faire apparaître avec une taille de police en fonction de leur nombre d’apparition dans le blog.

Le problème : Pourquoi mettre à l’echelle

Une police est quelque chose qui ne peut pas être modulé dans de grands écarts. Une police de caractère à 1000px par exemple risque de poser un petit problème de design. Et de même un mot qui n’aurait pas une grande fréquence dans un blog ne pourra pas se voir affubler une police à 2px. Vous voyez le problème.

La solution : Comment mettre à l’echelle

La solution à ce problème est d’appliquer une normalisation à votre échelle de donnée. Le principe est de « mapper » chaque valeur à sa valeur à l’échelle. Voici le calcul/code à utiliser :

//Dataset pour le tag cloud
$data = array("font" => 327, "design" => 1234, "jquery" => 123, "php" => 231, "visualisation" => 756, "html5" => 465, "wordpress" => 899, "javascript" => 534);

// Fixer un minimun et un maximum pour la font (en pixel)
$fontMin = 12;
$fontMax = 32;

//Trouver le minimum et le maximum du dataset
$datasetMin = min($data);
$datasetMax = max($data);

// Calculer les écarts
$ecartDataset  = $datasetMax - $datasetMin;
$ecartFont     = $fontMax - $fontMin;
$seuil         = $ecartFont / $ecartDataset;

// Boucle sur chaque mot 
$dataNormalise = "";
foreach($data as $texte => $freq){
   $fontSize = $fontMin + ($freq - $datasetMin) * $seuil;
   $dataNormalise[$texte] = $fontSize;
}

var_dump($dataNormalise);

Résultat du array normalisé entre 12 et 32 :

array(8) {
  ["font"]=>
  float(15.6723672367)
  ["design"]=>
  float(32)
  ["jquery"]=>
  float(12)
  ["php"]=>
  float(13.9441944194)
  ["visualisation"]=>
  float(23.395139514)
  ["html5"]=>
  float(18.1566156616)
  ["wordpress"]=>
  float(25.9693969397)
  ["javascript"]=>
  float(19.398739874)
}

Conlusion

Il s’agit donc de mapper chaque valeur pour obtenir un nombre entre le minimum et le maximum voulu. Personnellement j’utilise cette technique / formule pour travailler avec des libraries graphiques comme protovis ou d3.js. C’est assurément à garder dans sa boite à outil ! A noté que le code est ici en PHP mais ceci peu très bien se faire en n’importe quel autre language.

The post Comment mettre des données à l’échelle avec un calcul simple first appeared on Undisconnected.

Comment charger des données via Ajax avec Highcharts

Imatt — Wed, 23 May 2012 17:50:02 +0000

J’utilise de plus en plus Highcharts à mon travail et je l’apprécie de plus en plus. Voici un tutoriel qui va vous apprendre à utiliser Highcharts avec ajax. Je vais illustrer ce tutoriel avec un dataset plutôt d’actualité : le prix de l’essence mis en comparaison au prix du pétrole.

Que va t’on apprendre dans ce tutoriel sur Highcharts ?

Comment charger des données via AJAX dans Highcharts
Comment ajouter un 2ème axe Y à un graphique pour comparer des valeurs d’ordre différent.
Comment travailler les labels des axes X et Y
Comment insérer plusieurs séries de données dans un graph

Charger des données via AJAX dans Highcharts

Pour charger des données via AJAX dans Highcharts, il s’agit de construire un objet javascript contenant les options qui vont servir à générer le graph, il suffit donc de déclarer un objet et de lui attribuer les options de bases :

var chart;
var colors = ["#98DF8A", "#FFBB78", "#8C564B"];
var options = {};

options.chart = {
  renderTo: 'essenceChart',
  width: 588,
  height: 400,
  marginTop: 70,
  marginLeft: 100,
  marginRight: 100,
  type:'line'
};

options.credits = {
  enabled: false
};

options.colors = colors;

options.title = {
  text: "Évolution du prix de l'essence et du baryl de pétrole de 1995 à 2012",
  margin: 10
};

options.tooltip = {
  formatter: function() {
    return "Dépense : " + number_format(this.y,3,',',' ') + "€" ;
  }
};

Définition des variables

On créer la variable « chart » qui va servir à instancier le graphique plus tard.
On créer la array « colors » pour définir ses couleurs personnelles et ainsi overwriter les couleurs par défaut.
On créer l’objet « options » qui va contenir tous les paramètres définissant le graphique.

Définition des paramètres du graph

« options.chart » représente les paramètres généraux du graph. On va pouvoir renseigner le type, la taille, les margins, le container …
« options.credits » permet de supprimer le lien vers Highcharts en bas à droite
« options.colors » définit les couleurs à utiliser (couleur par défaut si non renseigné)
« options.title » permet de donner un titre au graphique
« options.tooltip » permet de formater l’affichage du tooltip (étiquette au passage de la souris)

Créer 2 axes Y dans Highcharts

Le but de créer de axe Y est de pouvoir comparer 2 valeurs d’ordre différent. Dans notre exemple, on va comparer le prix de l’essence en euro avec une valeur autour de 1€ et le prix de baryl de pétrole en $ autour de 50$. Vous voyez où je veux en venir ?

options.yAxis = [
  {
    title : {
      text: "Gazoil & Super 95 (€)"
    },
    labels: {
    formatter: function() {
      return this.value +' €';
    },
    style: {
      color: '#000'
    }
  }
  },{
  title: {
    text: "Baryl brent ($US)"
  },
  labels: {
    formatter: function() {
      return this.value +' $';
    },
    style: {
      color: '#8C564B'
    }
  },
  opposite: true
}];

Je pense que la définition de l’objet parle d’elle même, en gros on créer un array contenant deux objets définissant chaque axe. La beauté de Highcharts réside dans le fait qu’elle va s’occuper de mettre à l’échelle les axes en fonction des valeurs fournis, donc rien à faire de ce côté là.

Mettre en place l’axe des X avec une rotation des labels

options.xAxis = {
  categories: [],
  labels: {
    rotation: -45,
		y: 20
  }
};

Encore une fois c’est assez parlant, vous pouvez jouer avec la valeur de rotation du label pour arriver au résultat souhaité.

Insérer plusieurs dataset dans un graphique

Cela se traduit par insérer plusieurs courbe dans notre graphique avec pour chaque courbe ses valeurs propres.

options.series = [
  {
    name: 'Gazoil (€)',
    data: []
  },
  {
    name: 'Super 95 (€)',
    data: []
  },
  {
    name: 'Baryl de pétrole ($US)',
    yAxis: 1,
    data: []
  }
]

Ici nous créons donc un array de series, chaque element de cet array est un objet définissant le nom et le array qui recevra les données via ajax.

Préparation du fichier HTML qui va recevoir le graphique




Undisconnected - Prix essence illustré avec Highcharts

Chargement des données dans Highchart

Pour charger les données en ajax, j’utilise ici la methode get de Jquery pour aller lire le fichier de donnees JSON. Il suffit ensuite de manipuler les données dans votre fonction de callback pour aller nourrir les array de data de chacune de vos series. On en profite pour créer les categories (les labels) qui apparaîtrons sur l’axe des X.

$.getJSON('https://undisconnected.com/sandbox/highcharts-essence/prix-essence.json', function(essence) {

    $.each(essence, function(i,e){

      var theDate = new Date(parseInt(i),0,1);

      options.series[0].data.push(e.gazoil);
      options.series[1].data.push(e.super95);
      options.series[2].data.push(e.brent);
      options.xAxis.categories.push(i);

    })
    console.log(options.categories)
    chart = new Highcharts.Chart(options);

  });

Le resultat

Conclusion

J’espère que vous aurez pris plaisir à suivre ce tutoriel. Highcharts permet de customiser vos graphiques en javascript de manière simple, efficace et rapide. Comme vous le voyez, faire ce graphique n’est pas une tâche ultra complexe et pourtant le résultat obtenu est vraiment interessant.

Ressources :

The post Comment charger des données via Ajax avec Highcharts first appeared on Undisconnected.