d3 lat/long points are not lining up with map

Question

I have a GeoJSON for Brooklyn and am able to draw the borough correctly. Then I add circles for the points where the buildings are.

The points and the maps don't line up. The buildings show up above the map. As you can see in the image below, the black dots are the building locations and the map is below.

I have made sure that all the lat/longs are within the bounds of brooklyn.

Any idea what I am not doing here?

The minimal code is here:

https://jsfiddle.net/w1x79ykm/4/

import * as d3 from "d3";
import { ExtendedGeometryCollection, GeoGeometryObjects, GeoPermissibleObjects } from "d3";
import { Borough } from "./borough";
import { Building, The_Geom } from "./building";

var margin = { top: 20, right: 30, bottom: 30, left: 30 };
var width = 1260 - margin.left - margin.right;
var height = 1000 - margin.top - margin.bottom;

var mapSvg = d3.select("div#svg-container")
  .append("svg")
  .attr("viewBox", `0 0 ${width} ${height}`);

// New Projection calc
var projection = d3.geoMercator()
var path = d3.geoPath(projection);

function loadDataAndShow() {
  d3.csv("brooklyn.csv").then((d) => {
    var buildings = new Array<Building>();
    d.forEach((building) => {
      var b = building as unknown as Building;
      b.geom = new The_Geom(b.the_geom);
      b.CNSTRCT_YR = +b.CNSTRCT_YR;
      b.HEIGHTROOF = +b.HEIGHTROOF;

      // sanity check before adding to our dataset
      if (b.CNSTRCT_YR > 1000 && b.HEIGHTROOF > 0) buildings.push(b);
    });

    d3.json("boroughs.geojson").then((data) => {
      var boroughs = data as Borough;

      projection
        .fitExtent(
          [[margin.left, margin.top], [width - margin.right - margin.left, height - margin.bottom - margin.top]],
          boroughs.features[0]
        );

      // Draw the map
      mapSvg
        .append("g")
        .selectAll("path")
        .data(boroughs.features)
        .enter()
        .append("path")
        .attr("fill", "lightgray")
        .attr("d", d => path(d))
        .style("stroke", "black");

      // Add circles:
      mapSvg
        .append("g")
        .selectAll("dot")
        .data(buildings)
        .enter()
        .append("circle")
        .attr("cx", (d) => {
          return projection([
            d.geom.coordinates[0].longitude,
            d.geom.coordinates[0].latitude,
          ])[0];   // Fudge to make this work. BUGBUG  - 370
        })
        .attr("cy", (d) => {
          return projection([
            d.geom.coordinates[0].longitude,
            d.geom.coordinates[0].latitude,
          ])[1];  // Fudge to make this work. BUGBUG + 1100
        })
        .attr("r", 1)
    });
  });
}
loadDataAndShow();

Answer 1

Was just bad data. Fixed the data and all draws great!