2D Color Interpolation by syntagmatic

index.html

<!DOCTYPE html>
<meta charset='utf-8'>
<body>
<script src='//d3js.org/d3.v3.min.js'></script>
<script>
var size = 12;
var step = 40;

var X = d3.scale.linear()
  .domain([0, size])
  .range(['white', 'steelblue']);

var Y = d3.scale.linear()
  .domain([0, size])
  .range(['white', 'brown']);

var canvas = d3.select('body').append('canvas')
  .attr('width', size*step)
  .attr('height', size*step)
  .node();

var context = canvas.getContext('2d');

d3.range(0,size).forEach(function(y) {
  d3.range(0,size).forEach(function(x) {
    var color = d3.scale.linear()
      .domain([-1,1])
      .range([X(x), Y(y)])
      .interpolate(d3.interpolateLab);

    var strength = (y - x) / (size-1);

    circle(x,y,color(strength));
  });
});

function circle(x,y,color) {
    context.fillStyle = color;
    context.beginPath();
    context.arc((x+1/2)*step,(y+1/2)*step,2*step/5,0,2*Math.PI);
    context.fill();
};
</script>