# Khan/khan-exercises

Fetching contributors…
Cannot retrieve contributors at this time
264 lines (240 sloc) 12.4 KB
 Creating box and whisker plots
randRange( 5, 10 ) randRange( 2, 20 ) $.map( _.range(15), function() { return round( randGaussian() * sqrt( TGT_VARIANCE ) + TGT_MEAN ); }) DATA.slice().sort(function(a, b) { return a - b; }) SORTED_DATA[0] SORTED_DATA[3] SORTED_DATA[7] SORTED_DATA[11] SORTED_DATA[14] createSorter() Represent the following data using a box-and-whiskers plot. Exclude the median when computing the quartiles: • NUM If it helps, you may drag the numbers to put them in a different order. The order isn't checked with your answer. SORTER.init( "sortable" ) init({ range: [[ -0.5, 16.5 ], [ -6, 2 ]], scale: [ 30, 30 ] }); addMouseLayer(); line( [ 0, -2 ], [ 15, -2 ] ); for ( tick = 0; tick <= 15; tick += 1 ) { line( [ tick, -1.75 ], [ tick, -2.25 ] ); label( [ tick, -2 ], tick, "below" ); } graph.q1 = addMovablePoint({ coord: [ 3.5, 0 ], snapX: 0.5, constraints: { constrainY: true }, normalStyle: { fill: KhanUtil.BLUE, stroke: KhanUtil.BLUE } }); graph.q2top = addMovablePoint({ coord: [ 5.5, 1 ], visible: false }); graph.q2mid = addMovablePoint({ coord: [ 5.5, 0 ], visible: false }); graph.q2bot = addMovablePoint({ coord: [ 5.5, -1 ], visible: false }); graph.mtop = addMovablePoint({ coord: [ 7.5, 1 ], visible: false }); graph.mbot = addMovablePoint({ coord: [ 7.5, -1 ], visible: false }); graph.q3top = addMovablePoint({ coord: [ 9.5, 1 ], visible: false }); graph.q3mid = addMovablePoint({ coord: [ 9.5, 0 ], visible: false }); graph.q3bot = addMovablePoint({ coord: [ 9.5, -1 ], visible: false }); graph.q4 = addMovablePoint({ coord: [ 11.5, 0 ], snapX: 0.5, constraints: { constrainY: true }, normalStyle: { fill: KhanUtil.BLUE, stroke: KhanUtil.BLUE } }); graph.leftLine = addMovableLineSegment({ pointA: graph.q1, pointZ: graph.q2mid, fixed: true }); graph.topLine = addMovableLineSegment({ pointA: graph.q2top, pointZ: graph.q3top, fixed: true }); graph.botLine = addMovableLineSegment({ pointA: graph.q2bot, pointZ: graph.q3bot, fixed: true }); graph.rightLine = addMovableLineSegment({ pointA: graph.q3mid, pointZ: graph.q4, fixed: true }); graph.q2Line = addMovableLineSegment({ pointA: graph.q2bot, pointZ: graph.q2top, snapX: 0.5, constraints: { constrainY: true }, }); graph.medianLine = addMovableLineSegment({ pointA: graph.mbot, pointZ: graph.mtop, snapX: 0.5, constraints: { constrainY: true }, }); graph.q3Line = addMovableLineSegment({ pointA: graph.q3bot, pointZ: graph.q3top, snapX: 0.5, constraints: { constrainY: true }, }); graph.q1.onMove = function( x, y ) { return x < graph.q2mid.coord[0] && x >= 0; }; graph.q4.onMove = function( x, y ) { return x > graph.q3mid.coord[0] && x <= 15; }; graph.q2Line.onMove = function( dX, dY ) { if ( this.coordA[0] <= graph.q1.coord[0] || this.coordA[0] >= graph.mtop.coord[0] ) { this.coordA[0] -= dX; this.coordZ[0] -= dX; } graph.q2top.setCoord([ this.coordA[0], graph.q2top.coord[1] ]); graph.q2mid.setCoord([ this.coordA[0], graph.q2mid.coord[1] ]); graph.q2bot.setCoord([ this.coordA[0], graph.q2bot.coord[1] ]); graph.q2top.updateLineEnds(); graph.q2mid.updateLineEnds(); graph.q2bot.updateLineEnds(); }; graph.medianLine.onMove = function( dX, dY ) { if ( this.coordA[0] <= graph.q2mid.coord[0] || this.coordA[0] >= graph.q3mid.coord[0] ) { this.coordA[0] -= dX; this.coordZ[0] -= dX; } graph.mtop.setCoord([ this.coordA[0], graph.mtop.coord[1] ]); graph.mbot.setCoord([ this.coordA[0], graph.mbot.coord[1] ]); graph.mtop.updateLineEnds(); graph.mbot.updateLineEnds(); }; graph.q3Line.onMove = function( dX, dY ) { if ( this.coordA[0] <= graph.mtop.coord[0] || this.coordA[0] >= graph.q4.coord[0] ) { this.coordA[0] -= dX; this.coordZ[0] -= dX; } graph.q3top.setCoord([ this.coordA[0], graph.q3top.coord[1] ]); graph.q3mid.setCoord([ this.coordA[0], graph.q3mid.coord[1] ]); graph.q3bot.setCoord([ this.coordA[0], graph.q3bot.coord[1] ]); graph.q3top.updateLineEnds(); graph.q3mid.updateLineEnds(); graph.q3bot.updateLineEnds(); }; Drag each part of the box-and-whiskers plot left and right so it correctly represents the data. [ graph.q1.coord[0], graph.q2Line.coordA[0], graph.medianLine.coordA[0], graph.q3Line.coordA[0], graph.q4.coord[0] ] if ( _.isEqual( guess, [ 3.5, 5.5, 7.5, 9.5, 11.5 ] ) ) { return ""; } return _.isEqual( guess, [ abs( MIN ), Q1, MEDIAN, Q3, MAX ] ); graph.q1.setCoord([ guess[ 0 ], graph.q1.coord[ 1 ] ]); graph.q2top.setCoord([ guess[ 1 ], graph.q2top.coord[ 1 ] ]); graph.q2mid.setCoord([ guess[ 1 ], graph.q2mid.coord[ 1 ] ]); graph.q2bot.setCoord([ guess[ 1 ], graph.q2bot.coord[ 1 ] ]); graph.mtop.setCoord([ guess[ 2 ], graph.mtop.coord[ 1 ] ]); graph.mbot.setCoord([ guess[ 2 ], graph.mbot.coord[ 1 ] ]); graph.q3top.setCoord([ guess[ 3 ], graph.q3top.coord[ 1 ] ]); graph.q3mid.setCoord([ guess[ 3 ], graph.q3mid.coord[ 1 ] ]); graph.q3bot.setCoord([ guess[ 3 ], graph.q3bot.coord[ 1 ] ]); graph.q4.setCoord([ guess[ 4 ], graph.q4.coord[ 1 ] ]);$.each([ graph.q1, graph.q2top, graph.q2mid, graph.q2bot, graph.mtop, graph.mbot, graph.q3top, graph.q3mid, graph.q3bot, graph.q4 ], function() { this.updateLineEnds(); });

