title: Create circle on svg map
body: <p>I am facing an issue where I have a map, I have also derived coordinates to plot on the map. However, the circle is not being generated. My code to plot the circle looks like this:</p>
  <pre><code>g.selectAll(&quot;circle&quot;)
      .data(cityOrdinates)
      .enter()
      .append(&quot;circle&quot;)
      .attr(&quot;cx&quot;, function (event) {
          return projection(event[1])[0]
      })
      .attr(&quot;cy&quot;, function (event) {
          console.log(projection(event))
          return projection(event[1])[1]
      })
      .attr(&quot;r&quot;, function (event) {
          indCityCount = cityDetails.find(({
              city
          }) =&gt; city === event[0])
          return radiusScaler(indCityCount.males + indCityCount.females) + 'px';
      })
      .attr(&quot;fill&quot;, function(event) {
          indCityCount = cityDetails.find(({
              city
          }) =&gt; city === event[0])
          if (indCityCount.males == 0) {
              return 'red'
          } else if (indCityCount.females == 0) {
              return 'blue'
          }
          gradient(indCityCount.males, indCityCount.females)
          return 'url(#gradient)'
      })
      .style('opacity', 0.4)
      .attr('stroke', 'black')
      .attr('stroke-width', '0.5px')
  </code></pre>
  <p>I have no clue what I am doing wrong and would really appreciate some ideas on what could be going wrong here.</p>
  <p>Thanks in advance!</p>