Unter technischen Gesichtspunkten habe ich in Bezug auf den SVG Einsatz in früheren Einträgen schon etwas aufgeschrieben. Trotz der vielen Inseln und des detaillierten Küstenverlaufs ist die Wahlkreis­geometrie lediglich 18 kB groß. Aus Gründen des Copyrights konnte das Shapefile von Statistik-Nord nicht verwendet werden, weshalb ich die Wahlkreisgrenzen mit Inkscape aus der von der Landeswahlleiterin veröffentlichten PDF Version extrahiert und für die Bildschirmdarstellung noch etwas weiter vereinfacht habe.

Zusätzlich kommen CSS3 Transitions zum Einsatz, etwa beim Übergang zur Widescreen Darstellung (Helgoland wird sichtbar) als auch beim Wechsel des Highlights in der Ergebnistabelle. Diese Technik ist so überzeugend, weil sie wirklich nur den experience layer betrifft oder etwas schnöder ausgedrückt die verzierenden Animationen. Unterstützt ein Browser diese Technik noch nicht, so ergeben sich keine funktionellen Einschränkungen, es sieht dann halt nur nicht so elegant aus.

Die Funktion zum Hineinzoomen und Verschieben der Karte mit der Maus wie bei Google Maps wurde weggelassen, da es bei nur 35 Wahlkreisen immer um den Überblick geht. Stattdessen ist das Layout so angelegt, dass die Minimalauflösung von 1024x768 (iPad, Standard Beamer) ein gut lesbares Ergebnis gibt, das auf 24" oder 27" Monitoren dann als Ganzes mit der Vergrößern-Funktion des Browsers (strg/cmd und +) angepasst werden kann. Ein gesondertes Layout für den Ausdruck ist entfallen. Die Legende ist in der Druckausgabe jetzt auch dann nutzbar, wenn keine Hintergrund­farben gedruckt werden (Voreinstellung der meisten Browser).

Glücklicherweise haben alle Webbrowser in den vergangenen Jahren große Fortschritte gemacht, was die Kompatibilität mit modernen Webstandards wie CSS und SVG angeht, und den Nutzern steht heute eine umfangreiche Auswahl an kostenfreien Produkten zur Verfügung. Mit dem Internet Explorer 9 ist auch Microsoft schließlich dieser Entwicklung gefolgt. Deshalb setzen die neuen Infografiken auf dieser Seite moderne Browser voraus und bieten keine Rückfalloption mehr an (siehe die Vorsätze für 2012).

Trotzdem kann man auf recht einfache Weise denjenigen helfen, die aus Gewohnheit oder mehr noch als Vorgabe ihrer IT-Abteilung standardmäßig Internet Explorer 6, 7 oder 8 verwenden (müssen): Google Chrome Frame ist ein plugin, welches die JavaScript und HTML rendering engine des Google Chrome Browsers innerhalb von Microsoft's Internet Explorer einsetzt. Das bedeutet, es bleiben alle Gewohnheiten („Internet ist für mich das blaue e“) und Einstellungen (vor allem Lesezeichen) bestehen. Ja es bleibt sogar standardmäßig auch das Internet Explorer eigene Verhalten in Bezug auf HTML, CSS und JavaScript bestehen, was für das Funktionieren von hausgemachten Intranetanwendungen zwingend sein kann. Lediglich Webseiten, die mit einer zusätzlichen Meta-Information ausgeliefert werden, werden innerhalb der Bedienoberfläche des Internet Explorers mit Google Chrome dargestellt.

Beim Wahlatlas zur Landtagswahl 2012 in Schleswig Holstein erscheint der hier abgebildete Hinweis für Nutzer älterer Versionen von Internet Explorer (Version 8 oder älter), die kein SVG darstellen können. Dies wird als alternativer Text des <object> tags realisiert, ohne jede weitere Prüfung auf den Hersteller des Browsers oder dessen Version. D.h. in den extrem seltenen Fällen, in denen Nutzer noch das SVG plugin von Adobe installiert haben, wird dieser Hinweis nicht sichtbar, die Darstellung funktioniert aber trotzdem nicht, da der Wahlatlas SVG und HTML in einer standardkonformen Weise mischt, wie sie von dem schon lange ausgemusterten SVG plugin nicht unterstützt wird.

Im obigen Beispiel führt der link zur Download-Seite von Google Chrome Frame, die nach einer Bestätigung und erfolgter Installation wieder automatisch auf die Ausgangsseite – hier den dann funktionierenden Wahlatlas – zurückleitet. Sollte auf dem Rechner bereits der Google Chrome Browser (unbekannterweise) vorhanden sein, werden große Teile dessen Programm-Codes genutzt und der Download beschränkt sich auf wenige Sekunden.

Google hat ein wirtschaftliches Interesse an einem schnellen Web und an Nutzern, die immer auf die neuesten Webtechnologien updaten. Daher aktualisiert sich Google Chrome in sehr kurzen Abständen selber und es wurden auch die Hürden für die Verwendung des Chrome Frame plugins immer weiter reduziert. Insbesondere werden jetzt keine Administrator Pivilegien mehr zur Installation benötigt. Auf der Hausmesse Google I/O 2011 wurden diese und andere Neuerungen detailliert erläutert (video).

