Going Ham

Visualization of 'Hamming Distance' taken from Davis Jefferies works.

No idea what Hamming Distance is but it looks cool.

This works with d3.v4

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    
    body { position:fixed;top:0;right:0;bottom:0;left:0; }
    html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

</style>
</head>

<body>
 <div id="vis"></div>
 
  <script>
 var canvas = d3.select("#vis").append("canvas"),
    context = canvas.node().getContext("2d");

window.addEventListener("resize", resize, false);
resize();

function resize() {
  var w = document.body.clientWidth,
      h = document.body.clientHeight;

canvas
      .style("position", "absolute")
      .attr("width", w)
      .attr("height", h);

var image = context.createImageData(w, h),
      dataWidth = Math.sqrt(image.data.length / (4 * w * h)),
      colour = d3.scaleLinear().domain([0, Math.ceil(Math.log(Math.max(w, h)) / Math.LN2)]);

for (var y=0, i=0; y<h*dataWidth; y++) {
    for (var x=0; x<w*dataWidth; x++) {
      var d = 1 - colour(hamming(x, y));
      image.data[i++] = d * 0x88;
      image.data[i++] = d * 0x56;
      image.data[i++] = d * 0xa7;
      image.data[i++] = 0xff;
    }
  }
  context.putImageData(image, 0, 0);
}

function hamming(a, b) {
  var distance = 0,
      v = a ^ b;
  while (v) {
    distance++;
    v &= v - 1;
  }
  return distance;
}

</script>
</body>

https://d3js.org/d3.v4.min.js