Thursday, 18th March 2010
Interactive SVG map
I've been learning how to animate SVGs (I've written a couple of tutorials of what I have since learnt here and here) and have updated my map-drawing program to create interactive maps.
Below is a map I made to show life expectancy (at birth, as of 2007) in Africa. You can mouse-over the map to see the name of a country and the life expectancy there. I'm impressed with how powerful SVGs can be, but slightly disappointed that transparency doesn't work in Chrome [update: it seems to work now - Horray!]. The map can look a bit grainy, but looks a lot smoother if you zoom in a bit.
Life expectancy (2007)
Note, Internet Explorer can't render SVG and Firefox doesn't support mouse-over animation. It definitely works with Chrome and apparently works in Safari (thanks Al).
The mouse-over effect works by adding a set element to each country's path with changes the opacity of the path as the mouse moves over it:
<path d="lots of coordinates..."> <set attributeName="opacity" from="1" to="0.5" begin="mouseover" end="mouseout"/> </path>
The only country for which this appears not to work is Lesotho, the enclave in South Africa. The reason that it doesn't appear to lighten is that when you can see through it, you see South Africa below, which is the same colour. I will see if I can sort this out by cutting a Lesotho-shaped hole in South Africa.
To get the names of countries to appear, I created the a text element for each country with its name at the same position and with visibility="hidden". Then for each text element I added a set element with the begin and end events pointing to that country. This works because the path of each country or the group of paths of a country has a class equal to its name.
For example, the Algeria text element contains:
<set attributeName="visibility" from="hidden" to="visible" begin="Algeria.mouseover" end="Algeria.mouseout" />
[A more efficient way to achieve this effect is to use ECMAScript]
T. brucei rhodesiense (1990-2006)
The main reason for experimenting with this interactivity is to see whether I can display several years worth of data on the same map. Below is a map that can display data (new cases of T. brucei rhodesiense) from nine different years when you mouse-over the relevant year. This allows one to track the spread and decline of the disease.
I would like to prevent the colours from disappearing when the mouse leaves a year, but couldn't make the mouse-over work properly when I removed the end condition. I'd also like to stop the mouse icon from changing when it moves over the text. Finally, like to display the number of cases of T.b.rhodesiense for a country when it is selected, but I think this would be very complex to implement.
Comments
Looks like it works in Safari too on the mac.
Have you looked into solutions such as SVG Web and Ample SDK to make this cross browser?
I am myself looking into this but I'm struggling to make basic Javascript interactions to work on IE. These solutions are supposed to enable scripting so I don't know what I'm doing wrong.
There is a good article on A list apart about SVG : http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-f...
@Flowermountain, thanks for pointing me towards SVG Web, Ample SDK and the A list apart article. I'll have to give them a good look when I get some time. I'm afraid I've not got around to trying the Javascript approach so I can't be any help.
Animation works, at least with Firefox 6: thinks are going better!
Thanks for pointing that out, Giles; I'll update this article and another soon. I've just noticed that it half-works (so probably could be made to work) in Firefox 5 too.
Post new comment