🏠 back to Observable

Setting null value to a default colour on choropleth map


Use case: @ashwinjm/introducing-maps

vl.markGeoshape({stroke: "black"}).config({invalidValues: null})
  .transform(vl.lookup("id").from(vl.data(ag_data).key("Country Code").fields("2015")))
  .encode(vl.color().fieldQ("2015").condition({test: "datum['2015'] == null", value: "lightgrey"}),

This map is supposed to fix the missing area with the code snippet condition({test: "datum['2015'] == null", value: "lightgrey"}) but it doesn’t seem to work, and I can’t get mine to work either. Is there something wrong/outdated here or am I missing something?

My example: @indiebio/global-innovation-index


I think that when encoding geoshapes they are only drawn if the encoding is valid. You can get what you want by creating a two layer map - one for the background and one for the colour-encoded shapes. Those null-encoded shapes won’t get drawn so leaving the background ‘underneath’. For example:

    // Background layer
      .markGeoshape({ fill: "lightgrey" })

    // Choropleth layer
      .markGeoshape({ stroke: "lightgrey" })
            vl.data(selectIndex).key("ID").fields("RankingScore", "Ranking")
          .scale({ opacity: 0.9, domain: [0, 100], clamp: true })

(as an aside – you may find better projections than the Mercator for this kind of mapping. “EqualEarth” does a good job of balancing equal area projection with not too much shape distortion. No more devoting half the map space to northern Canada and Antarctica)

1 Like

Thank you, that makes sense. Ideally having the name still pop up with a “0” or “no data” would be good, but this is already good enough to export to a report. I did try to ensure the encoding of the ID field is valid (with the three-letter international codes to prevent naming differences) but it didn’t work, and also didn’t work in ashwinjm’s example.

Re mercator, thank you! I had that on my todo list and then got distracted before I could find a better one :slight_smile: Decided to go with Equirectangular, and might reload the world map without Antartica…