search

markmarkoh / datamaps

Customizable SVG map visualizations for the web in a single Javascript file using D3.js
http://datamaps.github.io
MIT License
3.78k stars 1.01k forks source link

Part of Russia is coming to the left of America #535

Open sirishan21 opened 2 years ago

sirishan21 commented 2 years ago

const map = new DataMap({ element: document.getElementById("WorldMap"), projection: "mercator", // big world map // width: 1000, // height: 800, fills: { defaultFill: "#E6E6FA" }, data: dataset, highlightBorderColor: "#B7B7B7", highlightFillColor: "#FFFF00", responsive: true, geographyConfig: { popupTemplate: function (geo, data) { if (data) { return [ '<div ><strong>', "Number of interactions in " + geo.properties.name, ": " + data.numberOfThings, "</strong></div>", ].join(""); } else { return [ '<div ><strong>', "Number of interactions in " + geo.properties.name, ": " + 0, "</strong></div>", ].join(""); } }, }, });

Could you help in fixing this?

KevinPayravi commented 1 year ago

I know this issue is 2 years old, but I'll respond in case anyone needs help with this.

See this issue and its responses: https://github.com/markmarkoh/datamaps/issues/208

You can define a custom projection with a [-11, 0] rotation that moves the map so that Russia is entirely on the right.

Will look something like this:

setProjection: function (element) {
    let projection = d3.geo.mercator().rotate([-11, 0]);
    let path = d3.geo.path().projection(projection);

    return { path: path, projection: projection };
  },