D3 Javascript Map Scattered Scattered Data

Question

私はまったく初心者です。私は5,000を超える市町村の地図を作成しています。この場合、データは非常に散在しています。たとえば、人口は10,000から11,500,000の範囲です。そこで、インターネットでの調査では、JS D3で地図を作成するためのウォークスルーが見つかりました。そして私はその手順に従います。しかし、規模は私の問題です。

スケールは、以下のコードに従って定義されます。これは、最小から最大15までの範囲を線形の15の制限値に分割したものです。問題は、市町村の95％以上が関与する0〜766,000の最初の範囲にかかることです。だから私は単色マップを持っています。分散したデータのために、データのより現実的な拡散を示すために対数スケールがより適切であると私は考える。誰かがこれで私を助けることができますか？定義により

var quantize = d3.scale.quantize() 
    .range(d3.range(15).map(function(i) { return 'q' + i + '-15'; })); 
var formatNumber = d3.format(","); 
var legendX = d3.scale.linear(); 

var legendXAxis = d3.svg.axis() 
.scale(legendX) 
.orient("bottom") 
.tickSize(4) 
.tickFormat(function(d) { 
    return formatNumber(d); 
}); 

var legendSvg = d3.select('#legend').append('svg') 
.attr('width', '100%') 
.attr('height', '55'); 

var g = legendSvg.append('g') 
    .attr("class", "legend-key YlGnBu") 
    .attr("transform", "translate(" + 25 + "," + 25 + ")"); 

g.selectAll("rect") 
    .data(quantize.range().map(function(d) { 
     return quantize.invertExtent(d); 
    })) 
.enter().append("rect"); 

    var legendWidth = d3.select('#map').node().getBoundingClientRect().width - 50; 

    var legendDomain = quantize.range().map(function(d) { 
    var r = quantize.invertExtent(d); 
    return r[1]; 
    legendDomain.unshift(quantize.domain()[0]); 

Answer 1

、量子化スケールは線形である：

クオンタイズスケールは別個とリニアスケールの変異体ではなく連続した範囲です。

しかし、いくつかのスケールを混合することによって達成することができます：d3.scale.pow()とd3.scale.threshold()です。

最初に、パワースケールを使用して指数関数的な制限を定義します。最小値が0で、最大値が10万であるとします。だから、（あなたが今使っているもの）15色のために、あなたがこれを使用することができます：

：

var min = 0, max = 10000000; 
 

 
var logScale = d3.scale.pow() 
 
\t .exponent(2) 
 
\t .domain([0,15]) 
 
\t .range([min,max]); 
 
\t 
 
var limits = d3.range(15).map(d=>logScale(d)); 
 

 
console.log(limits);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

を今、私たちは、しきい値スケールでこのlimits配列を使用しますスレッショルドスケールは量子化スケールに似ていますが、ドメインのサブセットをの範囲内の任意の値にマップすることができます。 （強調鉱山）

これはスケールです：

var min = 0, max = 10000000; 
 

 
var logScale = d3.scale.pow() 
 
\t .exponent(2) 
 
\t .domain([0,15]) 
 
\t .range([min,max]); 
 
\t 
 
var limits = d3.range(15).map(d=>logScale(d)); 
 

 
limits.shift(); 
 

 
var myScale = d3.scale.threshold() 
 
\t .domain(limits) 
 
\t .range("abcdefghijklmno".split("")); 
 
\t 
 
console.log(myScale(90)) 
 
console.log(myScale(50000)) 
 
console.log(myScale(800000))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

：ここ

var myScale = d3.scale.threshold() 
    .domain(limits) 
    .range(your colors here); 

デモ（私は色の文字を使用しています）ですPS：あなたのほとんどをリファクタリングする必要がありますあなたのコードは、quantizeをこの提案された解決策ではもう使用していないためです。