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.

First and foremost, I have to admit that I am not an expert when it comes to SVG and WebGL. Although I have quite a lot of experience in developing with Javascript, I have unfortunately never come in contact with those two technologies so far. Time to educate myself on that topic and – at the same time – use the opportunity to give you some concrete examples of what is possible with it. This might also be interesting to readers who are not familiar with and/or not even interested in web technology, given the examples I am going to present are really stunning not only from a technical but also from an aesthetic perspective. Be aware that I will mostly present examples that have a geographical component because of my personal background and also because I think these examples are the most interesting.

Scalable Vector Graphics

SVG is an XML-based specification that allows to display both vector and raster graphics as well as common graphic formats (JPEG, PNG) in the browser, statically and animated. One of the many cool things about SVG is that they can be specified within HTML5 markup, using the svg-Tag. Animation, e.g. time-based modifications of elements, can be done in Javascript and SMIL, which are both understood by modern browsers. Speaking of browsers, the latest versions of all of them (yes, even Internet Explorer!) support the basic specifications of SVG 1.1, and even mobile browsers are joining the party (check here). This basically means you don’t have to extra install a plugin such as Java or Flash in order to view the visuals. Still, Microsoft has hesitated a long time until they included SVG in their browser, so if you browse the examples I am going to present with Internet Explorer 8 or below you won’t see much. So let that be for the technical details and move on to some examples.

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!.

WebGL

WebGL, short for Web Graphics Library, is a relatively new technology (specification v1.0 was released in 2011) that can be accessed via a Javascript API. It lets you render and integrate 3D content with HTML, using the computer’s graphic card. Browser support is mixed, Firefox and Chrome have been supporting WebGL for a pretty long time now, and Safari has it if installed on Mac OS X, although it is disabled by default. What about Internet Explorer? This time, IE is not just late as always, it does not support WebGL at all and according to Wikipedia, Microsoft has not even talked about it yet. Well, with the emergence of more and more 3D applications, especially data visualizations, this will certainly change in the future – at least I hope so. Anyway, keep the limited browser support in mind when trying out the following examples.

Let’s start with the probably coolest and most useful project first. Of course you know Google Earth, right? But you also know that in order to look at the virtual globe, you either need a desktop software or a plugin for your browser. Now, some people from the Institute of Geomatics Engineering at the University of Applied Sciences Northwestern Switzerland (what a long name) came up with a 3D virtual globe that runs without ANY plugin in your WebGL-supporting browser: The OpenWebGlobe! Click the link, start up the app and zoom into a Swiss area with a lot of mountains (i.e., the Alps). You will see them in 3D (well, they do not support real 3D with glasses so far but who knows what the future will bring). By clicking on a link in the left sidebar you can also view other 3D features. Check out the sample screenshot below of the prominent Eiger, Mönch & Jungfrau mountains: Of course, compared to Google Earth or other similar applications, the feature set is still kind of limited. But the guys even provide a Javascript SDK/API which allows you to produce virtual globes from scratch and populate them with any data you have available (for example Flickr geotagged photos). That is pretty rad – and everything natively in your browser, supported by the computing power of your graphic card!

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!