I wish to color the different parts of the map with different colors depending on the value that exists. The map is split into counties, and I have values for each county that I wish to translate into a color. This is my code for trying to color the map.
The range I've set is between [ 40, 19054 ]. It works well color the whole map one color, so for example setting color(19000) would make the whole map red.
let topo = json.features
let datas = aggCounties
d3.json("/counties.json").then(function(json) {
function getCountPerKOMKODE() {
for (let i = 0; i < topo.length; i++) {
for (let j = 0; j < datas.length; j++) {
let jsonKOMKODE = json.features[i].properties.KOMKODE;
let csvKOMKODE = datas[j].kommune_kode
let csvCOUNT = +datas[j].count
if (csvKOMKODE == jsonKOMKODE) {
return csvCOUNT
}
}
}
}
}
let color = d3.scaleQuantize()
.domain(d3.extent(getRangeDomain()))
.range(["white", "pink", "red"])
let g = svg.append("g");
g.selectAll("path").append("g")
.data(topo)
.enter()
.append('path')
.attr('class', 'county')
.attr("d", path)
.style('fill', color(getCountPerKOMKODE()))
});
I feel like I'm misunderstanding the process of how the map is colored? From what I've been reading, it should target individual paths and apply the color/value given?
Thanks
EDIT - problem solved, thanks to @AndrewReid, see code updates below:
function getCountPerKOMKODE(path) {
for (let j = 0; j < datas.length; j++) {
// var jsonKOMKODE = json.features[j].properties.KOMKODE;
let csvKOMKODE = datas[j].kommune_kode
let csvCOUNT = +datas[j].count
if (csvKOMKODE == path) {
return csvCOUNT
}
}
}
g.selectAll("path").append("g")
.data(topo)
.enter().append('path').attr('class', 'county')
.attr("d", path).style('fill', function(d,i) {
let komkode = d.properties.KOMKODE
return color(getCountPerKOMKODE(komkode))
})
And voila, the map is now colored.