Slightly ajar

Since the previous post, I've updated the Opera market share map somewhat. Now instead of having an automatically playing list of data, you can access the data by hovering over the specific country, and the country in question will also highlight.

For the country highlight I used mouse events on the country’s path element. I added a set element as a child of the path element which changes the class attribute to active. To add the mouse events, I added the code begin="mouseover" end="mouseout", which is fairly self-explanatory. For displaying the market share data it is slightly more complicated, as I wanted the action to happen on a different element to the active element – in this case the text elements. This also isn't too difficult when you know how. On the set and animate elements used by the text elements, I also used mouse events, but had to say which element triggers the animation. In the case of Belarus, I used code such as begin="by.mouseover" end="by.mouseout" which says to begin the animation when the element with the ID by has a mouse over event and ends when the same element has a mouse out event. I chain a number of animations. The first (where the code sample is from) is a set element to set the visibility of the text element, and the next two are animate elements to fade in and fade out the text element by changing the opacity value. You can chain as many of the different animation elements as you'd like. If you are wondering what the difference is between set and animate, set only changes the value once and happens without interpolation (i.e. is on or off, black or white), while with animate, there can be a series of value changes and it animates between the values (so opacity 0 to 1 will animate through each step from 0 to 1, instead of fully transparent to fully opaque).

As well as changing the interaction, I also compressed the file using GZip and changed the extension to svgz. This reduces the file size and tells the browser to decompress the file before passing it to the SVG engine for rendering. Many web servers may not be set up to handle svgz files (so the browser will get confused), so you may have to add the HTTP Header to your configuration file. In Apache I did this using the following instructions. This allows Opera and Safari to know the data is GZip compressed, but doesn't seem to work for Firefox at the moment. I'm not 100% sure why yet.

[DEMO] Opera Eastern/Central Europe market share map in SVG.