Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

397
Visualizações
D3js how do I color individual parts of the map?

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.

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda