Thursday, 18th March 2010
Interactive SVG map
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 before IE9 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
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" />
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.