Блог

Главная - Вопросы по программированию - Почему у моего choropleth получается один и тот же цвет?

Почему у моего choropleth получается один и тот же цвет?

#javascript #d3.js #choropleth

#javascript #d3.js #choropleth

Вопрос:

Это мой первый вопрос здесь, поэтому, пожалуйста, потерпите.

Я пытаюсь создать choropleth (карту, на которой разные разделы окрашены в зависимости от некоторого присвоенного им значения), используя d3.js . Я использую пример, приведенный в https://www.d3-graph-gallery.com/graph/choropleth_basic.html , но изменив карту на карту Шотландии и изменив значения на плотность населения.

Когда я запускаю его, я получаю карту, но все они окрашены в один и тот же оттенок синего. Я пытался изменить домен colorScale, но безрезультатно.

Это то, что у меня есть на данный момент:

 // The svg
var svg = d3.select("svg"),
  width =  svg.attr("width"),
  height =  svg.attr("height");

// Map and projection
var path = d3.geoPath();
var projection = d3.geoNaturalEarth()
  .scale(20 * width / Math.PI)
  .translate([width / 2   150, height / 2   2500]);


// Data and color scale
var data = d3.map();
var colorScale = d3.scaleThreshold()
  .domain([0, 600])
  .range(d3.schemeBlues[7]);

// Load external data and boot
d3.queue()
  .defer(d3.json, "https://raw.githubusercontent.com/squirrel-star/scotland/main/geojsonscotlandladjson.geojson")
  .defer(d3.csv, "https://raw.githubusercontent.com/squirrel-star/scotland/main/scotlanddensitywithid.csv", function(d) {
    data.set(d.code,  d.density);
  })
  .await(ready);

function ready(error, topo) {

  console.log(data);

  // Draw the map
  svg.append("g")
    .selectAll("path")
    .data(topo.features)
    .enter()
    .append("path")
    // draw each country
    .attr("d", d3.geoPath()
      .projection(projection)
    )
    // set the color of each country
    .attr("fill", function(d) {
      d.total = data.get(d.id) || 0;
      return colorScale(d.total);
    });
}  
 <script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<svg id="my_dataviz" width="400" height="400"></svg>

Любые предложения по его исправлению будут с благодарностью приняты. Спасибо!

Ответ №1:

Я думаю, вы, возможно, неправильно прочитали документацию d3.scaleThreshold , потому что в ней говорится, что вам нужно иметь N значения в вашем домене, если у вас есть N 1 значения в вашем диапазоне. В вашем случае это делает N = 6 .

Кроме того, d.id не существует. Я использовал d.properties.LAD13NM вместо этого, потому что это поле содержало название соответствующего округа.

Наконец, не было необходимости использовать a map , поскольку вы использовали его только как какой-то объект, поэтому я просто заменил его обычным объектом.

 // The svg
var svg = d3.select("svg"),
  width =  svg.attr("width"),
  height =  svg.attr("height");

// Map and projection
var path = d3.geoPath();
var projection = d3.geoNaturalEarth()
  .scale(20 * width / Math.PI)
  .translate([width / 2   150, height / 2   2500]);


// Data and color scale
var data = {};
var colorScale = d3.scaleThreshold()
  .domain([100, 200, 300, 400, 500, 600])
  .range(d3.schemeBlues[7]);

// Load external data and boot
d3.queue()
  .defer(d3.json, "https://raw.githubusercontent.com/squirrel-star/scotland/main/geojsonscotlandladjson.geojson")
  .defer(d3.csv, "https://raw.githubusercontent.com/squirrel-star/scotland/main/scotlanddensitywithid.csv", function(d) {
    data[d.code] =  d.density;
  })
  .await(ready);

function ready(error, topo) {
  // Draw the map
  svg.append("g")
    .selectAll("path")
    .data(topo.features)
    .enter()
    .append("path")
    // draw each country
    .attr("d", d3.geoPath()
      .projection(projection)
    )
    // set the color of each country
    .attr("fill", function(d) {
      d.total = data[d.properties.LAD13NM] || 0;
      return colorScale(d.total);
    });
}  
 <script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<svg id="my_dataviz" width="400" height="400"></svg>