The Graphical Web 2012 | SVG Open 2012

There are plenty of conferences on data visualisation to go to and then there are even more on the various technologies and tools that drive the web. So apart from language, budget and travel distance one has to narrow down exactly where additional input is needed.

I would argue that National Statistical Institutes or the readers of this blog by now have spent quite some time on the concepts of disseminating, explaining and visualising their data products and I am also of the opinion that off the shelf solutions are less than ideal. But statisticians are usually well suited to a little programming here and there so they should look into building data driven graphics themselves.

Technology wise there had been some discussion in previous years, which technology to follow. Flash was big among designers and developing platform specific apps has become chic. But HTML in its latest incarnation (“5”) together with graphical technologies like CSS, Canvas and SVG form the open web, that still has the best to offer in terms of accessibility to the largest amount of users, to search engines and to all the operating systems and devices that may come and go faster than we can plan in a bureaucracy.

The transition to a plug-in free Web is happening today.

Microsoft’s IE Blog

And clearly, Flash is on the way out, as the continuing success of iPad and iPhone demonstrate. Additionally in preparing this year’s launch of Windows 8 and their recent developments in IE9 and IE10 Microsoft promotes “plugin free surfing” and Adobe caters for modern technologies under the HTML5 umbrella with their tools.

Conference Header

This is where the 1st International Conference on Open Web Graphics comes in which is also the 10th International Conference on Scalable Vector Graphics. It’ll take place September 11 to 14, 2012 at ETH Zurich Hönggerberg Campus in Zurich/Switzerland. As the name change suggests it is not limited to SVG anymore, but clearly it is aimed at the open and graphical web and has in the past been the place where numerous developments of data driven graphics have been showcased.

From recent conferences I can tell you to expect a familial atmosphere where you will meet like-minded people from various backgrounds and professions. The browser vendors are there, w3c people, tools companies like Adobe or the open source Inkscape project and developers of JavaScript libraries.

Compared to other conferences SVG open is very affordable and even more so if you do a presentation. Should your office send at least two participants you should think about becoming a Sponsor of the conference which will be even cheaper than buying two standard tickets.

Hope you can copy something from this post to convince your employer and see you in Switzerland, September 11 to 14.

Better Browsers

Disseminating Official Statistics is a content driven task that should be foremost user-centric. However when it comes to data visualisation, some technology choices have to be made. In fact it was recent progress in web technology that made interactive data visualisation on the web possible in the first place.

ONS is known for pushing the boundaries on interactive content in this regard, going so far as to provide some content that has the following attached to it:

Note – requires an SVG-enabled web browser, such as Firefox, Safari or Chrome

Obviously this wasn’t an option for a press release or for tabulated data. On the other hand there are many on the web who would ask what other browser than the aforementioned ones would one dare to use. The reality however in larger organisations with centrally managed PCs is that users are only offered Internet Explorer and as long long as they are stuck on Windows XP will be confined to Versions 6, 7 and 8 of Internet Explorer that will not display these data driven graphs. As has been shown, browser update cycles differ greatly between corporate users and the home.

Many of us may have been able to quietly install Firefox or Opera on their work machine as those browsers don’t require administrative priviledges to install. That however doesn’t mean that this is an allowed or welcome action and there may be other technical restrictions that will prevent you from even doing that. And then there is management or other less technical inclined parts of staff that just don’t want things changed and learn a new icon to click or find their bookmarks in a different location.

Therefore so far the situation was such that either you would forego technical progress and interactive content alltogether (wait until you get WIndows 7 with Internet Explorer 9 deployed in your or your customers’ organisations) or do it only on some parts of your content and attach the above note to it.

However there is a bridging technology available that recently become much more usefull. It is called Google Chrome Frame and is a plug-in for Internet Explorer Versions 6, 7 and 8 that adds the rendering and JavaScript engine of one of the fastest browsers available for interactive content, namely Google’s Chrome Browser. Recent changes are that you no longer need administrative priviledges to install Google Chrome Frame.

After installation nothing happens, which means that all the custom intranet applications of your organisation that rely on the non-standard behaviour of Internet Explorer 7 or 8 (IE) will continue to work as before since the IE behaviour is still fully there. If however you are providing interactive content that greatly benefits or even requires a modern browser you just need to add the following line to the pages in question:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

