0

I am creating a map of WI counties. It looks great except one of the counties has a value of "null" that is showing up as 0 on the map.

I manually created the color scale, but cannot figure out how to grey out the county with the null value.

Any ideas?

This is the code that I'm using to define the color 

    var color = d3.scaleThreshold()
        .domain([0.16,0.31,0.47,0.58,0.94,1.15,1.41,2.02,3.36,6.47])
        .range(["#f7fcf0","#e0f3db", "#ccebc5", "#a8ddb5", "#7bccc4", 
        "#4eb3d3", "#2b8cbe", "#0868ac", "#084081", "#062953"]);

I tried adding "null" in the domain and adding a corresponding color to the range, but that didn't do anything.

Casey
  • 21
  • 4

1 Answers1

1

A simple way to handle special cases in your colour scale is to not pass the scale directly to d3.attr / d3.style, but wrap it in an anonymous function and check there:

counties
    .attr('fill', d => d === null ? 'grey' : color(d))
zinfandel
  • 428
  • 5
  • 12