csv number fingerprint

Show up to the first 500 rows of a csv and color cells that are numbers.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    
    var width = 400;
    var height = 100;
    var cellWidth = 2;
    var cellHeight = 1;
    
    d3.csv("money.csv", function(err, data) {
      // we only show up to 500 rows
      var rows = data.slice(0, 500);
      var cols = Object.keys(rows[0]);
      cellWidth = width / cols.length;
      height = cellHeight * rows.length;
      
      var canvas = d3.select("body").append("canvas").node();
      
      canvas.width = width;
      canvas.height = height;
      
      var context = canvas.getContext('2d');
      rows.forEach(function(row, i) {
        cols.forEach(function(col, j) {
          var number = false;
          var f = parseFloat(row[col])
          if(f.toString() === row[col]) number = true;
          context.fillStyle = number ? "#d88282" : "#eee";
          context.fillRect(j*cellWidth, i*cellHeight, cellWidth, cellHeight)
        })
      })
    })
    
    
    
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js