Fail to parse/project coordinates onto JSON

Question

I am simply trying to draw a bunch of circles on the json map, with dynamiccx and cy properties as per the latitude and longitude coordinates that I parse through a csv.

For what it's worth, I have not had this issue in a long time, almost since I was TOTALLY new to d3. I read through all related posts, I looked back at beginner's tutorials (without shame), and I still can't catch what I did wrong. Please have a look, it's very short, key lines are 67-68. You may Find my json map here:

http://bl.ocks.org/diggetybo/a2ace75c8ea89ab0da996154d3df7f5c

You will notice, no circles are appended. To my knowledge, I went about appending the circles in the orthodox D3.js manner:

1. create an empty selection.
2. bind data to doms
3. append visuals from data

If I did something stupid, by all means, drill it into me -- I'm psychologically strong, I can take it.

Answer 1

Your data contains some coordinates which are not within the well-defined area of the AlbersUSA projection. For more details see my answer to "D3 albersUsa projection funtion return null". Because the projection will return null for these, you get an error, which breaks the creation of circles.

A naïve approach would be to filter out the non-valid coordinates:

var data = rawData.map(function(d)
{
    return {
        Latitude: +d.latitude,
        Longitude: +d.longitude,
        Place: d.place
    };
})
.filter(d => projection([d.Longitude, d.Latitude]));   // filter out null values

This will display the circles on the map. However, you might want to check your data first and try to sift them out beforehand.