Not All D3 Points Are Showing In Correct Position On Leaflet Map

I'm using this as a starting point. I am using .nest() and d.values.length to drive the radius of the circles. d3.tsv('DH_Doig.tsv', function(data) { // Add a LatLng obj

Solution 1:

In this line d.values[i].LatLng, i here is the index of your data-binding (the mediacount array). It is not some sort of index into the values array inside the mediacount array.

Regardless, you don't need an index into the values array since all their lat and long will be the same and you can just use 0. So simplify the whole update function to:

functionupdate() {
    feature.attr("transform", function(d,i){
      var coor = map.latLngToLayerPoint(d.values[0].LatLng);
      return"translate(" +
          coor.x + "," +
          coor.y + ")";
    });
  }

Also, note, your map is centered on someplace in New Zealand, while your lat and longs are in the western United States.

Full code is here.