I have data with longitudes and latitudes that I would like to plot as points on top of a map projected onto the visualization space. I pass the point coordinates through the same projection as is used for the map, but my points appear to be slightly off. I know I'm passing longitude and latitude in the correct order. I just feel like I am missing something fundamental about transforming the data, such as what is being described here, in section 2.1.2 (a Javascript issue), the coordinates for the points are off for some reason (a data issue), or there is some discrepancy between where the map is centered and where the points are centered.

Here is my JavaScript code (I apologize that it isn't reproducible; the map data is being sent via Shiny in R).

Map data: https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json source

Shiny.addCustomMessageHandler('jsondata', function(message) {
    d3.selectAll('svg').remove();
    //d3.select("#viz").remove();
    /////////////////////////////////////////////////////////////////////////////
    ///// DATA /////
    const us = message[4];
    
    // Make corrections in topojson data //
    us.type = 'Topology';
    us.objects.states.type = 'GeometryCollection';
    
    var selected = d3.set(['02', '15', '60', '66', '69', '72', '78']);
    usfilt = us;
    usfilt.objects.states.geometries = usfilt.objects.states.geometries.filter(function(d) { return !selected.has(d.id); });
    
    var geomap = topojson.feature(usfilt, usfilt.objects.states);
    
    // data sample //
    const portlist = [{port: 'KEY WEST, FL', lat: 24.5551, lng: -81.7811 },
                      {port: 'GALVESTON, TX', lat: 29.3036, lng: -94.7975},
                      {port: 'NEW YORK, NY', lat: 40.6943, lng: -73.9249},
                      {port: 'BOSTON, MA', lat: 42.3118, lng: -71.0852}];
    
    /////////////////////////////////////////////////////////////////////////////
    // attributes of bounding div //

    window.addEventListener("resize", () => {
      let divrect = document.querySelector("#vizook")
        .getBoundingClientRect();
      
      // total width and hieght
      divw = divrect.width;
      divh = divrect.height - 50;
      divtop = divrect.y;
      divbot = divrect.bottom;
      divleft = divrect.left;
      
      svg1.attr('width', divw)
        .attr('height', divh);
       
      // US Map
      var proj = d3.geoAlbers()
        .fitSize([divw, divh], geomap)
        
      var path = d3.geoPath().projection(proj);
      
      usmap
        .attr("class", "usmap")
        .attr("d", path)
        .attr("stroke", "#333333");
        
      portloc
        .attr("cx", d => {return proj([d.lng, d.lat])[0]; })
        .attr("cy", d => {return proj([d.lng, d.lat])[1]; })
        .attr("r", 5)
        .attr("fill", "#FFFFFF");
      
    });
    
    const vizspace = d3.select('#vizook');
        
    var svg1 = vizspace
        .append("svg")
        .attr('class', "svgook");
    
    var usmap = svg1.append("g")
      .datum(topojson.feature(us, us.objects.states))
      .append("path")
      
    var portloc = svg1.append("g")
      .selectAll("circle")
      .data(portlist)
      .join("circle")
        
    window.dispatchEvent(new Event('resize')); 
});

The resulting visualization looks like this:

The points should fall on coastal/island towns: