将scaleQuantile与"viridis“配色方案一起使用

Question

我有一些数据，它们的值的范围是(0,100)，但它们中的大多数值都在80到100之间。

数据示例：97.00 93.30 92.20 92.70 91.10 89.10 89.90 89.10 89.70 88.90 89.00 89.30 88.76 88.46 87.45 85.05

我必须使用颜色进行可视化，使用线性比例并不是最好的，因为它不能让我很容易地区分颜色。所以我考虑使用scaleQuantile。

我读过this post，它使用从黑色到红色的颜色，但我想使用Viridis比例。我该怎么做呢？

这是我的代码片段：

var colorScale = d3.scaleQuantile(d3.interpolateViridis)
    .domain([0, 100]);

// other code

var cells = svg.selectAll('rect')
    .data(data)
    .enter().append('g').append('rect')
    .attr('class', 'cell')
    .attr('width', cellSize)
    .attr('height', cellSize)
    .attr("rx", 4)
   .attr("ry", 4)
    .attr('y', function(d) { 
        return yScale(d.nuts_name); 
    })
    .attr('x', function(d) { 
        return xScale(d.year); 
    })
    .attr('fill', function(d) {
        return colorScale(d.value);
        }
    })

谢谢

Answer 1

这里有两个问题：

1. 与量化尺度不同，分位数尺度中的域不是两个值之间的范围。它必须是包含所有值的数组。API很清楚这一点：

如果指定了domain，则将分位数刻度的域设置为指定的一组离散数值。(强调我的)

，

1. ，这不是使用d3.interpolateViridis的正确方法。再说一次，API很清楚：

给定范围为0,1的数字t，返回“viridis”感知均匀配色方案中相应的颜色。

因此，一个简单的解决方案是创建分位数刻度，它根据您的数据数组返回一个从0到1的数字(在这里，我创建了10个bin)：

var colorScale = d3.scaleQuantile()
  .domain(data)
  .range(d3.range(0, 1.1, 0.1));

然后将该值传递给d3.interpolateViridis

d3.interpolateViridis(colorScale(d))

这是一个演示。<divs>的第一行按原样使用数据，第二行使用排序数组：

​

var data = [97.00, 93.30, 92.20, 92.70, 91.10, 89.10, 89.90, 89.10, 89.70, 88.90, 89.00, 89.30, 88.76, 88.46, 87.45, 85.05];

var sortedData = data.concat().sort();

var colorScale = d3.scaleQuantile()
  .domain(data)
  .range(d3.range(0, 1.1, 0.1));

var divs = d3.select("body").selectAll(null)
  .data(data)
  .enter()
  .append("div")
  .attr("class", "cell")
  .style("background-color", function(d) {
    return d3.interpolateViridis(colorScale(d))
  });

d3.select("body").append("div")
  .style("height", "40px")

var div2 = d3.select("body").selectAll(null)
  .data(sortedData)
  .enter()
  .append("div")
  .attr("class", "cell")
  .style("background-color", function(d) {
    return d3.interpolateViridis(colorScale(d))
  });

.cell {
  width: 20px;
  height: 20px;
  margin: 2px;
  display: inline-block;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

​