From September 11th to 14th, The Graphical Web 2012 Conference (formerly known as SVG Open) will be held at the Swiss Federal Institute of Technology in Zürich (ETH Hönggerberg). I have the luck to be a student helper, which means I will technically support the speakers. Apart from that, I will get the chance to attend speeches from some of the most renowned experts in the field who are going to talk about the latest trends in Scalable Vector Graphcics (SVG), WebGL and of course, since it can greatly benefit from the recent developments in browsers, web mapping technology. On Friday, I will even have the opportunity to participate in some workshops, from which I chose An introduction to building WebGIS applications with OpenLayers and GeoExt and Introduction to d3.js. Exciting times!
Given that, I will certainly summarize some experiences from the conference in a blog post, and/or frequently update you on what’s going on in my Twitter feed, so stay tuned. But let us put the conference aside for a while and dwelve a bit deeper in the future of the modern (graphical) web.
Scalable Vector Graphics
Prettymaps by Stamen is a beautiful example both of the capabilities of SVG and of the opportunities for data visualization that the Web 2.0 provides. Prettymaps uses SVG to render six different data layers coming from a wide array of remote sources, combining them into a colorful cartographic mashup (see the image below for an extent of the Zurich Greater Area in Switzerland). For example, Flickr shapefiles made out of geotagged, user-submitted photos, are used to provide a background layer of the landmasses (i.e. where people are usually taking photos). Another source of data is the OpenStreetMap project where stuff like road data is fetched from and colored accordingly (OSM data is user-submitted as well, by the way). Apart from the presentation of data it is also possible to click on the various shapes and gather geographical information such as city or road names (works best at high zoom levels). When you browse the map you might be turned off by its sometimes slow loading speeds which are due to the huge mass of data transferred from third party sites. Therefore, the developers also built a static, non-interactive version. All in all, Prettymaps is an example of combining modern web technology with Volunteered Geographical Information (VGI) as provided by Flickr and OSM. VGI will likely become even more important in the future since projects such as OSM gain both a bigger user base and higher acceptance among experts. But this is a different topic, let’s move on to the next example.
The next map is made with the D3.js library, and since I am going to attend a workshop about this piece of software I could not go without an example. The map shows US unemployment rates in 2008, at the verge of the outbreak of the global financial crisis, aggregated on the level of US communities. The map lacks interaction and only displays detailed information upon mouse hover with the help of the title-Tag, but what is impressing here is how fast a large array of static data points can be rendered with SVG. It literally takes milliseconds until everything is loaded. Apart from that, by using color gradients from ColorBrewer, the authors achieved an aesthetically very pleasing result. Go to the Github page of D3.js for a wealth of other examples, such as the informative Collusion Project for Firefox which visualizes browser tracking or the pointless but still beautiful Koalas To The Max!.
The second example is not an actual example on its own but a frickin’ awesome collection of many. Just browse to chromexperiments.com, a website set up by Google to promote its Chrome browser. Some examples might even work in newer versions of Firefox or Safari, though. There you have visualizations, terrain vievers and editors and even 3D games. One particularly striking example is the Small Arms Imports/Exports visualization, another virtual globe that integrates a data flow diagram describing the worldwide arms trade. While the information content might be limited due to the bit cluttered view and not easily comparable charts, the visualization is definitely highly aesthetic. And man, does it load fast, and does it perform even smoother! Well, this might not be the case if you are surfing the web with a five year old computer, but trust me – it is impressing. Check out the other examples as well!
A Promising Future
As you hopefully have seen, the technologies that will possibly shape the future web are still in their early stages, but already today a wide variety of applications exists. I am sure the next three to four years will bring a lot of development in this area, probably also because large browser vendors such as Microsoft or Apple will finally adapt to the trends. Are we going to dump desktop applications in favor of browser apps? Are we going to play full-fledged 3D shooters in Firefox instead of playing them on a game console? Will mapping and cartography as well as complex geographical analyis move from the desktop to the web? Interesting times lie ahead and I am very eager to learn what’s coming. The first step for me is the conference that starts on Tuesday, and if you are interested in what’s going on in the heads of the forefront of SVG/WebGL developers, follow me on Twitter or just come back for the next few blog posts!