CODEWITHSUNDEEP
d3.jsoverlapping
nos
nos

Reputation: 20872

how to avoid overlapping circles on a map using d3js

I am putting many circles on a map and when the mouse is over, the circle changes color and shows some text, as in the image. The problem is that some circles overlap with each other due to same geo locations then only the top most circle works. What is the best way out of this situation? I tried manually change the geo information, which is tedious and does not work very well due to the lack of control over the overlaps. In my case, there could be up to 5 circles overlapping on the same geo location.

enter image description here

Upvotes: 1

Views: 1264

Answers (2)

Chris
Chris

Reputation: 159

Here are two approaches to clustering:

Another approach is using fisheye; although, I'm not sure how it applies to maps.

Upvotes: 1

zipzit
zipzit

Reputation: 3997

A couple of notes:

  • I've had this same issue. I dealt with it by moving the dots so they never overlap, even if the dot location was not accurately placed on the map. My popup text stated the location so that worked. In my case I was using old skool html image maps over actual image files with carefully mapped hotspots.

  • You could jump over to a regular geo mapping software and use either individual pins or their "cloud" display for pins located too closely. When you zoom in on the map, the "cloud" reverts to seperate pin icons. This does allow the user to zoom in on their own, and it works fine on a mobile device. That works, but its definitely not D3.

  • I did just see a way cool magnifying glass tool that's a JavaScript implementation. But that's intended for images only. If you are highly motivated perhaps you could hack the code and implement for D3 (which is just using SVG elements.) You can see an example of the technique in action here. Drag your mouse over the images on that page.

zoomie example

  • The feature uses a tool called 'zoomie.js' located here at Github. The intent for you is that a group of dot locators on your map in zoom mode has enough separation to be clearly identified. Don't know how you are going to deal with mouseover events though. I guess you could have the text always visible in zoomed magnifying glass mode.

  • A few questions for you: How many of your users are on mobile devices? There is no mouseover on mobile. How are they going to get the mouseover effect?

Upvotes: 1

Related Questions