Как получить разные цвета на карте Javascript Chloropleth из файла CSV? - PullRequest
Новая
       42

Как получить разные цвета на карте Javascript Chloropleth из файла CSV?

0 голосов
/ 07 апреля 2019

На веб-сайте я делаю карту избирательных выборов Соединенных Штатов. Мне нужно иметь разные цвета (красный, желтый, синий, зеленый, фиолетовый и т. Д.), А не тепловую карту, где цвета варьируются от светло-красного до темно-красного. Мои данные, которые я заполняю цвета, взяты из файла CSV. Я не могу найти хороший пример в качестве ссылки для использования при создании карты хлороплетов из CSV, которая имеет разные цвета, как этот. В настоящее время я использую Plotly, но я открыт для других идей.

Самым близким, который я нашел в качестве руководства, была эта ссылка: https://plot.ly/javascript/choropleth-maps/, но это было все еще не то, что мне было нужно. Карты типа хлороплетной жары используют ссылки на файлы CSV, а карта цветного хлороплета - нет. 

<!DOCTYPE html>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<html>

<div id="myDiv"></div>
<script>
Plotly.d3.csv("states.csv", function(err, rows){

  function unpack(rows, key) {
    return rows.map(function(row) { return row[key]; });
  }

  var data = [{
    type: 'choropleth',
    locationmode: 'USA-states',
    locations: unpack(rows, 'code'),
    z: unpack(rows, 'id'),
    zmin: 1,
    zmax: 3,
    color: [
      [1, 'rgb(251,128,114)'], [2, 'rgb(255,237,111)'],
      [3, 'rgb(179,222,105)']
    ]
  }];

console.log(data.locations);
var layout = {
        geo:{
          scope: 'usa',
        }
    };
    Plotly.plot(myDiv, data, layout, {showLink: true});
});

</script>
</html>

Мой CSV-файл выглядит так: 

code,id
AK,1
AL,1
AR,2
AS,2
AZ,1
CA,3
CO,1

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

...