An interpretation of Clear's heat map color algorithm

color.md

#Clear's heatmap color algorithm

<ul id="list">
  <li>Milk</li>
  <li>Greens</li>
  <li>Flour</li>
  <li>Eggs</li>
  <li>Mushrooms</li>
  <li>Mustard</li>
</ul>

//Works in Firefox, Chrome, IE12 on Win 10 preview (2015)
//remove => and add function for ES5 compat
var heatmap = (el, i, arr) => {
  i = i + 1;
  var base = arr.length > 6 ? arr.length : 6;
  var b = Math.floor(220 * ( Math.sin(i/base) )) + 8 + i;
  
  el.style.backgroundColor = 'rgb(233, ' + b + ', 33)';
};

//for ES5: Array.prototype.slice.call(document.querySelectorAll('#list li'));
var list = [...document.querySelectorAll('#list li')];

list.forEach(heatmap);