Boite à moustache (Tukey)ou boxplot, box construct etc...

39 views
Skip to first unread message

hilmi mohamed

unread,
Oct 23, 2021, 7:53:55 AM10/23/21
to JSXGraph
Je cherche à réaliser (ou s'il existe des exemples) des graphiques en boite à moustache (Tukey plot);
merci

I am trying to  realize (or if there are examples) box-mustache graphics (Tukey plot); like the plotly library (https://plotly.com/javascript/box-plots/#horizontal-box-plot)
thank you
Mr HILMI

Alfred Wassermann

unread,
Oct 28, 2021, 5:32:27 AM10/28/21
to JSXGraph
This is a very good suggestion. I put up a first example at https://jsfiddle.net/acuLf31q/1/ .
Meanwhile, percentile calculations were added to JXG.Math.Statistics. These will be available in the next version.
We are also inclined to add a new element board.create('boxplot', [data, x, width, ...], {fillColor, strokeColor, ...}); to JSXGraph based on this
example in the jsfiddle.
Can you please suggest which further parameters would be helpful?
Best wishes,
Alfred


hilmi mohamed

unread,
Nov 2, 2021, 9:27:00 AM11/2/21
to JSXGraph
Merci Alfred
j'attend avec plaisir les modifications que vous allez apporter à la nouvelle version de la librery jsxgraph.
Pour les suggestions :
( d'abord le contexte : Nous sommes un groupe de professeurs d'un lycée au sud de la france qui utilise le plugin Formulas combiné avec la librery JSXGraph dans notre plateforme Moodle pour nos élèves, )

Deux problèmes s'opposent à nous:
_ 1ere  : proposer des exercices avec des graphiques et demander à l'apprenant de répondre aux questions à partir du graphique (on sait faire ; c'est résolu).
_2eme: proposer des exercices dans lesquels on demande à l'apprenant de répondre par un graphique (de fonction par exemple) ou un dessin géométrique (des figures 2D ou 3D ou autres) sans oublier les repésentations statistiques
ca on ne sait pas faire,  avez vous des solutions pour ce genre  d'exercices : https://www.transum.org/Maths/Exercise/Box_Plots.asp?Level=3.
Je vous remercie de votre disponibiliés et des efforts que vous fournissez.

Translate

Thanks Alfred
I look forward to your changes to the new version of the jsxgraph librery.
For suggestions: (first the context: We are a group of teachers from a high school in the south of France who use the Formulas plugin combined with the JSXGraph librery in our Moodle platform for our students,)
Two problems oppose us:
_ 1st: we propose exercises with graphs and ask the learner to answer the questions from the graph (we know how to do; it is solved).
_2nd: we propose exercises in which the learner is asked to respond with a graph (of function for example) or a geometric drawing (2D or 3D figures or others) without forgetting the statistical representations We don't know how to do this, do you have any solutions for this kind of exercise:      https://www.transum.org/Maths/Exercise/Box_Plots.asp?Level=3.
Thank you for your availability and the efforts you provide.

Alfred Wassermann

unread,
Nov 3, 2021, 8:02:59 AM11/3/21
to JSXGraph
OK, we created the new JSXGraph element "boxplot" which will be available in today's nightly build (after 10pm CET).
You can supply fixed values for the quantiles, but also functions. Here are a few examples:

<div id='jxgbox0' class='jxgbox' style="width:600px; height:600px; /*max-height:100%; aspect-ratio:1/1*/"></div>
<script language="Javascript" type='text/javascript'>
(function() {
var board = JXG.JSXGraph.initBoard('jxgbox0', {axis:true, boundingbox:[-8,8,8,-8], keepAspectRatio:false});
var Q = [ -1, 2, 3, 3.5, 5 ];
var b = board.create('boxplot', [Q, 2, 4]);
})();
</script>

<div id='jxgbox1' class='jxgbox' style="width:600px; height:600px; /*max-height:100%; aspect-ratio:1/1*/"></div>
<script language="Javascript" type='text/javascript'>
(function() {
var board = JXG.JSXGraph.initBoard('jxgbox1', {axis:true, boundingbox:[-5,90,5,30], keepAspectRatio:false});

var Stat = JXG.Math.Statistics;
var data = [57, 57, 57, 58, 63, 66, 66, 67, 67, 68, 69, 70, 70, 70, 70, 72, 73, 75, 75, 76, 76, 78, 79, 81];
var Q = [];

Q[0] = JXG.Math.Statistics.min(data);
Q = Q.concat(JXG.Math.Statistics.percentile(data, [25, 50, 75]));
Q[4] = JXG.Math.Statistics.max(data);

var b = board.create('boxplot', [Q, 0, 3]);
})();
</script>

<div id='jxgbox2' class='jxgbox' style="width:600px; height:600px; /*max-height:100%; aspect-ratio:1/1*/"></div>

<script language="Javascript" type='text/javascript'>
(function() {
var board = JXG.JSXGraph.initBoard('jxgbox2', {axis:true, boundingbox:[-8,8,8,-8], keepAspectRatio:false});
var Q = [ -1, 2, 3, 3.5, 5 ];
var b = board.create('boxplot', [Q, 3, 4], {dir: 'horizontal', smallWidth: 0.25, color:'red'});
})();
</script>

<div id='jxgbox3' class='jxgbox' style="width:600px; height:600px; /*max-height:100%; aspect-ratio:1/1*/"></div>
<script language="Javascript" type='text/javascript'>
(function() {
var board = JXG.JSXGraph.initBoard('jxgbox3', {axis:true, boundingbox:[-8,8,8,-8], keepAspectRatio:false});
var mi = board.create('glider', [0, -1, board.defaultAxes.y], {attachToGrid:true, snapY: 5});
var ma = board.create('glider', [0, 5, board.defaultAxes.y], {});
var Q = [function() { return mi.Y(); }, 2, 3, 3.5, function() { return ma.Y(); }];

var b = board.create('boxplot', [Q, 0, 2]);
})();
</script>

The last example uses dynamic values for the min and max, you can adjust it to your needs easily.
Please, give us feedback if everything works.
Best wishes,
Alfred


hilmi mohamed

unread,
Nov 3, 2021, 10:32:50 AM11/3/21
to jsxg...@googlegroups.com
It's pure happiness, Alfred. Thank you once again, I'm going to test The new features after 10 p.m.

--
You received this message because you are subscribed to a topic in the Google Groups "JSXGraph" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jsxgraph/-zzJJJeNiW0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jsxgraph+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jsxgraph/667e7721-a76b-462e-8173-035879226550n%40googlegroups.com.


--
Cordialement
Mohamed HILMI
Reply all
Reply to author
Forward
0 new messages