A big motivation for my Wind History map project was building a tech demo showing off dynamic SVG generation. I'm pretty proud of the implementation: it's 100% static files, no active server code at all. The whole thing is two 3k HTML pages, 20k of custom Javascript, and 24mb of JSON data. All the hard work is done by Mike Bostock's brilliant Polymaps and D3 Javascript libraries. Here's some details.

I'm most proud of the map view, wind roses on top of a slippy map of OpenStreetMap tiles. I originally loaded pre-generated images on top of the base map but each PNG was some 2kb and that's a lot of HTTP requests. Each station only needs 12 bytes of data, so I rewrote the site to render the diagrams in Javascript in the browser all driven by a single 200k JSON database. It's a very cool technique and works great.

Naïvely drawing 2500 SVG diagrams on the map is slow and cluttered. Mike came to my rescue and wrote a tiler for me so that I only render SVG when the location is visible. I also replaced the wind roses with simple circles when zoomed out too far. It'd be better to declutter by only drawing the most important weather stations at high zoom levels; I fear many people never realize they can zoom in on the map.

The station page is equally important, a detailed wind diagram for every location. It's pretty aggressively Javascripted, I have a single template HTML page that gets filled with JSON data. I really like this client-heavy development style, it's very productive and scalable. The drawback is my site is largely invisible to search engines. I'll probably go back and pre-generate station HTML for all the pages just to cater to Googlebot.

The station page is pretty simple: I had to cut a lot of planned features to meet my deadline. I've got code in development for filtering by month with animated transitions to show winds shifting over a year. Also plans for fancier histograms of wind speed, more airport data, etc. Lots to do here still, will be fun.

I'm really excited by the ability to build complex visualizations entirely in Javascript. Browsers are really capable software hosts now. Between SVG, Canvas, and WebGL we have three beautiful rendering options. It was particularly liberating to decide not to care about MSIE before 9.0; what a terrible tax Microsoft has placed on developers.