I just want to show some SVG features. I made a map of the Netherlands where the provinces are colored determined by the number of inhabitants. I've been reading Visualize This by Nathan Yau (from FlowingData) and looking at the examples about maps I figured I should try it out myself.
I wrote a small R script to go from a list of inhabitants per province to a css list of gray tints.
A SVG map of the Netherlands was easily found on Wikipedia. This is just a great source of empty maps in vector format, where paths and groups already have id labels which you can use. In Inkscape I edited the paths so that there was only one path per province.
Since I know little to nothing about HTML, CSS, SVG coding (yet!), it took some time to find a way to use the list I made of gray tints with the fill features for every path without filling it in by hand. In the end put a group around every province path and added a 'class' with the name of the province, i.e. class="Drenthe".
To change the fill color I put the following in the style section of the SVG:
.Drenthe{fill:#202020;}
I'll put the SVG below so you can check out the details by downloading it and opening it in your own favorite text editor (notepad++)
So looking back on this small project I guess you always need to put some effort into preparing your data (getting grays in this case), but also into preparing the map. The map already looked good, but beneath the hood I had to do some work. Now it's possible to put in a new list of colors and your new map is ready. Since I have the R script to produce such a list it would only take me a couple of minutes to get a brand new map.
I added some hover functionality to test that and it works, but this is of course from a nice looking map. There's no title and no legend, but those are things to look for in the near future. P.S.: I forgot that older versions of Internet Explorer don't support SVG, so if there's no map below that's probably it.
:-)
ReplyDelete