Begin by putting the data in order:

Plot the sample minimum (smallest number):

\qquad \large{\color{PINK}{MIN}, SORTED_DATA.slice( 1 ).join( ", " )}

style({ stroke: PINK, fill: PINK }, function() { circle( [ MIN, -4.5 ], 0.13 ); });

Plot the sample maximum (largest number):

\qquad \large{SORTED_DATA.slice( 0, -1 ).join( ", " ), \color{PINK}{MAX}}

style({ stroke: PINK, fill: PINK }, function() { circle( [ MAX, -4.5 ], 0.13 ); });

Plot the median (middle number):

\qquad \large{SORTED_DATA.slice( 0, 7 ).join( ", " ), \color{PINK}{MEDIAN}, SORTED_DATA.slice( 8 ).join( ", " )}

style({ stroke: PINK, strokeWidth: 2 }, function() { line( [ MEDIAN, -5.5 ], [ MEDIAN, -3.5 ] ); });

Plot the first quartile (halfway between the smallest number and the middle number):

\qquad \large{SORTED_DATA.slice( 0, 3 ).join( ", " ), \color{PINK}{SORTED_DATA[3]}, SORTED_DATA.slice( 4 ).join( ", " )}

style({ stroke: PINK, strokeWidth: 2 }, function() { line( [ Q1, -5.5 ], [ Q1, -3.5 ] ); });

Plot the third quartile (halfway between the middle number and the largest number):

\qquad \large{SORTED_DATA.slice( 0, 11 ).join( ", " ), \color{PINK}{SORTED_DATA[11]}, SORTED_DATA.slice( 12 ).join( ", " )}

style({ stroke: PINK, strokeWidth: 2 }, function() { line( [ Q3, -5.5 ], [ Q3, -3.5 ] ); });

Your box-and-whisker plot should look like the example below the number line.

style({ stroke: PINK, strokeWidth: 2 }, function() { line( [ MIN, -4.5 ], [ Q1, -4.5 ] ); line( [ Q1, -5.5 ], [ Q3, -5.5 ] ); line( [ Q1, -3.5 ], [ Q3, -3.5 ] ); line( [ Q3, -4.5 ], [ MAX, -4.5 ] ); });
Something went wrong with that request. Please try again.