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

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, and 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 变量等值线仅编码两个变量。如果你想编码超过两个（我不建议，两个对用户来说已经够难了），你必须想出另一个功能。

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

How to display two (or more) different measures on a map?

data-visualization

d3.js

choropleth