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?

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