来自离散域的连续色标？ [英] Continuous color scale from discrete domain of strings?

问题描述

我正在实现一个热图，其中单元格背景颜色由d3颜色标度决定。一些值是绝对的;它们的值可以是如[6TH，7TH，5TH，4TH]的N个不同的任意字符串类型。

给定起始颜色d3.rgb（blue）和结束颜色d3.rgb（red），如何构建映射离散

  
 var scale = d3.scale.ordinal（）
 .domain（[6TH，7TH，5TH，4TH]）
 .rangeBands（[d3.rgb ），d3.rgb（red）]）; 
  

这显然不起作用。

解决方案

首先，我会考虑使用一个现成的Colorbrewer秤;请参阅 colorbrewer2.org 。这些也可以在D3的git仓库中作为JavaScript和CSS文件使用;请参阅 lib / colorbrewer 。例如，如果您的域中有四个离散值，并且您想要一个红蓝色的分化比例，您可以说：

  var color = d3.scale.ordinal（）
 .domain（[6TH，7TH，5TH，4TH]）
 .range（colorbrewer.RdBu [4]） ; 
  

（您需要一个< script src =colorbrewer.js >< / script> 在此之前的某处。）Colorbrewer有多种精心设计的顺序，发散和分类色阶。

如果您坚持卷动自己的色标，我强烈建议您在 L * a * b *或HCL颜色中插入空间以准确感知。您可以使用 d3.interpolateLab 或 d3.interpolateHcl 。例如， d3.interpolateLab（red，blue）（。5）返回红色和蓝色之间的颜色。

要计算序数标度范围的颜色，您可以使用插值器，或者您可能会发现临时线性标尺更方便。例如：

  var categories = [6TH，7TH，5TH，4TH]; 
 
 var color = d3.scale.ordinal（）
 .domain（categories）
 .range（d3.range（categories.length）.map（d3.scale.linear （）
 .domain（[0，categories.length  -  1]）$ ​​b $ b .range（[red，blue]）
 .interpolate（d3.interpolateLab）））; 
  

I'm implementing a heatmap in which the cell background color is determined by a d3 color scale. Some of the values are categorical; their value can be of N different arbitrary string-type categories like ["6TH", "7TH", "5TH", "4TH"].

Given a start color d3.rgb("blue") and an end color d3.rgb("red"), how can I construct color scale that maps a discrete domain of strings into a continuous color range?

I tried

var scale = d3.scale.ordinal()
    .domain(["6TH", "7TH", "5TH", "4TH"])
    .rangeBands( [ d3.rgb("blue"), d3.rgb("red") ] );

which obviously doesn't work.

解决方案

First, I would consider using one of the readily-available Colorbrewer scales; see colorbrewer2.org. These are also available as JavaScript and CSS files in D3's git repository; see lib/colorbrewer. For example, if you have four discrete values in your domain, and you want a red-blue diverging scale, you could say:

var color = d3.scale.ordinal()
    .domain(["6TH", "7TH", "5TH", "4TH"])
    .range(colorbrewer.RdBu[4]);

(You'll need a <script src="colorbrewer.js"></script> somewhere before this, too.) Colorbrewer has a variety of well-designed sequential, diverging and categorical color scales.

If you insist on rolling your own color scale, I strongly recommend interpolating in L*a*b* or HCL color space for accurate perception. You can do this using d3.interpolateLab or d3.interpolateHcl. For example, d3.interpolateLab("red", "blue")(.5) returns a color halfway between red and blue.

To compute the colors for your ordinal scale's range, you can use an interpolator, or you might find a temporary linear scale more convenient. For example:

var categories = ["6TH", "7TH", "5TH", "4TH"];

var color = d3.scale.ordinal()
    .domain(categories)
    .range(d3.range(categories.length).map(d3.scale.linear()
      .domain([0, categories.length - 1])
      .range(["red", "blue"])
      .interpolate(d3.interpolateLab)));

这篇关于来自离散域的连续色标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！