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>