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)
  .scale(100)

var path = d3.geoPath()
  .projection(null)

function ready(error, us, data) {
   svg.selectAll(".waffle")
    .data(data)
    .enter()
    .append("circle")
    .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?

Is this all the code? Where are you calling the ready function and where have you defined what width and height are?

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])
2 Likes

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

1 Like