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

我想创建一个由地理地图（例如按区域划分的国家）组成的数据可视化，并显示两个度量。 我将更好地解释它：例如，我有一个由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，它将是一个交互式的数据可视化。 但在这里，我想做一个通用的演讲，独立于所使用的语言

---

谢谢

您想要的是一个技术名称：这是一个双变量choropleth

在普通choropleth中，使用图案或颜色对给定变量进行编码。在一个双变量choropleth中，您使用两个变量来创建图案或颜色（这里是一个好的，和）

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

资料来源：

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

资料来源：

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

fill

属性中插入颜色：

var w=h=200；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var数据=d3.范围（5）.减少（功能（arr，elem）{
返回arr.concat（d3.范围（5）.映射（函数（d）{
返回{
上校：埃伦，
行：d
}
}))
}, []);
var scale1=d3.scaleLinear（）
.range（[“gainsboro”，“绿色”]）
.域（[0,4]）；
var scale2=d3.scaleLinear（）
.范围（[“gainsboro”、“#222”]）
.域（[0,4]）；
var rects=svg.selectAll（空）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“x”，d=>d.col*40）
.attr（“y”，d=>d.row*40）
.attr（“宽度”，39）
.attr（“高度”，39）
.attr（“填充”，功能（d）{
返回d3.scaleLinear（）
.范围（[scale1（d.col），scale2（d.row）]）（0.5）
})

---

又是一个多么好的答案啊！不过，你确定要被允许嵌入这些图像吗？@altocumulus不，我不确定，我会查一下。那个博客上有版权说明，但问一下也无妨！我会给他们写一封请求许可的信。@altocumulus作者同意了。谢谢你的来信。