Histogram Calculator (with points)

by jlbriggs

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width:500px;height:400px;margin:1.5em 1em;"></div>

<script>
  var d = new Date();
  var pointStart = d.getTime();
  Highcharts.setOptions({
    global: {
      useUTC: false
    },
    colors: [
      'rgba( 253, 99,  0,   0.9 )', //bright orange
      'rgba( 0,   154, 253, 0.9 )', //bright blue
      'rgba( 40,  40,  56,  0.9 )', //dark
      'rgba( 253, 0,   154, 0.9 )', //bright pink
      'rgba( 154, 253, 0,   0.9 )', //bright green
      'rgba( 145, 44,  138, 0.9 )', //mid purple
      'rgba( 45,  47,  238, 0.9 )', //mid blue
      'rgba( 177, 69,  0,   0.9 )', //dark orange
      'rgba( 140, 140, 156, 0.9 )', //mid
      'rgba( 238, 46,  47,  0.9 )', //mid red
      'rgba( 44,  145, 51,  0.9 )', //mid green
      'rgba( 103, 16,  192, 0.9 )' //dark purple
    ],
    chart: {
      alignTicks: false,
      type: '',
      margin: [60, 25, 100, 90],
      //borderRadius:10,
      //borderWidth:1,
      //borderColor:'rgba(156,156,156,.25)',
      //backgroundColor:'rgba(204,204,204,.25)',
      //plotBackgroundColor:'rgba(255,255,255,1)',
      style: {
        fontFamily: 'Abel,serif'
      }
    },
    title: {
      text: 'Generate a Histogram',
      align: 'left',
      margin: 10,
      x: 50,
      style: {
        fontWeight: 'bold',
        color: 'rgba(0,0,0,.9)'
      }
    },
    subtitle: {
      text: 'From raw data array',
      align: 'left',
      x: 52,
    },
    legend: {
      enabled: true
    },
    plotOptions: {
      area: {
        lineWidth: 1,
        marker: {
          enabled: false,
          symbol: 'circle',
          radius: 4
        }
      },
      arearange: {
        lineWidth: 1
      },
      areaspline: {
        lineWidth: 1,
        marker: {
          enabled: false,
         ...

CSS

@import url(https://fonts.googleapis.com/css?family=Changa+One|Loved+by+the+King|Fredericka+the+Great|Droid+Serif:400,700,400italic|Abel|Oswald:400,300,700);
body {
  font-family: Abel, Calibri, Helvetica, sans-serif;
  font-size: 95%;
}

JavaScript

var chart;
console.log(Highcharts);
$(function() {
  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    title: {},
    subtitle: {},
    legend: {
      enabled: true
    },
    tooltip: {},
    plotOptions: {
      series: {
        pointPadding: 0.05,
        groupPadding: 0,
        borderWidth: 0.5,
        borderColor: 'rgba(253,99,0,0.25)',
				color: 'rgba(253,99,0,0.1)'
      }
    },
    xAxis: {
      title: {
        text: 'Range'
      }
    },
    yAxis: {
      title: {
        text: 'Frequency'
      },
      min: 0
    }
  });
  chart = $('#container').highcharts();

  var rawData = [39, 94, 87, 98, 17, 101, 95, 23, 84, 25, 14, 128, 24, 6, 13, 16, 6, 14, 29, 18, 32, 33, 66, 59, 82, 105, 79, 25, 58, 56, 101, 7, 133, 11, 9, 79, 11, 80, 76, 54, 134, 105, 9, 106, 98, 12, 50, 156, 90, 120, 153, 152, 124, 148, 32, 37, 103, 85, 103, 97, 97, 114, 114, 84, 88, 88, 98, 87, 87, 108, 161, 123, 108, 48, 109, 30, 14];
  console.log(rawData);
  var binnedData = binData(rawData);

  chart.addSeries({
    name: 'Distribution',
    data: binnedData.hist
  });
  chart.addSeries({
    type: 'scatter',
    name: 'points',
    marker: {
      radius: 4,
      lineColor: 'rgba(255,255,255,0.75)',
      fillColor: 'rgba(253,99,0,0.75)',
      lineWidth: 1
    },
    data: binnedData.points
  });

})

//-------------------------------------------------------
function binData(data) {

  data.sort(numSort);

  //the output array
  var hData = new Array();
  var pData = new Array();

  //determine how many bins we need
  var size = data.length;
  var cells = Math.round(Math.sqrt(size));
  cells > 50 ? cells = 50 : cells = cells;

  //determine the width of a bin
  var max = Math.max.apply(null, data);
  var min = Math.min.apply(null, data);
  var range = max - min;
  var width = range / cells;

  //bin the data
  var width_bottom;
  var width_top;
  //loop through the number of cells
  for (var i = 0; i < cells; i++) {

    //set the upper and lower...