Isolines

HTML

<!--from http://vincentwoo.com/js/isolines.html#-->

CSS

html, body {
  margin: 0;
}
canvas {
  background: #fff;
}

JavaScript

var SEGS = [
  [],                                       // 0, no contour
  [{s1: 'L', s2: 'B'}],                     // 1
  [{s1: 'R', s2: 'B'}],                     // 2
  [{s1: 'L', s2: 'R'}],                     // 3
  [{s1: 'T', s2: 'R'}],                     // 4
  [{s1: 'L', s2: 'T'}, {s1: 'B', s2: 'R'}], // 5, saddle
  [{s1: 'B', s2: 'T'}],                     // 6
  [{s1: 'L', s2: 'T'}],                     // 7
  [{s1: 'L', s2: 'T'}],                     // 8
  [{s1: 'B', s2: 'T'}],                     // 9
  [{s1: 'L', s2: 'B'}, {s1: 'T', s2: 'R'}], // 10, saddle
  [{s1: 'T', s2: 'R'}],                     // 11
  [{s1: 'L', s2: 'R'}],                     // 12
  [{s1: 'R', s2: 'B'}],                     // 13
  [{s1: 'L', s2: 'B'}],                     // 14
  [],                                       // 15, no contour
];
var interval;
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth
canvas.height = window.innerHeight
document.body.appendChild(canvas)
var ctx = canvas.getContext('2d');
var data = null;
var interval = 0.05

function beginDraw() {
  if (!data) return;
  if (interval < 0.0001) return; // don't spin CPU TOO hard
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  marching_squares(interval);
}

function marching_squares(interval) {
  var max = -Infinity, min = Infinity;
  data.forEach (function(row) {
    row.forEach (function(val) {
      if (val > max) max = val;
      if (val < min) min = val;
    });
  });
  var rows = data.length - 1;
  var cols = data[0].length - 1;
  var scale = cols / rows > canvas.width / canvas.height ?
    canvas.width / cols : canvas.height / rows;
  for (var threshold = min; threshold <= max; threshold += interval) {
    marching_squares_threshold(data.map (function(row) {
      return row.map (function(val) {
        return (val > threshold) ? 0 : 1; // flipped, 0 if above
      });
    }), rows, cols, threshold, min, max, scale);
  }
}

function...