Show up to the first 500 rows of a csv and color cells that are numbers.
Built with blockbuilder.org
xxxxxxxxxx
<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