La classe box-plot

Pour la création du contenu de la classe du box-plot nous allons nous appuyer sur un framework javascript relativement bien pensé pour tout ce qui touche au graphisme, il s’agit de « raphaeljs ».
Ce petit framework permet de créer un objet de type Raphael, cet objet fournit un canvas sur un panel div contenu dans le browser.
L'utilité d'un framework n'est plus à démontrer puisqu'il permet:
- de ne pas ré-inventer la roue
- de déléguer à d'autres personnes plus expertes des tâches secondaires pour notre projet
- de se focaliser sur notre propre business
- de profiter des évolutions et des améliorations du framework sans devoir mettre les mains dans le camboui.
Ce canvas supporte différente méthode graphiques donc la méthode « path » basée sur une notation SVG (Scale Vector Graphics).
Path prend comme une paramètre une string constituée des attributs suivant : M x y, ce qui signifie MoveTo (x,y) en pixel et L x y, ce qui signifie LineTo.
Une autre méthode très utile est la méthode « text ».
X – coordonnée x en pixels
Y – coordonnée y en pixels
Text – une string contenant le texte à afficher.
Sur base de ces méthodes il est donc très aisé de construire notre classe boxplot .

Le framework raphaeljs peut-être télécharger ici

Et voici le code du boxplot:

function BoxPlot ( min, q1,q2,q3, max, mean, divTarget) {
this._divTarget=null;
this._name=name;
this._min=min;
this._q1=q1;
this._q2=q2;
this._q3=q3;
this._max=max;
this._mean=mean;

if (divTarget) this._divTarget=$(divTarget);

this.show=function () {

var sWidth=this._divTarget.style.width;
var sHeight=this._divTarget.style.height;
var iMaxX=sWidth.substring(0,sWidth.length-2); //this._divTarget.style.width.substring(1,;
var iMaxY=sHeight.substring(0,sHeight.length-2); //this._divTarget.style.height;
var q1_y=iMaxY*this._q1/this._max;
var q2_y=iMaxY*this._q2/this._max;
var q3_y=iMaxY*this._q3/this._max;
var mean_y=iMaxY*this._mean/this._max;

var canvas= Raphael(this._divTarget, sWidth, sHeight);
// top whisker
var ibx=0.20*iMaxX;
var iex=0.80*iMaxX;
canvas.path("M"+ibx+" "+iMaxY+" L "+iex+" "+iMaxY);
canvas.path("M"+ibx+" "+(iMaxY-1)+" L "+iex+" "+(iMaxY-1));
var imx=0.50*iMaxX;
// Box Plot
canvas.path("M"+imx+" "+iMaxY+" L "+imx+" "+(iMaxY-q1_y));
canvas.path("M 0 "+ (iMaxY-q1_y)+ " L "+iMaxX+" "+(iMaxY-q1_y));
canvas.path("M 0 "+ (iMaxY-q1_y)+ " L 0 "+(iMaxY-q2_y) );
canvas.path("M "+iMaxX+" "+ (iMaxY-q1_y)+ " L "+iMaxX+" "+(iMaxY-q2_y) );
canvas.path("M 0 "+ (iMaxY-q2_y) + " L "+iMaxX+" "+(iMaxY-q2_y) );
canvas.path("M 0 "+(iMaxY-q2_y)+" L 0 "+(iMaxY-q3_y) );
canvas.path("M "+iMaxX+" "+(iMaxY-q2_y) +" L "+iMaxX+" "+(iMaxY-q3_y));
canvas.path("M 0 "+(iMaxY-q3_y)+" L "+iMaxX+" "+(iMaxY-q3_y));
canvas.path("M "+imx+" "+(iMaxY-q3_y)+" L "+imx+" 0");
canvas.path("M "+ibx+ " 0"+" L "+iex+" 0");
canvas.path("M "+ibx+ " 1"+" L "+iex+" 1");
// Legend
canvas.text(16,4, ""+this._max);
canvas.text(16,(iMaxY-q3_y)+4, ""+this._q3);
canvas.text(16,(iMaxY-q2_y)+4, ""+this._q2);
canvas.text(16,(iMaxY-q1_y)-5, ""+this._q1 );
canvas.text(16,iMaxY-8, ""+this._min);
canvas.text(imx, (iMaxY-mean_y), "X");

}
}

