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

这里有两个问题：

与量化比例不同，分位数比例中的域不是两个值之间的范围。它必须是包含所有值的数组。 API很清楚：

如果指定了域，则将分位数比例的域设置为指定的离散数值。（强调我的）
这不是使用d3.interpolateViridis的正确方法。同样，API很明确：

给定范围[0,1]中的数字t，返回“viridis”感知统一颜色方案中的相应颜色

因此，一个简单的解决方案是创建分位数比例，使其根据您的数据数组（此处，我创建10个分箱）从0返回1的数字：

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>

使用scaleQuantile和“viridis”配色方案

1 个答案: