# How would I highlight Countries in Plot, wrangling TopoJson?

**URL:** <https://talk.observablehq.com/t/how-would-i-highlight-countries-in-plot-wrangling-topojson/7588>\
**Category:** Help\
**Created:** [February 2, 2023, 10:49pm UTC](https://talk.observablehq.com/t/how-would-i-highlight-countries-in-plot-wrangling-topojson/7588 "2023-02-02T22:49:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![zachbogart](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/zachbogart/32/8597_2.png) [@zachbogart](https://talk.observablehq.com/u/zachbogart)\
**Post date:** [February 2, 2023, 10:49pm UTC](https://talk.observablehq.com/t/how-would-i-highlight-countries-in-plot-wrangling-topojson/7588/1 "2023-02-02T22:49:10Z")

</div>

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](https://observablehq.com/d/f1edfeffe8c3ea9a)

---

<div class="post-metadata">

**Author:** ![mythmon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mythmon/32/8504_2.png) [@mythmon](https://talk.observablehq.com/u/mythmon)\
**Post date:** [February 2, 2023, 11:06pm UTC](https://talk.observablehq.com/t/how-would-i-highlight-countries-in-plot-wrangling-topojson/7588/2 "2023-02-02T23:06:00Z")

</div>

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

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

```

https://observablehq.com/embed/d07b21deebb0fa87@31?cells=map

---

<div class="post-metadata">

**Author:** ![zachbogart](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/zachbogart/32/8597_2.png) [@zachbogart](https://talk.observablehq.com/u/zachbogart)\
**Post date:** [February 2, 2023, 11:26pm UTC](https://talk.observablehq.com/t/how-would-i-highlight-countries-in-plot-wrangling-topojson/7588/3 "2023-02-02T23:26:25Z")

</div>

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:

```auto
[{name: "United States of America", region: "North America", population: "a bunch"}]

```

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [February 3, 2023, 6:51am UTC](https://talk.observablehq.com/t/how-would-i-highlight-countries-in-plot-wrangling-topojson/7588/4 "2023-02-03T06:51:44Z")

</div>

There are many ways to join datasets; I’d recommend using [d3.index](https://observablehq.com/@d3/d3-group) to create a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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.)