D3: масштаб и цвет картограммы

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

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

Мой пример находится на git по адресу 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]); });
  }


csv javascript d3.js choropleth topojson
person Monduiz    schedule 15.11.2014    source источник
comment
Для нас будет полезнее, если вы опубликуете скрипку, а не свой живой код.   -  person bencripps    schedule 15.11.2014

Ответы (1)


arrow_upward
2
arrow_downward

В вашей функции 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]); });

}
person Ben Southgate    schedule 15.11.2014
comment
Бен, это работает. Благодарю вас! Когда я увидел ваши модификации, у меня был момент DOH. Цвета, которые я получаю, отображаются плохо, черный на севере и в основном красный, поэтому мне, вероятно, нужно поиграть с масштабом. - person Monduiz; 15.11.2014
comment
Хорошо, когда я использую пороговый диапазон, я получаю лучшие результаты. Большинство областей имеют небольшие числа, поэтому лучше всего работать с произвольным диапазоном. Для черных областей мне, вероятно, нужно определить нулевой класс в домене и диапазоне. - person Monduiz; 15.11.2014
comment
Я не знаю, полезно ли добавление еще одного комментария, но черные области не имеют ничего общего с масштабом. Я только что понял, что в моем файле данных отсутствуют подразделения переписи (CSD). Всего CSD чуть больше 5000, и у меня около 4000 в data.csv. Мне просто нужно переделать таблицу из моей базы данных, чтобы включить все области, и это все решит. Таким образом, конечным результатом является пороговая шкала с использованием небольших классов, таких как 200, 500, 1000, 2000, 5000, и обеспечением того, чтобы все области были в csv. Кроме того, Бен, я бы проголосовал за тебя, но у меня недостаточно репутации! - person Monduiz; 15.11.2014