D3: масштаб и цвет для карты choropleth

Question

Я работаю над картой D3 как один из нескольких прототипов для проекта, включающего статистику небольших областей. Я начинаю с простой карты, и я новичок в D3.

Я не смог отобразить диапазон цветов, используя либо пороговый, либо количественный масштаб. Я написал не менее 6 примеров для экспериментов со многими другими примерами, которые уже существуют, но я просто не могу получить диапазон для отображения в областях. Я знаю, что я близка, но есть кое-что, что мне не хватает.

Мой пример находится на git at https://github.com/Monduiz/OL-explorer. Я действительно был бы признателен за любые идеи, которые помогут мне понять, что я делаю неправильно.

Вот код, с которым я работаю, и файлы доступны по указанной выше ссылке.

var width = 960, 
    height = 500; 

var colors = d3.scale.quantize() 
    .domain([0, 1]) 
    .range(colorbrewer.YlOrRd[7]); 

var projection = d3.geo.azimuthalEqualArea() 
    .rotate([100, -45]) 
    .center([5, 20]) 
    .scale(800) 
    .translate([width/2, height/2]) 

var path = d3.geo.path() 
    .projection(projection); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

queue() 
    .defer(d3.json, "OLMCSDfr.json") 
    .defer(d3.csv, "data.csv") 
    .await(ready); 

function ready(error, can, OLM) { 
    var PopById = {}; 

OLM.forEach(function(d) { PopById[d.Id] = +d.OLMnb; }); 

    svg.append("g") 
    .attr("class", "SDR") 
    .selectAll("path") 
    .data(topojson.feature(can, can.objects.OLMCSDfr).features) 
    .enter().append("path") 
    .attr("d", path) 
    .style("fill", function(d) { return colors(PopById[d.Id]); }); 
    } 

Answer 1

В вашей ready функции, вы ссылаетесь d.Id для каждой из функций topojson, который в настоящее время не определено.

Я переключил вашу функцию на fill, чтобы захватить d.properties.SDRID вместо этого, что находится как в функциях topojson, так и в ваших элементах OLM. Оператор forEach также должен быть изменен для соответствия.

Это похоже на работу:

function ready(error, can, OLM) { 
    var PopById = {}; 

    OLM.forEach(function(d) { PopById[d.SDRID] = +d.OLMnb; }); 

    svg.append("g") 
     .attr("class", "SDR") 
    .selectAll("path") 
     .data(topojson.feature(can, can.objects.OLMCSDfr).features) 
    .enter().append("path") 
     .attr("d", path) 
     .style("fill", function(d) { 
     return colors(PopById[d.properties.SDRID]); }); 

}