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

Wrong arc extremities using country codes #295

Closed magic890 closed 8 years ago

magic890 commented 8 years ago

Using country codes to draw arcs, will trigger strange behaviours due to the implementation of that feature using centroids.

In fact drawing an arc from Russia (or wherever) to USA, will result in an arc landing to Canada.

screen shot 2016-05-05 at 17 13 13

Code:

map.arc([
  {
    origin: 'RUS',
    destination: 'USA'
  }
]);

Functionality implementation using centroid (https://github.com/markmarkoh/datamaps/blob/master/src/js/datamaps.js#L378 and https://github.com/markmarkoh/datamaps/blob/master/src/js/datamaps.js#L384):

... = self.path.centroid(svg.select('path.' + datum.origin).data()[0])

Calculation of centroid in an L object (e.g. USA state distribution can be contained inside an L shape object) can results in a centroid placed outside the object area.

I think that a more robust way to implement arcs between countries can be add to world topojson capitals coordinates and draw arcs between them.

@markmarkoh what are your feedback?

markmarkoh commented 8 years ago

This one is definitely tricky since we are using the geometric centroid to determine where the center of the geography, so clearly it falls apart for USA especially with Alaska being so far out of the way.

We could make a list of known irregular countries, like USA and maybe CAN, and handle those special cases within the library. Like if (arc.center == "USA") { return [-97, 33] } (or better yet in a switch statement that falls through to the geometric centroid call it currently uses.

Or we can predetermine the centers of each country in the topojson. That makes it a bit hard to add new topojson files.

@magic890 thoughts?