var svg = d3.select('svg') var height = 700; var width = 1300; var times = [ 140.894, 131.685, 82.825, 67.13, 64.794, 58.199, 52.644, 44.784, 43.634, 43.536, 43.245, 41.782, 40.516, 40.152, 36.701, 33.629, 33.039, 22.708, 22.416, 22.068, 19.25, 15.468, 12.918, 12.507, 11.508, 11.018, 10.288, 9.623, 8.348, 7.071, 6.628, 6.433, 5.699, 5.69, 4.736, 4.664, 3.936, 3.781, 2.889, 2.835, 2.144, 2.005, 1.892, 1.869, 1.809, 1.093, 0.957, 0.929, 0.725, 0.602, 0.565, 0.542, 0.463, 0.434, 0.245, 0.239, 0.238, 0.216, 0.207, 0.191, 0.187, 0.172, 0.157, 0.153, 0.153, 0.147, 0.127, 0.113, 0.111, 0.096, 0.096, 0.092, 0.083, 0.08, 0.075, 0.066, 0.059, 0.057, 0.055, 0.045, 0.037, 0.02, 0.018, 0.014, 0.011, 0.01, 0.007, 0.004, 0.004, 0.002, 0.002] var rgb_range = [1,255] var red_scale = d3.scale.linear() .domain([20, 150]) .range(rgb_range) var green_scale = d3.scale.linear() .domain([1, 20]) .range(rgb_range) var x_scale = d3.scale.linear() .domain([0, times.length]) .range([10, width]) var y_scale = d3.scale.linear() .domain([0.001, 140.9]) .range([1, height]) var color_scale = d3.scale.linear() .domain([0.001, 140.9]) .range([1, 255]) var rect = svg.selectAll('rect').data(times).enter().append('rect') .attr('x', function(d,i) { return x_scale(i) }) .attr('y', function(d) { return height - y_scale(d) }) .attr('width', function(d){ return width / (times.length + 15) }) .attr('height', function(d) { return y_scale(d) }) .attr('fill', function(d){ return 'rgb('+Math.round(red_scale(d))+','+(140-Math.round(red_scale(d)))+',0)' })