Slightly ajar

While messing around with SVG I created a map of Opera market share in Eastern and Central Europe. This is much heavier than the previous SVG files I've made as I started with an existing SVG map from Wikipedia, that was originally produced using Inkscape. This adds a lot of extra things that machine generated markup usually produces, but making a map by hand would be bordering on insanity. I've cleaned up some of the markup, but I should be able to trim the file size a lot more by removing some of the inline and redundant styles and extra elements and attributes that are not needed.

I added all the extra information, such as the labels, colouring and animations by hand, which isn't too difficult to do once I worked out that the map was using a viewBox that changes the co-ordinate system (everything I was trying to include was too small to be seen because of this). I'm using the alpha channel of the HSLA colour model to show the different levels of marketshare (offset by 0.2 to make the colours easier to spot), which gave a easy 100% scale to work with. This is easy to do, but have performance penalties and opacity is expensive. It also means that it requires Opera 10 or greater to get the full effect. I'll probably end up mapping the colours to RGB values and use that instead, although that would make it more expensive. The colouring scheme chosen also makes it slightly difficult to see the difference between the colours less than 10% and those around 10 to 20%, so i reduced the opacity of the country borders for those less than 10%. I'd eventually like to show the market share data when clicking on the country rather than a predefined animation that loops through each county. In theory you can zoom in on each country (for those I added - Czech Republic, Slovakia, and Poland), due to the use of the view element and fragment identifiers on the a element, but support for this seems to break when animations are included. I'm not sure if this is a bug or something I'm doing wrong. You can still directly go to the county using a direct link outside of the document. There is also an issue with Safari where HSLA colour model doesn't seem to be supported in SVG, or at least not on the fill property, so the map just displays as black.

As far as the data is concerned, I took the market share values from the StatCounter results for April (at the time of writing). All figures are rounded so 2.49% becomes 2% and 2.51% would become 3%. You'll notice some patterns on the map, with 3 main groups. Those countries that are in the CIS are all post 20% market share. The Visgrád_Group and Baltic nations are around 10% to 15%. Latvia is slightly lower with 9%, and Estonia drops off at the edge of the group with 7%. The major exception is Hungary with only 4%, but we have identified a number of compatibility issues in Hungary (see comments in my previous pot) which may be causing this. The third group is the Balkan and other South-Eastern countries, that are around 4, 5 or 6% market share. This again has exceptions with Serbia and Montenegro both being ahead with around 10% market share, and Slovenia and Albania around 2% market share. I wouldn't be surprised if by the end of the year Hungary has caught up to the 10% mark and the third group of countries also start working their way to that level.

[UPDATE 1] HSL and HSLA are apparently not suppose to be supported by SVG, although they are both supported by Opera and Firefox. I've switched the fill value to red and added the appropriate alpha channel value with the appropriate fill-opacity value. Next up is the issue with Firefox. after talking to Jeff Schiller, its been narrowed down to the lines used to draw the grid. Firefox treats these differently, but I have to work out why. That is something for another day though.