I am using d3 svg map and I have 2 data, one for map, and another my custom data to plot the data points on the map. This is the map data const mapDataUrl = 'https://d3js.org/world-50m.v1.json' I want to color the country which has the data point in my custom data.

Below is the sample part of my custom data to plot the data points like here the country is the US, so I want to fill some color to US.

"features": [
    {
      "properties": {
        "ip": "8.8.8.8",
        "loc":"37.4056, -122.0775",
        "name": "US",
        "country": "US",
        "reclong": "-122.0775",
        "year": "1880-01-01T00:00:00.000",
        "id": "1",
        "reclat": "37.4056"
      }
    }
]

This is my code to plot the map and data points on it.

// load map data
d3.json(mapDataUrl, mapData => {
  const countries = topojson.feature(mapData, mapData.objects.countries).features

  g.selectAll('.country')
    .data(countries)
    .enter().append('path')
    .attr('class', 'country')
    .attr('d', path)
    .on('mouseover', function (d) {
      d3.select(this).classed('hovered', true)
    })
    .on('mouseout', function (d) {
      d3.select(this).classed('hovered', false)
    })
    .on('click', clicked)

  // load ip data
  d3.json(dataUrl, data => {
    const colorScale = d3.scaleOrdinal(d3.schemeBlues[2000]);

    g.selectAll('.meteor')
      .data(data.features)
      .enter().append('circle')
      .attr('class', 'meteor')
      .attr('r', d => calcRad(20000))
      .attr('fill', d => 'blue')
      .attr('cx', d => projection([d.properties.loc.split(', ')[1], d.properties.loc.split(', ')[0]])[0])
      .attr('cy', d => projection([d.properties.loc.split(', ')[1], d.properties.loc.split(', ')[0]])[1])
      .on('mouseover', handleMouseOver)
      .on('mouseout', handleMouseOut)
  })
})

How do I do this, filling the color to the country which is in my custom data?
Thanks for the help.