Cropping a plot.geo map by land features

[jschuur]

I'm creating a global choropleth map using plot.geo and would like to crop and shift the map slightly, after I removed Antartica from the Mercator projection.

What's the best way to do this? There's a lot of whitespace at the bottom of the plot that i want to get rid of. I'd also like to move it a tiny bit to the left, to move that bit of Russia next to Alaska to the other side.

I thought restricting it via the domain option under projection would handle the cropping it, but I'm not sure what to pass/filter there.

Sample notebook: https://observablehq.com/d/2e154369ef679bb7

(Side note: the tip is also not working, would love a... uh... tip about that too)

import {world110m, world50m} from "@visionscarto/geo"

land = topojson.feature(world110m, world110m.objects.countries);

populationByCountry = new Map(
  Object.entries(await FileAttachment("[email protected]").json())
)

Plot.plot({
  title: `Population size`,
  projection: {
    type: "mercator"
    // domain: land.features.filter((d) => d.properties.continent !== "Antarctica")
  },
  width,
  marks: [
    Plot.geo(
      land.features.filter((d) => d.properties.continent !== "Antarctica"),
      {
        fill: (d) => populationByCountry.get(d.properties.a3),
        stroke: "black",
        strokeWidth: 0.25,
        tip: {
          x: (d) => d3.geoCentroid(d)[0],
          y: (d) => d3.geoCentroid(d)[1],
          title: (d) => {
            const count = populationByCountry.get(d.properties.a3);

            return `${d.properties.name}\nPopulation: ${
              count ? count.toLocaleString() : "No data"
            }`;
          }
        }
      }
    )
  ],
  color: {
    type: "quantize",
    domain: Array.from(populationByCountry.values()),
    range: d3.schemeGreens[5],
    missing: "#ccc"
  }
})

[Fil]

Here are some possible adjustments, with comments:

  projection: {
    type: "mercator",
    // rotate the projection to reattach the tip of eastern Siberia
    rotate: [-10, 0], 
    // create a valid GeoJSON domain
    domain: {
      type: "FeatureCollection",
      // filter the features on valid properties (there is no "continent" property on this dataset)
      features: land.features.filter((d) => populationByCountry.get(d.properties.a3)) 
    }
  },
  width,
  // set the aspect ratio
  height: width * 0.65,

[Fil]

Other adjustments, for the tip:

    Plot.geo(
      land.features,
      // the centroid transform adds derived X and Y channels, allowing the tip: true option to work normally
      Plot.centroid({
        // don't filter or the shape is not drawn at all (e.g. North Korea)
        fill: (d) => populationByCountry.get(d.properties.a3),
        stroke: "black",
        strokeWidth: 0.25,
        tip: true,
        // the title is a single text to show as a tip; you could use normal channels instead
        title: (d) => {
          const count = populationByCountry.get(d.properties.a3);
          return `${d.properties.name}\nPopulation: ${
            count ? count.toLocaleString() : "No data"
          }`;
        }
      })
    )

and for the unknown color to be displayed in grey:

  color: {
    type: "quantize",
    domain: Array.from(populationByCountry.values()),
    range: d3.schemeGreens[5],
    unknown: "#ccc"
  }
})

Note that the tip for the USA or for France is not properly positioned. This is a known issue, and you might want to prefer a different way to compute the "centroid": see #2098 for work on a better transform.

[Fil]

I suppose you are aware of that, but a choropleth is not the recommended way to show stocks (absolute quantities) such as population counts. Choropleths should be used to show relative values like density, GDP per capita, etc.

[jschuur]

Thanks so much for all the tweaks, @Fil! Really appreciate the help.

Took me a second to realise that 'rotate' here isn't 'spinning' it around like a flat record, but rotating a globe, right?

re: Choropleth maps and absolute numbers, I used population here just for sample data. A lot of my actual data is percentage based.

But I do still have some absolute values, like the number of sessions. It's been tricky to find a way to show this when some countries have values < 100 and others > 25,000.

When I did this map on Datawrapper, they have range and interpolation options for this, so it looks like I'll play around with the color type and range (?) for this plot to try and replicate that.

[Fil]

"'spinning' it around" is covered by the angle method of d3-geo. It's not directly available in Plot, though… but you can create it with a custom function (see #2245).