static/js/miniplot.js
/**
 * Draw a histogram of data.
 * @function drawHistogram
 * @param {Object} ctx - canvas context
 * @param {number[]} hist - binned data
 * @param {number} w - canvas width
 * @param {number} h - canvas height
 * @param {number[]} high - bins to highlight
 */
Draw a histogram of data.
Draw a histogram of data .
function drawHistogram(ctx, hist, w, h, high) {
  w = w || ctx.canvas.width;
  h = h || ctx.canvas.height;
  const recol = 'lightgrey', 
        hicol = 'royalblue'; 
  const n = hist.length;
  const scale = (h - 20) / Math.max.apply(null, hist); 
  const hista = hist.map(function (e) { return e * scale; });
  const intvl = (w - 20) / n; 
  const barw = (intvl - 2) >> 0; 
  ctx.fillStyle = recol;
  if ((high === undefined) || (high[0] === null)) {
    for (let i = 0; i < n; i++) {
      ctx.fillRect(11 + intvl * i, h - 10 - hista[i], barw, hista[i]);
    }
  }
  else {
    for (let i = 0; i < high[0]; i++) {
      ctx.fillRect(11 + intvl * i, h - 10 - hista[i], barw, hista[i]);
    }
    for (let i = high[1] + 1; i <= n; i++) {
      ctx.fillRect(11 + intvl * i, h - 10 - hista[i], barw, hista[i]);
    }
    ctx.fillStyle = hicol;
    for (let i = high[0]; i <= high[1]; i++) {
      ctx.fillRect(11 + intvl * i, h - 10 - hista[i], barw, hista[i]);
    }
  }
}
function drawHistogram ( ctx , hist , w , h , high ) { w = w || ctx . canvas . width ; h = h || ctx . canvas . height ; const recol = 'lightgrey' , hicol = 'royalblue' ; const n = hist . length ; const scale = ( h - 20 ) / Math . max . apply ( null , hist ) ; const hista = hist . map ( function ( e ) { return e * scale ; } ) ; const intvl = ( w - 20 ) / n ; const barw = ( intvl - 2 ) >> 0 ; ctx . fillStyle = recol ; if ( ( high === undefined ) || ( high [ 0 ] === null ) ) { for ( let i = 0 ; i < n ; i ++ ) { ctx . fillRect ( 11 + intvl * i , h - 10 - hista [ i ] , barw , hista [ i ] ) ; } } else { for ( let i = 0 ; i < high [ 0 ] ; i ++ ) { ctx . fillRect ( 11 + intvl * i , h - 10 - hista [ i ] , barw , hista [ i ] ) ; } for ( let i = high [ 1 ] + 1 ; i <= n ; i ++ ) { ctx . fillRect ( 11 + intvl * i , h - 10 - hista [ i ] , barw , hista [ i ] ) ; } ctx . fillStyle = hicol ; for ( let i = high [ 0 ] ; i <= high [ 1 ] ; i ++ ) { ctx . fillRect ( 11 + intvl * i , h - 10 - hista [ i ] , barw , hista [ i ] ) ; } } }
Draw a histogram of data.
Draw a histogram of data .
// regular color // highlight color // yscale // interval // bar width // no highlight // highlight a range of bars