title: d3 svg map with 2 data
body: <p>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 <code>mapDataUrl = 'https://d3js.org/world-50m.v1.json'</code>
  I want to color the country which has the data point in my custom data.</p>
  <p>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.</p>
  <pre><code>&quot;features&quot;: [
      {
        &quot;properties&quot;: {
          &quot;ip&quot;: &quot;8.8.8.8&quot;,
          &quot;loc&quot;:&quot;37.4056, -122.0775&quot;,
          &quot;name&quot;: &quot;US&quot;,
          &quot;country&quot;: &quot;US&quot;,
          &quot;reclong&quot;: &quot;-122.0775&quot;,
          &quot;year&quot;: &quot;1880-01-01T00:00:00.000&quot;,
          &quot;id&quot;: &quot;1&quot;,
          &quot;reclat&quot;: &quot;37.4056&quot;
        }
      }
  ]
  </code></pre>
  <p>This is my code to plot the map and data points on it.</p>
  <pre><code>// load map data
  d3.json(mapDataUrl, mapData =&gt; {
    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 =&gt; {
      const colorScale = d3.scaleOrdinal(d3.schemeBlues[2000]);
  
      g.selectAll('.meteor')
        .data(data.features)
        .enter().append('circle')
        .attr('class', 'meteor')
        .attr('r', d =&gt; calcRad(20000))
        .attr('fill', d =&gt; 'blue')
        .attr('cx', d =&gt; projection([d.properties.loc.split(', ')[1], d.properties.loc.split(', ')[0]])[0])
        .attr('cy', d =&gt; projection([d.properties.loc.split(', ')[1], d.properties.loc.split(', ')[0]])[1])
        .on('mouseover', handleMouseOver)
        .on('mouseout', handleMouseOut)
    })
  })
  </code></pre>
  <p>How do I do this, filling the color to the country which is in my custom data?<br>
  Thanks for the help.</p>