Natürlich gibt es gute Gründe, den vermeintlich kostenlosen Produkten der Firma Google kritisch gegenüber zu stehen. Aber realistischerweise werden alle Datenschutz-sensibilisierten Menschen sowieso bereits einen anderen modernen Browser verwenden. Google Chrome Frame ist also lediglich ein interessanter Ansatz, die Ablösung älterer Versionen von Internet Explorer für diejenigen zu beschleunigen, die sich um so etwas nicht kümmern wollen. Dabei verlangt dieses Vorgehen keinerlei Kompromisse für die Entwicklung von Webseiten oder -anwendungen.

The layout of this blog cannot do this justice as it was meant to be set on the side of a printed page under the headline Who Was That Food Stylist? Film Credits Roll On, assumedly running over the full height. So the thumbnail on the left of this paragraph had to be cropped dramatically (click through to the original to get an idea of the proper proportions).

Sometimes a simple solution that doesn't even look like data visualization can be very effective. And especially with regard to showing extremes, the broadsheet format of the printed newspaper (vertical pages of 22 inches / 559 millimetres or more) can bring its strengths to the table.

Watch Amanda's presentation Shaping Data for News in full (46min), featuring examples from election results to baseball hitting techniques.

The final straw came when I thought about a layout for the 2012 election in Schleswig-Holstein (click above for a first glimpse). Clearly this map shape would waste a lot of screen real estate when put into non-overlapping boxes as is necessary for the SVG Web shim.

So as a special kind of New Year's resolution to loose weight and get speedier I will drop shim technologies for legacy browsers from now on. Thanks, SVG Web, you have helped a lot of people in the transition period but now it's time to move on, to a fully standards-compliant web.

Myself I will present on Even faster web mapping, where the combined experiences of optimizing election maps of the past three years will lead to some practical recommendations for authors.

Here the SVG Web library comes to help that offers support for standard compliant SVG markup in IE 6, 7 & 8 with the use of the still widely deployed Flash plugin. Very recently SVG Web became fully compatible with the latest preview release of IE9 thus making "Ubiquitous SVG" a reality.

You can watch this presentation as well as all the others from the Paris conference at river-valley.tv. The recordings are provided under a Creative Commons BY-ND license and available in several formats for streaming and download.

This site has been involved a tiny bit as one of the election atlas maps has been made available in such a manner that it works with today’s release of the developer preview of ie9 (watch Microsoft Product Manager Patrick Dengler demo that atlas). It is telling how much of a chicken and egg problem people face when talking about SVG that Microsoft had to reach out to small countries and even smaller websites to get hold of some SVG examples to show off. And may I add that this map had already been working in 2004.

Now that they’re in the game it’ll be interesting to watch how the adoption of SVG develops. It is a first step but one has to watch carefully. The current implementation in ie9 lacks several aspects of SVG, e.g. the viewbox attribute, which is very important to GIS applications. Let’s hope it was just a matter of what could get done in time for the conference, but we have seen otherwise before. Also with ie9 becoming a developing target for SVG apps a few other headaches will occur. The event model in ie differs from Mozilla’s implementation and there’s probably more to surface once you start going cross browser compatibility.

On the other hand the MIX10 keynote on day one heavily emphasized Silverlight 4. While this goes pretty much against the spirit of open standards, one has to admit upon seeing the ease of use of a visual authoring tool like Expression Blend 4, that this is what might be missing the most before SVG can really enter the mainstream.

Und für Deutschland gab es heute auch eine neue animierte Pyramide (SVG, en/fr/de/ru) für die 12. koordinierte Bevölkerungsvorausberechnung zu sehen, bei der man neben vier Varianten auch noch beliebig Altersgruppen einstellen kann und vieles mehr.

So war es dann ein wenig enttäuschend, im Fernsehen die anstehende Alterung der Bevölkerung lediglich in Form von Klotür-Männchen gezeigt zu bekommen. Dabei ist es vielleicht nicht nur das Vorurteil des verdummenden Mediums, sondern auch das 16:9 Seitenverhältnis des modernen Fernsehens, das hier Vorgaben macht.

Die Zahl der Nichtwähler bei der Bundestagswahl am 27. September war ohne Ausnahme in jenen Regionen, Kommunen und Stadtteilen überdurchschnittlich hoch, in denen besonders viele Menschen von Arbeitslosengeld oder niedrigen Löhnen leben müssen. Das ergab laut einem Bericht des „Spiegel“ eine Analyse des Paritätischen Wohlfahrtsverbandes.
...
Auch unter den westdeutschen Bundesländern sei das Land mit den anteilig meisten Einkommensschwachen vorne: In Bremen, wo die Armutsquote bei 19 Prozent liege, sei fast ein Drittel der Menschen nicht zur Wahl gegangen. Hoch sei die Wahlbeteiligung hingegen dort, wo Gutverdienende wohnten, zum Beispiel in den Speckgürteln von Berlin, Stuttgart und München. (Quelle: welt.de)

