I am currently working on a visualization using d3.js. Please have a look here. (It's a dropbox link you might have to allow it to load.)
I have created a function where every overlapping element increases in size on hovering over a dot on the map.
Please try the following use-case: 1. Click on U.S to zoom into the country. 2. Drag and Pan to New York and hover the mouse pointer over the dot.
If everything goes well you should see a huge circle with multiple concentric circles embedded inside it. They are all overlapping elements at that particular co-ordinate.
The issue that I am facing is that when the SVG elements increase in size, there are dots of other cities overlapping on top of the concentric circles.
My question is: how do I make the circles, I am hovering my mouse over, come on top of the SVG canvas so that no such dots are visible.