Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

386
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!