score:2

Accepted answer

i think you may have misread the documentation for d3.scalethreshold, because it says you need to have n values in your domain if you have n + 1 values in your range. in your case, that makes n = 6.

also, d.id didn't exist. i used d.properties.lad13nm instead, because that field contained the name of the relevant county.

finally, there was no need to use a map, since you were only using it as an object of some sorts, so i just replaced it with a regular object.

// 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>


Related Query