This means a page with the above meta information will be rendered using the Google Chrome engine inside Internet Explorer if Chrome Frame is installed, thus providing SVG and fast JavaScript capabilities. If this sounds compelling, you might watch the following video from this year’s Google developer conference where the thinking behind Google Chrome Frame was elaborated.

Most of you want to try this out before you can convince your web team to add a meta tag to your web pages, so go check out the Chrome Frame: Developer Guide as well as the Chrome Frame FAQ, where you will also find how you can tweak your registry to deliberatly force the Chrome Frame renderer on pages that don’t yet have the above meta tag added (don’t ask your IT department for help with this).

I am well aware that getting this deployed in an organisation is a tough sell but at least you can guide your users who don’t want to install a new browser to check out your interactive content. If you link to the installer like this

http://www.google.com/chromeframe?redirect=true

users will be redirected to your page of interactive content after the installation. Finally Chrome Frame auto updates itself as well as the Flash plugin that comes with it.

Calendar View Visualisation

In official statistics we’re used to dealing with highly aggregated data. To visualise those, bar-, line- and pie charts are standard tools. But there is a whole other side to visualisation where it is used to recognize patterns, outliers or errors in individual data.

A very compelling example of displaying daily data for several years in a calendar view was recently presented at SVGopen 2011 by Mike Bostock, a Tufte influenced data visualisation expert, who could easily become the next Hans Rosling. Mike is among other things author of the d3.js library, a JavaScript Toolkit that can streamline your data visualisation projects a lot without forcing any constraints of predefined chart types on the developer.

US Commercial Flights, daily data 2001 vs 2002

In the above excerpt of the daily flight data for 1995–2008 (click image to see all the years covered) the effect of 9-11 is the most obvious, where flight activity stopped completely and had a hard time to recover for several months.

But there is so much more information in there:

  • the weekly pattern: less flights on weekends
  • the seasonal pattern: most flights in July and August
  • the 9-11 pattern: few flights on 9-11-2002

You might want to flick through Mike Bostock’s SVGopen 2011 slide deck to get an idea what else to expect (use arrow keys to navigate the web based presentation). All this is done using open webstandards of the latest incarnation, i.e. HTML5, CSS, JavaScript and SVG, which means there are no plugins required.

You can watch Mike Bostock live at W3Conf: Practical Standards for Web Professionals on November 16th, 2011 or later as a video download.

Touching Statistics

This week the German parliament lifted the ban on using tablet computers like the iPad during sessions. Earlier this year one MP dared to read his speech from an iPad and got cited for that. Still laptop computers aren’t allowed for the noise and visual barrier they present.

Now I don’t have any aspirations of speaking in parliament but I do know what a difference a touch device makes. It is so much more convincing in one on one talks. Modern tablet sized computers are very likely to run SVG capable browsers, so data visualisation is a given. In this video you will see some additions to the webbased visualisations as far as the touch interface goes, which is a little different from pointer devices like the traditional mouse.

Try it out as a beta version on my personal site at vis.uell.net/pyramids/12te/iPad.html

Additionally this population pyramid uses the html5 application cache which means this web-app will work even without an internet connection. So if you have a WiFi only device or are afraid of roaming costs during international conferences, just visit the above URL once and bookmark it. From then on it will work without an internet connection.

If you want to start developing yourself just do a view source at the above URL or read further in the Safari Reference Library.

BBC Dimensions: Compare Size to Familiar Areas

This BBC website does two clever things in data visualisation: It lets you compare the size – typically an area – of a flood, oil spill or festival ground to an area you’re familiar with.

Area of 2010 Pakistan Floods Overlaid the UK

So it not only uses convincing comparissons but it also offers ways to engage with the data in that you can insert your home zip code whereby you can get a much better feel of the data.

While the areas affected by the 2010 Pakistan floods have to be measured in areas of european countries, other sizes like the route Neil Armstrong and Buzz Aldrin walked on the moon’s surface can be compared to your front lawn.

Ever worried about your SVG graphics?

Not any more. Yesterday Microsoft published their fourth platform preview of Internet Explorer 9 – the last browser to get native SVG support – and I am here to tell you that it renders a lot of SVG content as was intended, right out of the box, the only caveat being: your box must be at least Windows Vista.

Check it out for yourself e.g. with this Price Kaleidoscope you might have seen at some conferences.

Internet Explorer 9 with native SVG support

If you’re stuck with WindowsXP in your office and wonder when this ubiquitous SVG world will come to a desk near you, you might be interested in SVG in Internet Explorer, a paper about possible transition strategies.