Projection in D3 v5 not working with coordinates data - d3.js

Question

I am trying to make a map of meteorite landings across the world using D3 v5. I have the map displaying. The coordinates (lat, long) from the meteorite json file are loading. I am trying to use them in .attr for "cx" and "cy". When I console.log the coordinates in .attr, they show up, but when I try to pass them through my projection so they will display properly on the map, I am getting the following error: Uncaught (in promise) TypeError: Cannot read property 'coordinates' of null.
Can anyone help me figure out how to get this working? Appreciate any help you can offer.
Here a link to a Codepen: https://codepen.io/lieberscott/pen/QryZPR?editors=0110
And my code:
const w = 960;
const h = 600;
const svg = d3.select(".map")
.append("svg")
.attr("height", h)
.attr("width", w);
let projection = d3.geoMercator()
.translate([w/2, h/2])
.scale(140);
const path = d3.geoPath()
.projection(projection);
let tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip");
const files = ["https://unpkg.com/world-atlas#1.1.4/world/110m.json", "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json"];
Promise.all(files.map((url) => d3.json(url))).then(function(data) {
svg.append("g")
.attr("class", "country")
.selectAll("path")
.data(topojson.feature(data[0], data[0].objects.countries).features)
.enter().append("path")
.attr("d", path);
svg.selectAll(".meteor")
.data(data[1].features)
.enter().append("circle")
.attr("class", "meteor")
.attr("cx", (d) => {
console.log(d.geometry.coordinates[0]);
let coords = projection([d.geometry.coordinates[0], d.geometry.coordinates[1]]);
return coords[0];
})
.attr("cy", (d) => {
let coords = projection([d.geometry.coordinates[0], d.geometry.coordinates[1]]);
return coords[1];
})
.attr("r", 6);
});

Answer 1

Your data is missing coordinates for certain locations, eg:
{
"type": "Feature",
"geometry": null,
"properties": {
"mass": "2250",
"name": "Bulls Run",
"reclong": null,
"geolocation_address": null,
"geolocation_zip": null,
"year": "1964-01-01T00:00:00.000",
"geolocation_state": null,
"fall": "Fell",
"id": "5163",
"recclass": "Iron?",
"reclat": null,
"geolocation_city": null,
"nametype": "Valid"
}
},
This generates the error you see, stopping the appending of circles.
You could try to filter them out with something like:
svg.selectAll(".meteor")
.data(data[1].features.filter(function(d) {
return d.geometry; // return only features with a geometry
}) )
Giving us:
Updated pen: https://codepen.io/anon/pen/XqXQYy?editors=0110
Also, I'll quickly note that this:
projection([d.geometry.coordinates[0], d.geometry.coordinates[1]]);
Can be simplified to this:
projection(d.geometry.coordinates);