Choropleth地图比例尺和图例

Question

让我先说这个，说我对D3.js和编码一般都是全新的。我是一名信息图表艺术家，我一直在使用QGIS生成地图，但我正尝试使用D3.js为关于阿片类死亡的故事生成一张全盘地图。基本上我试图重新创建这张地图。 map from the Economist

我曾尝试由迈克·博斯托克使用该map和改变一些参数，但我越来越坚持的色彩范围和规模启动。测量值为每十万人中有一个。我有一个域名，起始于1.543385761，结束于131.0814217。

我与挣扎的代码是围绕着规模的输入和输出：

var x = d3.scaleLinear() 
    .domain([0, 132]) 
    .rangeRound([600, 860]); 

var color = d3.scaleThreshold() 
    .domain(d3.range(2, 10)) 
    .range(d3.schemeBlues[9]); 

var g = svg.append("g") 
    .attr("class", "key") 
    .attr("transform", "translate(0, 40)"); 

g.selectAll("rect") 
    .data(color.range().map(function(d) { 
     d = color.invertExtent(d); 
     if (d[0] == null) d[0] = x.domain()[0]; 
     if (d[1] == null) d[1] = x.domain()[1]; 
     return d; 
    })) 
    .enter().append("rect") 
    .attr("height", 8) 
    .attr("x", function(d) { return x(d[0]); }) 
    .attr("width", function(d) { return x(d[1]) - x(d[0]); }) 
    .attr("fill", function(d) { return color(d[0]); }); 

我可以看到，我需要一些代码位将定义一切，在25为最暗的颜色。我甚至不确定我想成为我的最后一个传奇，但我很想知道如何重现这一点。我感到震惊，我能够得到这么远，但现在感觉有点失落。先谢谢你！

Answer 1

让我们来看看你的规模：

var color = d3.scaleThreshold() 
    .domain(d3.range(2, 10)) 
    .range(d3.schemeBlues[9]); 

你的域名是像这样创建一个数组：

d3.range(2,10) // [2,3,4,5,6,7,8,9] 

这些都是你的阈值，颜色将根据那些值映射小于或等于2，多于两个多达三个，多于三以及多达四个......并且超过9.该域被映射为在范围中定义的九个值：

d3.schemeBlues[9] // ["#f7fbff", "#deebf7", "#c6dbef", "#9ecae1", #6baed6", #4292c6", "#2171b5", "#08519c", "#08306b"] 

要设置的阈值的那些颜色，以便超过25的值是一种颜色，定义与阵列具有相应的阈值（一个或多个）的域：

.domain([2,3,4,5,6,7,8,25]); 

在下面的代码段中，该域被应用。矩形的颜色取决于它们的位置，在25号之后的所有矩形（从左到右依次逐行计数），其中一个将是一种颜色。

var color = d3.scaleThreshold() 
 
    .domain([2,3,4,5,6,7,8,25]) 
 
    .range(d3.schemeBlues[9]); 
 
    
 
var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width",500) 
 
    .attr("height",500); 
 
    
 
var rects = svg.selectAll("rect") 
 
    .data(d3.range(100)) 
 
    .enter() 
 
    .append("rect") 
 
    .attr("width",15) 
 
    .attr("height", 15) 
 
    .attr("y", function(d,i) { return Math.floor(i/10) * 20 + 10 }) 
 
    .attr("x", function(d,i) { return i % 10 * 20 }) 
 
    .attr("fill", function(d) { return color(d); })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script> 
 
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>