How would I highlight Countries in Plot, wrangling TopoJson?

New To Observable
1

The geo mark works great, but I could use some help manipulating Topojson. Say I want to highlight the US in the below chart. How can I wrangle the TopoJson to get at just the selected country, adding that as another geo Plot layer? Wanting to be able to show selected countries on a map, just by filtering, not necessarily by an additional continuous feature.

Thanks!

Notebook

2 Likes
2

Each of the features of the TopoJSON get passed to Plot’s channel callbacks. You can define a fill like this:

map = Plot.plot({
  width,
  height: 500,
  projection: "equal-earth",
  marks: [
    Plot.geo(countries, {
      fill: (d) => d.properties.name === "United States of America"
    })
  ]
})
1 Like
3

Coolio! That makes it easy. Thanks!

Bonus question: How could I insert data I have on a country into the topoJson? Say I have a dataset that I could join by the country name:

[{name: "United States of America", region: "North America", population: "a bunch"}]
1 Like
4

There are many ways to join datasets; I’d recommend using d3.index to create a Map from keys to values, like so:

values = d3.index(data, d => d.countryName)

and then to create the choropleth, something like:

Plot.geo(countries, {
fill: (d) => values.get(d.properties.name)?.field, …

The benefit of d3.index, rather than a naive array.find, is that it will alert you if by accident two data points have the same id. (Added benefit is that the key lookup with values.get is instantaneous, so the map is displayed faster.)

(We’ll publish complete examples soon.)

2 Likes