D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
syntagmatic
Full window
Github gist
2D Color Interpolation
<!DOCTYPE html> <meta charset='utf-8'> <body> <script src='https://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>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js