这是在最近的一篇文章之后，我得到了关于绘制大热图（相异矩阵）的可能基于 Web 的技术的答案。$600 \times 600$

现在，我已经实现了这一点，我正在努力设置色阶。我想要一些精细的连续色标。现在我已经将离散化插入 17 种颜色......还不够。使用 Python，pyplot.pcolor 几乎可以完成。

我怎样才能获得这样一个“连续”的色标？

这里是由相同矩阵参数化的两个热图之间的差异：

在 Python 中使用 matplotlib.pyplot

使用 D3.js 和下面的代码

这是代码：

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

var scale = 1;
var colors = ["#6363FF", "#6373FF", "#63A3FF", "#63E3FF", "#63FFFB", "#63FFCB",
           "#63FF9B", "#63FF6B", "#7BFF63", "#BBFF63", "#DBFF63", "#FBFF63", 
           "#FFD363", "#FFB363", "#FF8363", "#FF7363", "#FF6364"];
var heatmapColor = d3.scale.linear()
    .domain(d3.range(0, 1, 1.0 / (colors.length - 1)))
    .range(colors);


// 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);
  canvas.width = size * scale;
  canvas.height = size * scale;

  var c = d3.scale.linear()
    .domain([d3.min(data, function (d) { return d.v; }), d3.max(data, function (d) { return d.v; })])
    .range([0,1]);

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