Skeeball Analysis - Heatmap

by lamarant

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.8.9/jquery.csv.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<textarea>
TimeStamp,Sample,X,Y,,,Area
2/7/2018 9:25,1,20,23,18,,16.50
2/7/2018 9:25,2,20,22,17,,
2/7/2018 9:25,3,18,22,17,,
2/7/2018 9:25,4,20,23,18,,
2/7/2018 9:25,5,17,23,18,,
2/7/2018 9:25,6,21,22,17,,
2/7/2018 9:25,7,20,21,16,,
2/7/2018 9:25,8,20,22,17,,
2/7/2018 9:25,9,19,22,17,,
2/7/2018 9:25,10,21,20,15,,
2/7/2018 9:25,11,20,22,17,,
2/7/2018 9:25,12,20,21,16,,
2/7/2018 9:25,13,21,22,17,,
2/7/2018 9:25,14,19,20,15,,
2/7/2018 9:25,15,19,22,17,,
2/7/2018 9:25,16,20,22,17,,
2/7/2018 9:25,17,21,22,17,,
2/7/2018 9:25,18,20,21,16,,
2/7/2018 9:25,19,18,22,17,,
2/7/2018 9:25,20,20,23,18,,
2/7/2018 9:25,21,21,22,17,,
2/7/2018 9:26,22,21,21,16,,
2/7/2018 9:26,23,20,24,19,,
2/7/2018 9:26,24,20,22,17,,
2/7/2018 9:26,25,21,19,14,,
2/7/2018 9:26,26,16,18,13,,
2/7/2018 9:26,27,20,19,14,,
2/7/2018 9:26,28,22,23,18,,
2/7/2018 9:26,29,21,22,17,,
2/7/2018 9:26,30,19,22,17,,
2/7/2018 9:26,31,19,22,17,,
2/7/2018 9:26,32,20,23,18,,
2/7/2018 9:26,33,20,24,19,,
2/7/2018 9:26,34,22,23,18,,
2/7/2018 9:27,35,21,22,17,,
2/7/2018 9:27,36,20,19,14,,
2/7/2018 9:27,37,20,24,19,,
2/7/2018 9:27,38,18,22,17,,
2/7/2018 9:27,39,21,22,17,,
2/7/2018 9:27,40,20,22,17,,
2/7/2018 9:27,41,19,23,18,,
2/7/2018 9:27,42,21,20,15,,
2/7/2018 9:27,43,21,22,17,,
2/7/2018 9:27,44,21,22,17,,
2/7/2018 9:27,45,21,22,17,,
2/7/2018 9:27,46,17,18,13,,
2/7/2018 9:27,47,19,21,16,,
2/7/2018 9:27,48,20,22,17,,
2/7/2018 9:27,49,19,21,16,,
2/7/2018 9:28,50,17,21,16,,
2/7/2018 9:28,51,20,22,17,,
2/7/2018 9:28,52,19,23,18,,
2/7/2018 9:28,53,18,24,19,,
2/7/2018 9:28,54,21,21,16,,
2/7/2018 9:28,55,19,21,16,,
2/7/2018...

CSS

textarea { width: 100%; height: 200px; /* display: none; */ }

JavaScript

function processCSV(csv) {
	var obj = $.csv.toObjects(csv);
  
  //get the average x and average  
  var data = [];
  var sumX = 0, sumY = 0;
  $.each(obj, function(k,v) {
  	sumX = sumX + Number(v.X);
    sumY = sumY + Number(v.Y);
  });

  var avgX = Math.round(sumX/obj.length);
  var avgY = Math.round(sumY/obj.length);
  
  $.each(obj, function(k,v) {
  	data.push({
    	n: v.Sample,
      x: (v.X-avgX),
      y: (v.Y-avgY)
    });
  });  
  
  //group the values for heatmap
  var groupedData = [{
  	x : 0, y : 0, value : 0
  }];
  $.each(data, function(k,v) {
  	var valueAdded = false;
  	$.each(groupedData, function(gk,gv) {
    	if(gv.x == v.x && gv.y == v.y) {
      	gv.value++;
        valueAdded = true;
      }
    });
    if(!valueAdded) {
    	groupedData.push({
        x : v.x,
        y : v.y,
        value : 1
      });
    }
  });
  console.log(groupedData);
	return groupedData;
}

$('button').click(function() {
	var csv = $('textarea').val();
  var dataSeries = {
  	//borderRadius: 30,
    dataLabels: {
      enabled: true,
      style: {
        textOutline: false ,
        opacity: .8
      }
    },
    data: processCSV(csv)
  };
  
  Highcharts.chart('container', {
      chart: {
        type: 'heatmap',
        marginTop: 40
      },
      credits: {
        enabled: false
      },
      title: {
          text: 'Bounce Test Data'
      },
      xAxis: {
          min: -8,
          max: 8,
          tickInterval: 1
      },
      yAxis: {
          min: -8,
          max: 8,
          tickInterval: 1
      },
      colorAxis: {
        min: 0,
        minColor: '#FFF',
        maxColor: '#F00'
    	},
      legend: {
        align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'top',
        y: 25,
        symbolHeight: 280
    },
      series: [dataSeries]
  });
});
$('button').click();