Javascript orienté objet

Contrairement aux apparences, Javascript permet de supporter des classes et des objets et par extension des frameworks complets peuvent-être écrits en Javascript (ex : prototypes, scriptacoulous, Ext Js, Raphaeljs…)

Je vais ici détailler une méthode classique de génération de classe en Javascript et donner une application directe à une classe permettant de générer des box-plots, graphique bien connu des statisticiens.

La création d’une classe en Javascript se fait simplement par la déclaration d’une fonction. Cette fonction utilise l’indentificateur « this ». Par défaut « this » pointe sur la fenêtre courante dans lequel le Javascript s’exécute. Toutefois si l’opérateur new est utilisé pour créer une instance de classe, this pointera sur cette instance plutôt que sur l’objet « window ».

Cet éclaricissement fait nous pouvons commencer à créer notre première classe :

function Boxplot ( min, q1,q2,q3, max, mean, divTarget) {

}

Vous me direz, ça ne ressemble pas vraiment à une classe mais à une bonn vieille function clasique de Javascript qui prend ,le minum, le quartile 25, la médiane, le quartile 75, le max et la moyenne de la distribution comme paramètre.

L’utilité du paramètre divTarget, très utile sera détaillé ultérieurement.

Ajoutons des membres et des méthodes à cette classe, pour se faire nous allons utiliser l’identificateur « this »

function Boxplot ( min, q1,q2,q3, max, mean, divTarget) {
this._min=min;
this._q1=q1;
this._q2=q2;
this._q3=q3;

...

}

Je vais créer autant de membres qu’il y a de paramètre dans mon constructeur et oui ici comme la classe est une fonction, son constructeur est d’office la fonction : Boxplot dans notre cas de figure.

J’utilise la notation _membre pour signifier que ce membre est privé, contrairement aux langages réellement orientés objet, Javascript ne dispose pas de restriction de visibilité. On prend donc cette convention venant de PERL pour signifier les éléments privés.

Il est intéressant d’avoir conçu une classe Boxplot toutefois si on ne peut pas l’afficher elle n’est pas très utile, nous allons donc ajouter une méthode à notre classe : show() qui permettra d’afficher le box-plot.

function Boxplot ( min, q1,q2,q3, max, mean, divTarget) {
this._min=min;
this._q1=q1;
this._q2=q2;
this._q3=q3;

...
this.show=function () {
… code de la fonction
}

}

Ici j’ai déclaré une fonction publique je n’indique pas d’underscore devant.

Concrètement comment cela va-t-il fonctionner ?

Je devrais réserver un emplacement où placer mon box-plot dans ma page web, typiquement, je vais définir un panel de type DIV qui contiendra mon résultat.

Ensuite je créer une instance de ma classe en lui passant les paramètres de la distribution que je veux boxplotter.

Concrètement ça nous donne ceci :

var boxplot = new BoxPlot(1,8.75,13,16.35,28,13.3,"test");
boxplot.show();

Test référant le panel DIV. Le résultat est donné en haut de page.

Dans le prochain billet je donnerai le détail de l’affichage du boxplot (le contenu dans la fonction show() ).

Calcul de taille d'échantillon

Lorsque l'on tente de tirer des conclusions sur une population, il est souvent commode de prendre un échantillon de cette population pour simplifier les prises de mesure. Toutefois cet échantillon doit-être représentatif de la population et aussi sufisamment grand que pour donner une confiance sufisante dans les résultats mesurer. Il existe des méthodes formelles de calcul de taille d'échantillon sur lesquelles je reviendrai ultérieurement (Seuil de signification et puissance du test). Mais très souvent, on retrouve la formule suivante:

n=sqrt(N)+1

n= taille del'échantillon
N= taille de la population, cela implique que la taille de la population doit être connue, ce qui n'est pas toujours le cas!

Il faut savoir que cette formule est totalement empirique, inutile de trouver une démonstration mathématique permettant d'arriver à ce résultat, mais que malgré les mise en garde, elle est encore tès souvent utilisée.

L'étude suivante, illustre que si N>30 et que la distribution est normale, dans 90% des cas, la formule de la racine carrée +1 donnera une taille d'échantillon capable de donner un intervalle de 95% autours de la moyenne...