HelveticaScenario · August 29, 2015 13:59
diff --git a/liveFyre.html b/liveFyre.html
 <!DOCTYPE html>
 <html>
 <head>

  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
 <meta charset=utf-8 />
 <title>liveFyre assessment</title>
 </head>
 <body>
 <canvas id="myChart" width="1200" height="400"></canvas>
  
  <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.js"></script>
  <script src="liveFyre.js"></script>
 </body>
 </html>
diff --git a/liveFyre.js b/liveFyre.js
 /* 
  this solution takes a functional approach to the manageing and transformation
  of the data, using numerous function to massage the data into something useable.
 */

 var url = "http://bootstrap.strategy-prod.fyre.co/bs3/strategy-prod.fyre.co/340628/Y3VzdG9tLTEzODM1ODgwNTYyMzg=/2685.json";

 function reduceCount(prev, curr){
  prev[curr] = prev[curr]? prev[curr]+1: 1;
  return prev;
 }

 /*
  counter takes in an array of strings and returns a hashmap where keys are
  distinct values found in the array and the values are the number of times
  that value occured
 */
 function counter(arr){
  var toReturn = arr.reduce(reduceCount,{});
  delete toReturn[''];
  return toReturn;
 }

 //a nicety I got used to using in clojure
 function objToKeyValueArrs(obj){
  var toReturn = [];
  for(var i in obj){
    if(obj.hasOwnProperty(i)){
      toReturn.push([i,obj[i]]);
    }
  }
  return toReturn;
 }

 // to be used with partial
 function mapIdx(idx,e){
  return e[idx];
 }

 function sortByCountDescending(a,b){
  return b[1]-a[1];
 }

 //this function takes in an array of arrays such as [[a1,b1,c1],[a2,b2,c2],[a3,b3,c3]]
 //and returns an array of the form [[a1,a2,a3],[b1,b2,b3],[c1,c2,c3]]
 //I couldnt remember what this transformation was actually called, hence the bs name
 function splitArrays(arr){
  var max = _.max(arr, _.size).length;
  var toReturn = [];
  for(var i = 0; i< max;i++){
    toReturn.push(arr.map(_.partial(mapIdx,i)));
  }
  return toReturn;
 }

 // var test = ["a", "b", "c", "c", "d", "e", "a"];
 // var test2 = counter(test);
 // var test3 = objToKeyValueArrs(test2);
 // var test4 = splitArrays(test3);
 // console.log(test,test2,test3,test4);

 function genBarGraph(ctx, counted){
  var keyValArr = splitArrays(objToKeyValueArrs(counted).sort(sortByCountDescending));
  var data = {
 	labels : keyValArr[0],
 	datasets : [
 		{
 			fillColor : "rgba(220,220,220,0.5)",
 			strokeColor : "rgba(220,220,220,1)",
 			data : keyValArr[1]
 		}
 	]
  };
  return new Chart(ctx).Bar(data);
 }

 $(function(){
  jQuery.get(url,function(data){
    var dArr = [];
    data.content.forEach(function(e){
      var words = $(e.content.bodyHtml).text().split(/\s+/);
      dArr = dArr.concat(words);
    });
    var counted = counter(dArr);
    var ctx = $("#myChart").get(0).getContext("2d");
    var chart = genBarGraph(ctx, counted);
  });
 });
	<!DOCTYPE html>
	<html>
	<head>

	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
	<meta charset=utf-8 />
	<title>liveFyre assessment</title>
	</head>
	<body>
	<canvas id="myChart" width="1200" height="400"></canvas>

	<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.js"></script>
	<script src="liveFyre.js"></script>
	</body>
	</html>
	/*
	this solution takes a functional approach to the manageing and transformation
	of the data, using numerous function to massage the data into something useable.
	*/

	var url = "http://bootstrap.strategy-prod.fyre.co/bs3/strategy-prod.fyre.co/340628/Y3VzdG9tLTEzODM1ODgwNTYyMzg=/2685.json";

	function reduceCount(prev, curr){
	prev[curr] = prev[curr]? prev[curr]+1: 1;
	return prev;
	}

	/*
	counter takes in an array of strings and returns a hashmap where keys are
	distinct values found in the array and the values are the number of times
	that value occured
	*/
	function counter(arr){
	var toReturn = arr.reduce(reduceCount,{});
	delete toReturn[''];
	return toReturn;
	}

	//a nicety I got used to using in clojure
	function objToKeyValueArrs(obj){
	var toReturn = [];
	for(var i in obj){
	if(obj.hasOwnProperty(i)){
	toReturn.push([i,obj[i]]);
	}
	}
	return toReturn;
	}

	// to be used with partial
	function mapIdx(idx,e){
	return e[idx];
	}

	function sortByCountDescending(a,b){
	return b[1]-a[1];
	}

	//this function takes in an array of arrays such as [[a1,b1,c1],[a2,b2,c2],[a3,b3,c3]]
	//and returns an array of the form [[a1,a2,a3],[b1,b2,b3],[c1,c2,c3]]
	//I couldnt remember what this transformation was actually called, hence the bs name
	function splitArrays(arr){
	var max = _.max(arr, _.size).length;
	var toReturn = [];
	for(var i = 0; i< max;i++){
	toReturn.push(arr.map(_.partial(mapIdx,i)));
	}
	return toReturn;
	}

	// var test = ["a", "b", "c", "c", "d", "e", "a"];
	// var test2 = counter(test);
	// var test3 = objToKeyValueArrs(test2);
	// var test4 = splitArrays(test3);
	// console.log(test,test2,test3,test4);

	function genBarGraph(ctx, counted){
	var keyValArr = splitArrays(objToKeyValueArrs(counted).sort(sortByCountDescending));
	var data = {
	labels : keyValArr[0],
	datasets : [
	{
	fillColor : "rgba(220,220,220,0.5)",
	strokeColor : "rgba(220,220,220,1)",
	data : keyValArr[1]
	}
	]
	};
	return new Chart(ctx).Bar(data);
	}

	$(function(){
	jQuery.get(url,function(data){
	var dArr = [];
	data.content.forEach(function(e){
	var words = $(e.content.bodyHtml).text().split(/\s+/);
	dArr = dArr.concat(words);
	});
	var counted = counter(dArr);
	var ctx = $("#myChart").get(0).getContext("2d");
	var chart = genBarGraph(ctx, counted);
	});
	});