I have to plot points to the world map using given coordinates. For some reason, the points' locations turn out to be wrong (for example, first point should be in Canada, but shows in Africa).
Topojson I use: https://github.com/d3-node/d3node-map-world/blob/master/data/world.json
Code:
const projection = d3.geoNaturalEarth1()
.center([0, 49.5])
.scale(180);
const path = d3.geoPath()
.projection(projection);
const svg = d3n.createSVG(width, height);
svg.append('g')
.selectAll('path')
.attr('class', 'countries')
.data(data.features)
.enter().append('path')
.attr('d', path)
.style('stroke', 'white')
.style('stroke-width', 1.5)
.style('opacity', 0.8);
svg.append('path')
.datum(topojson.mesh(data.features, (a : any, b : any) => { return a.id !== b.id; }))
.attr('class', 'countries')
.attr('d', path);
let points = [{long: 50.085767, lat: -101.681522}, { long: 24.568085, lat: 22.260878}];
svg.append('g')
.selectAll('circle')
.data(points)
.enter().append('circle')
.attr('r', 7.5)
.attr('fill', 'red')
.attr("transform", (d) => `translate(${projection([d.long, d.lat])})`);
Fiddle:
Swap lat and long, a lat of -101 does not exist
let marks = [{long: -101.681522, lat: 50.085767}, { long: 24.568085, lat: 22.260878}];