Selber ausprobieren unter zdf.de/ZDFmediathek/

Selber ausprobieren unter vis.uell.net/btw/09/atlas.html

Die Idee des ZDF Wahl-Lokals, das Wahlergebnis für die Klassen einer anderen Variable zu aggregieren, ist neu und gut gelöst. Leider ist das durch den ZDF Medienplayer vorgegebene Layout für die Karte der Bundesrepublik etwas unvorteilhaft und viele regionale Muster werden mit nur drei Klassen nicht so gut sichtbar. Dafür eröffnet die Klasseneinteilung per Schieberegler, die sofort die Karte und Wahlergebnisse aktualisiert, eine spielerische Interaktion und möglicherweise besseres Verstehen der Zusammenhänge. Wertvoller Platz für die Karte wird zugunsten von sehr großen Schaltflächen für die anderen Wahlen verschenkt.

The Voronoi Diagram comes to help. Its organic shapes are nested so that even very small shares can be shown. It serves as a special form of a tree map. The statistical use case is aptly named Price Kaleidoscope, also a better marketing term that doesn't involve cooking.

Here is a beautiful showcase of Scalable Vector Graphics at work. Read more about Voronoi diagram - a new visualisation tool for the price statistics or visit the SVGopen conference.

Nevertheless, I am collecting the advantages of SVG in mapping, and this is one of them:

You can hardly have a better load indicator than the map being drawn district by district as the path data is tickling through your slow connection.

This website advocates the use of open standards for data driven graphics, namely SVG (Scalable Vector Graphics) and it is this technology that is not at all supported in Internet Explorer. Adobe provided a – reasonable at the time (2001) – plugin that got end of lifed in January 2009, leaving a significant questionmark for content providers who used the SVG format.

Just in time for its world conference SVGopen 2009, good news is coming in form of a JavaScript library called SVG Web, that allows SVG to be rendered using the Flash plugin. While this is not a panacea, the Flash plugin has 95-97% market share (it is a necessary requirement for watching youtube!) and thus a viable option to go. It is exactly those video capabilities of Flash that might cause it to be blocked in some office environments, but still.

One of the huge advantages of SVG Web is its ability to run almost unmodified standard complient SVG markup. This hasn't been done before. JavaScript libraries like dojo.gfx, Raphaël or JSXGraph adapt some elements of the SVG language and everything has to be constructed in JavaScript. In addition those libraries render VML on Internet Explorer, which has the advantage of giving vector graphics to even the barest Internet Explorer installation (no plugins required at all), but performance is far from bearable for more advanced graphics. SVG Web is backed by Google who is kind of giving Microsoft the finger here.

The SVG Web Toolkit is currently in its alpha stages but is already running well enough to adapt an animated populaton pyramid to it, as is showcased on this site. The election atlas is also making good progress in running on Internet Explorer via the Flash plugin and will hopefully be released on this site soon.

This is one of the many great examples that are showcased in Visual Language for Designers: Principles for Creating Graphics that People Understand, a recently published book by Connie Malamed that does a lot more than showcasing best practices without discussing bad examples:

Malamed is a cognitive scientist, artist, and educator. As such, she recognizes the need for infographics to be designed with an understanding of what actually works, based on empirical research. She proposes design principles that have emerged from an understanding of how the eyes and mind function, drawn from research in the fields of visual communication and graphic design, learning theory and instructional design, cognitive psychology and neuroscience, and information visualization.

Die folgenden Punkte möchte ich hervorheben

1. Die Zeitschiene erlaubt zumindest für die Bundestagswahlen eine Rückschau bis 1949. Obwohl hier die Funktionalität von (2) gedoppelt wird, ist in dieser Darstellung der Zeitstrahlaspekt besser erlebbar.
2. Eine Liniengrafik der Stimmenanteile über den gesamten verfügbaren Zeitraum ist gleichzeitig auch als Navigator wie unter (1) zu verwenden. Hier kommt man mit der Größe etwas an die Grenzen, zeigt aber gleichzeitig die Datendichte des Wahlmonitors auf.
3. Der Navigator ist besonders gut gelungen. Nicht nur, dass er die verschiedenen regionalen Ebenen visualisiert und somit sofort zeigt, was es hier noch aus dem Datenfundus zu sehen gibt. In der Deutschlandkarte sieht man sogar welcher Landtag gewählt wird.
4. Das Vergrößerungsglas ist kontraproduktiv, denn es macht auch noch darauf aufmerksam, dass die Kreiskarte als Pixelgrafik hinterlegt ist. Enttäuschender ist noch, dass die Karte nur als Navigation zu den Kreisergebnissen aber nicht als thematische (Choropleten-) Karte genutzt wird.

Nicht im obigen Screenshot zu sehen, aber eine Selbstverständlichkeit sind die Ergebnisdarstellungen nach Gewinne/Verluste, Sitzverteilung und Stimmenanteil. Wirklich schade ist, dass trotz Verwendung von Flash die Grafik pixelgenau begrenzt ist und sich auch auf großen Monitoren nicht vergrößern läßt.