Choroplethの地図縮尺と伝説

Question

私はD3.jsの新しいもので一般的なコーディングであると言ってこれを前に説明します。私はインフォグラフィックアーティストであり、私はQGISを使って地図を作成していましたが、D3.jsを使ってオピオイドの死亡に関するストーリーのchoroplethマップを作成しようとしています。基本的に私はこのマップを再作成しようとしています。 map from the Economist

私はマイク・ボストックことで、このmapを使用し、いくつかのパラメータを変更することにより、起動しようとしているが、色の範囲と規模で立ち往生しています。測定は人口10万人につき1です。私は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つ以上、3つ以上、3つ以上、4つまで...および9を超える。このドメインは、範囲内で定義される9つの値にマッピングされる。

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

25以上の値が一つの色になるように、それらの色のしきい値を設定し、適切な閾値（S）を有する配列を有するドメインを定義するには以下のスニペットで

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

を、このドメインが適用されます。四角形の色はその位置に依存し、四角形は25番目（左から右に数えて1つずつ）の色が1つの色になります。

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>