Problem: On a map created in d3 we have many circles plotted, the radius of each being a function of the data. Hovering over a given circle brings up a tooltip with more information. But the map is quite crowded, with many circles overlapping. Zooming in merely enlarges each circle in turn, which only helps somewhat in being able to correctly hover over the desired circle.

Solution: Divide the output of the circle radius function by the zoom scale. However, it's important to ensure that the scale is clamped to > 1 lest the circles become enormous when zooming out beyond the initial scale.

Use your mouse scrollwheel to zoom in.

The data I've used here is Air Pollutant Emissions - Sulphur oxide emissions by facility, Canada, 2013, available from the Canadian Government's Open Data archive. I chose it because it plots locations both over a wide area as well as in several "clumps".

Note: The radius of each circle is a function of the sum of all emission types, in tonnes. (Contrary to the title, there are other substances besides sulphur oxide included in the data.) Bigger just means "more stuff", without any indication as to which stuff was involved. The use of this particular data was determined solely by it's usefulness for this example, not an attempt to be scientifically accurate, nor make any point about air pollution, etc. I have no idea how these numbers compare to anyplace else.