如何在地图上显示两个（或更多）不同的度量？

Question

我想创建一个由地理地图（例如按地区划分的国家/地区）组成的数据可视化，并显示两个度量标准。 我会更好地解释一下：例如，我有一个由4个区域组成的国家C：R1，R2。 R3，R4。 然后我有一个像这样的数据集：

2017 |  A  |  B  | 
------------------
  R1 | 100 |  45 |
  R2 |   5 |   7 |
  R3 |  20 |  18 |
  R4 |  33 |  74 |


2016 |  A  |  B  | 
------------------
  R1 |  90 |  25 |
  R2 |  15 |  51 |
  R3 | 120 |   1 |
  R4 |   5 |  71 |

换句话说，我对每个地区都有两个措施：措施A和措施B（可能是例如居民的数量和每天消耗的咖啡数量），在这个例子中只有两个。 如何以最佳方式查看此信息？

我想到了这样的事情：用颜色显示度量A（颜色越深，值越高）和带有图案的度量B（图案越密集，值越高）。 这样：

有更好的方法吗？我想展示两种措施之间的相关性。 如果我有更多的措施要展示？所以不只是两个而是3个或4个？

目的是从视觉和信息的角度获得良好的可视化。 最后我想我将使用d3.js，这将是一个交互式数据可视化。 但在这里，我想做一个通用的演讲，与所使用的语言无关。

谢谢

Answer 1

你想要的是一个技术名称：这是一个双变量等值线。

在正常的等值区中，您使用图案或颜色对给定变量进行编码。在双变量等值区中，您使用两个变量来创建模式或颜色（这里是一个很好的post about it by Alberto Cairo和here another nice explanation）。

因此，基本上，我们将创建一个结合两个变量的网格：

^{来源：http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/}

用户将解码这样的信息：水平渐变（从浅灰色到绿色）显示一个变量，垂直渐变（从浅灰色到粉红色）显示另一个变量。

^{来源：http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/}

这里最复杂的事情当然是创造颜色。根据您的两个变量，有几种方法可以做到这一点。在下面的演示中，我的方法是创建两个比例，每个比例对应一个变量，并在fill属性中插入颜色：

var w = h = 200;
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);
var data = d3.range(5).reduce(function(arr, elem) {
  return arr.concat(d3.range(5).map(function(d) {
    return {
      col: elem,
      row: d
    }
  }))
}, []);
var scale1 = d3.scaleLinear()
  .range(["gainsboro", "green"])
  .domain([0, 4]);
var scale2 = d3.scaleLinear()
  .range(["gainsboro", "#222"])
  .domain([0, 4]);
var rects = svg.selectAll(null)
  .data(data)
  .enter()
  .append("rect")
  .attr("x", d => d.col * 40)
  .attr("y", d => d.row * 40)
  .attr("width", 39)
  .attr("height", 39)
  .attr("fill", function(d) {
    return d3.scaleLinear()
      .range([scale1(d.col), scale2(d.row)])(0.5)
  })

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

在上面的演示中，我使用两个变量的强度和饱和度。在水平轴上，颜色从较不饱和到较饱和的绿色。在垂直轴上，颜色从浅色调变为深色调。

最后，值得一提的是 BI variate choropleth只编码两个变量。如果你想编码两个以上（我不建议，两个对用户来说足够困难），你将不得不提出另一个功能。