JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id='playground'></div>

CSS

table {
  margin:1em auto;
  border-collapse:collapse;
  font-family:sans-serif;
  font-size:90%
}
td {
  width:3em;
  height:3em;
  text-align:center
}

JavaScript

var data = [[56.95,50.92,46.00,47.15,58.80,47.52,45.49,54.23,57.54,50.22],
 [43.52,53.98,41.42,46.33,47.35,48.97,59.68,53.39,40.67,45.12],
 [42.50,48.27,53.22,52.70,50.66,56.13,55.96,47.94,52.10,50.21],
 [50.27,56.40,50.90,49.65,49.83,49.09,52.09,56.86,53.67,49.88],
 [51.98,46.36,53.42,48.83,47.05,50.84,44.13,61.34,49.62,54.64],
 [54.83,49.76,51.47,52.51,55.87,63.51,48.10,50.97,43.28,48.97],
 
 [56.71,50.56,50.28,57.63,51.94,49.39,51.42,57.87,44.01,58.07],
 [49.97,55.58,49.75,42.54,47.91,47.82,52.77,49.21,51.82,51.71],
 [49.93,46.18,59.31,43.85,49.52,50.62,54.91,56.73,49.27,54.37],
 [50.59,50.92,55.42,52.21,53.01,45.84,57.77,51.86,47.63,45.32]]

var flat = _.flatten(data),
  avg = _.reduce(flat, function(x, y){return x + y})/flat.length,
  deviations = _.map(flat, function(n){ return Math.pow(n - avg, 2)}),
  maxDev = _.max(deviations)

var avg2 = _.chain(data).flatten().reduce(function(x, y){return x + y})
console.log(avg2)


function data2rgb(n){
  var rgb = Math.round(255*(1-Math.pow(n-avg,2)/maxDev));
  return "rgb(255,"+rgb+","+rgb+")" 
}


var table = d3.select('#playground').selectAll('table').data([0]);
  table.enter().append('table');
  
var trs = table.selectAll('tr').data(data);
  trs.enter().append('tr'); trs.exit().remove();

var tds = trs.selectAll('td').data(I);
  tds.enter().append('td');
  tds.style('background',function(n){
      var rgb = Math.round(255*(1-Math.pow(n-avg,2)/maxDev));
      return "rgb(255,"+rgb+","+rgb+")";
    })
	  .text(ƒ('toFixed',1));


// Create a function that returns a particular property of its parameter.
// If that property is a function, invoke it (and pass optional params).
function ƒ(name){ 
  var v,params=Array.prototype.slice.call(arguments,1);
  return function(o){
    return (typeof (v=o[name])==='function' ? v.apply(o,params) : v );
  };
}
 
// Return the first argument passed in
function I(d){ return d }