heatmap color and d3.js
Actually you are almost there. Just use the min/max function directly in the  color scale instead of using the c var. Use the max/min function in the domain and the start/stop color in the range. The d3.scale is already a gradient function.

Something like:

&lt;script src="http://d3js.org/d3.v3.js"&gt;&lt;/script&gt;
&lt;canvas id="heatmap"&gt;&lt;/canvas&gt;
&lt;script&gt;
var tsvName = 'wasserstein_dists.tsv';
var canvas = document.getElementById('heatmap');
var ctx = canvas.getContext("2d");

var scale = 1;

// On charge le tsv :
d3.tsv(tsvName, function (d) {
  return {
    x: +d.x,
    y: +d.y,
    v: +d.v,
  };
}, function (err, data) {
  if (err != null) { return alert('No tsv file'); }

  var size = Math.sqrt(data.length);
  var heatmapColor = d3.scale.linear()
    .domain([d3.min(data, function(d) { return d.v; }), d3.max(data, function(d) { return d.v; })])
    .range(["#6363FF",  "#FF6364"]);
  canvas.width = size * scale;
  canvas.height = size * scale;

  data.forEach(function (d) {
    ctx.fillStyle = heatmapColor(d.v);
    ctx.fillRect(d.x * scale, d.y * scale, (d.x + 1) * scale, (d.y + 1) * scale);
  });
});


Of cause you have to first define data and then the color gradient with the min/max function.