Error: <circle> attribute cy: Expected length, "NaN"

I’m working on the choropleth project and so far according to what I’ve looked up, I can create a map using the following code:

var projection = d3.geoMercator()
  .translate([width / 2], height / 2)

var path = d3.geoPath()

function ready(error, us, data) {
    .attr("class", "waffle")
    .attr("r", 2)
    .attr("cx", function (d) {
      console.log(d.longitude, d.latitude); // -77.39215851 37.28969193
      coords = projection([d.longitude, d.latitude]) 
      console.log(coords); // [459.16943166542296, NaN]
      return coords[0];
    .attr("cy", function (d) {
      coords = projection([d.longitude, d.latitude])
      return coords[1];

For cx and cy, the values of longitude and latitude are -77.39215851, 37.28969193
But when I pass them into the projection it only converts one of the values.
coords looks like [459.16943166542296, NaN]

Can anyone explain the issue?

I’m pretty sure that the cause of the problem is the wrong square bracket in the .translate([width / 2], height / 2).

It should be like this:

.translate([width / 2, height / 2])

You were correct… this was a poor mistake on my part.:roll_eyes::worried:

1 Like