Having difficulty converting latitude and longitude coordinates to "cx" and "cy" positions on my SVG map created with d3 and topojson. Despite researching solutions online, I am unable to successfully implement the conversion process. Each time I try to convert the coordinates provided in my JSON file using the projection function, it returns null for all calculations.
Please ignore the following code snippet:
//var geocoder = new google.maps.Geocoder();
//console.log(geocoder);
//figure out how to fix
//setIntervalAPI(alumni, geocoder, 1000);
console.log("Test");
//canvas dimensions
var width = 960,
height = 500,
centered;
//SVG projection
var projection = d3.geo.albersUsa()
.scale(1070)
.translate([width / 2, height / 2]);
//projection path lines
var path = d3.geo.path()
.projection(projection)
.pointRadius(1.5);
//scalable SVG object
var svg = d3.select("#usa").append("svg")
.attr("width", width)
.attr("height", height);
//SVG elements
svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height)
.on("click", clicked); //for click to zoom function
//adding a group class to the SVG
var g = svg.append("g");
//queuing JSON files to load
queue()
.defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json") // Load US Counties
.defer(d3.json, "https://script.googleusercontent.com/macros/echo?user_content_key=K1E85EiRkGvkNnkwdiT6jmlX9xSU6hUvetLTNzpCcd_jSC2GpNbwZfr0KcbLfJdiHrUouVDeG7bCkVA0V_Fi5YMBTitaxVEdOJmA1Yb3SEsKFZqtv3DaNYcMrmhZHmUMWojr9NvTBuBLhyHCd5hHa1ZsYSbt7G4nMhEEDL32U4DxjO7V7yvmJPXJTBuCiTGh3rUPjpYM_V0PJJG7TIaKp1q6LyBxbset-sbB7gU77AXzTewdOjiNZcuPDH50tUN-GOHXQiXJz0ANQ8AP0ES9ozQJv8DXWa1hoIgY-huuTFg&lib=MbpKbbfePtAVndrs259dhPT7ROjQYJ8yx")
.await(ready); // Run 'ready' when JSONs are loaded
function ready(error, usa, alumni){
if(error) throw error;
console.log(usa);
console.log(alumni.Form1);
//var geocoder = new google.maps.Geocoder();
//console.log(geocoder);
//figure out how to fix
//setIntervalAPI(alumni, geocoder, 1000);
console.log("Test");
g.append("g")
.attr("id", "states")
.selectAll("path")
.data(topojson.feature(usa, usa.objects.states).features)
.enter().append("path")
.attr("d", path)
.on("click", clicked);
g.append("path")
.datum(topojson.mesh(usa, usa.objects.states, function(a, b) { return a !== b; }))
.attr("id", "state-borders")
.attr("d", path);
/** appends circles to the map
NEEDS FIXED
*/
g.selectAll("circle")
.data(alumni.Form1).enter()
.append("circle")
.attr("cx", function(d) { return projection(d.lat)})
.attr("cy", function(d) {//console.log(projection(d.lng));
return projection(d.lng)})
.attr("r", "8px")
.attr("fill", "blue");
An example of the JSON file structure is provided below (personal information has been omitted for privacy):
{
"timestamp": "",
"name": "",
"location": "Austin, TX",
"current_company": "",
"current_position": "",
"company_logo": "",
"ta_start":,
"ta_role": "",
"favorite_memory": "",
"how_ta_helped": "Always have a side hustle. ",
"picture": "",
"personal_handles": "",
"linkedin": "",
"lng": 30.267153,
"lat": 97.7430607999999
}