Interview Color Graph

by Spencer Smith

HTML

<canvas id="canvas" width="600" height="300"></canvas>

CSS

#canvas{
  background-color: white;
}

JavaScript

var colors = ["purple", "dodgerblue", "orange", "gold", "orange", "orange","indianred", "indianred","indianred", "dodgerblue",  "tan", "indianred", "limegreen", "limegreen", "limegreen", "tan"];

// Create config object to be passed to a createGraph() function

var barWidthPercent = .80;

var colorCount = 0;
function countNumbers(colors){
	var map = {};
  for(index in colors){
    var name = colors[index];
    if(map[name] == null){
      map[name] = 1;
      colorCount++;
      continue;
    } else {
      map[name] ++;
    }
  }
  return map;
}

function getMax(map){
	var max = 0;
  for(var name in map){
  	var currentValue = map[name];
  	if(currentValue > max){
    	max = map[name];
    }
  }
  return max;
}

function percentOfMax(value, max){
	return value / max;
}

function relativeBarWidth(width, count){
	return width / count * barWidthPercent;
}

var colorMap = countNumbers(colors);
var maxValue = getMax(colorMap);

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = ctx.canvas.width;
var height = ctx.canvas.height;

var barWidth = relativeBarWidth(width, colorCount);
var startX = width / colorCount / 2;
var startY = ctx.canvas.height;
var margin = 30;

for(var name in colorMap){
  var value = colorMap[name];
  var barTop = startY - (percentOfMax(value, maxValue)) * (ctx.canvas.height - margin);
  
  ctx.beginPath(); 
  ctx.lineWidth = barWidth;
  ctx.strokeStyle = name;
  ctx.moveTo(startX, startY);
  ctx.lineTo(startX, barTop);
  ctx.stroke();
  startX += width / colorCount;
}