javascriptd3.jsworld-map

Plotting points on a D3 geoNaturalEarth1 Map


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:

https://jsfiddle.net/vypu9qwr/16/


Solution

  • 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}];