<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>Visuell: Das Blog der Visualisierung</title>
    <link rel="alternate" type="text/html" href="http://vis.uell.net/blog/" />
    <link rel="self" type="application/atom+xml" href="http://vis.uell.net/blog/atom.xml" />
    <id>tag:glotzehdmini.local,2010-02-14:/blog//1</id>
    <updated>2013-04-05T18:29:22Z</updated>

<entry>
    <title>Datenvisualisierung für Web und Print</title>
    <link rel="alternate" type="text/html" href="http://vis.uell.net/blog/2013/04/datenvisualisierung-fur-web-und-print.html" />
    <id>tag:glotzehdmini.local,2013:/blog//1.42</id>

    <published>2013-04-05T18:13:47Z</published>
    <updated>2013-04-05T18:29:22Z</updated>

    <summary>Die Diagramm-Werkzeuge von Illustrator oder Excel haben sich im Vergleich zum Rest der Programme erstaunlich wenig weiterentwickelt. Auch im Jahre 2013 ist es mit Excel nicht ohne weiteres möglich, einen Scatterplot mit Labeln zu versehen. Die offizielle Hilfeseite sagt dazu:...</summary>
    <author>
        <name>Data Visualisation</name>
        <uri>http://vis.uell.net/blog</uri>
    </author>
    <content type="html" xml:lang="de" xml:base="http://vis.uell.net">
        <![CDATA[<p>Die Diagramm-Werkzeuge von Illustrator oder Excel haben sich im Vergleich zum Rest der Programme erstaunlich wenig weiterentwickelt. Auch im Jahre 2013 ist es mit Excel nicht ohne weiteres möglich, einen Scatterplot mit Labeln zu versehen. Die <a href="http://support.microsoft.com/kb/213750">offizielle Hilfeseite</a> sagt dazu:

<blockquote>In Microsoft Excel gibt es keinen integrierten Befehl, der in einem XY-Punktdiagramm oder einem Blasendiagramm automatisch Datenpunkte mit Beschriftungen versieht. Sie können jedoch ein VBA-Makro für diese Funktion erstellen.</blockquote>

<p>Dies fällt umso stärker auf wenn man sieht, wie vielfältig Datenvisualisierung im Web heutzutage daherkommt. Es wäre ein Leichtes, dies den Herstellern anzulasten, aber bei genauerer Betrachtung zeigt sich, dass Visualisiserungen jenseits von Balken- und Tortendiagrammen zu vielfältig sind, als dass man sie mit einer einfachen graphischen Oberfläche konfigurieren oder erstellen könnte.</p></p>

<p>Auch in Excel steht man oft vor dem Problem, dass das Programm eine große Hife ist, wenn man das will, wass vom Programm vorgesehen ist, dass es aber haarig wird, wenn man vom vorgegebenen Pfad abweichen möchte. Das fängt schon bei der Bevölkerungspyramide an und hört bei thematischen Karten noch lange nicht auf.
Vor diesem Zwiespalt standen Programme schon immer, weshalb die mächtigeren unter ihnen über eine eigene Makro-Sprache verfügen, die dort weiterhelfen soll, wo die Standardfunktionen aufhören (s.o.).</p>

<p>Wenn man dies weiterdenkt, dann ergeben sich natürlich die größten Freiheiten, wenn man gleich zu einer Programmiersprache greift.</p>

<p>Und das ist auch genau der Ansatz der JavaScript Bibliothek <a href="http://d3js.org/">D3</a>, die einem all jene Funktionen zur Verfügung stellt, die datenbasierte Graphiken benötigen: Nämlich Zahlenwerte in graphische Attribute (Länge, Breite, Position, Farbe …) umsetzen und dazu viele Hilfestellungen bietet wie z.B. für die Beschriftung von Achsen, die oft mühsamer sind als das eigentliche Diagramm. Als Einstieg hier ein <a href="http://alignedleft.com/tutorials/d3/making-a-scatterplot/">Scatterplot mit Labeln</a>, realisiert mit D3.</p>

<p>Wenn man der These folgt, dass es einfacher ist, eine ausgefeilte Datenvisualisierung mit D3 im Webbrowser zu entwickeln als in Illustrator, dann stellt sich die Frage, wie man dann die gedruckten Medien bedienen kann.</p>

<p>In der Frühzeit des Webs wurden die Inhalte zunächst für Print gedacht und entwickelt und dann nach und nach so gut es ging an das Web angepasst. Jetzt ist es durchaus möglich und sogar empfehlenswert, im Web zu beginnen und die dort programmatisch erzeugten Datengraphiken in den Print-Workflow zu übernehmen.</p>

<p>Hier soll kurz gezeigt werden, wie das am besten geht. Bereits in meinem SVGopen Papier <a href="http://vis.uell.net/svgopen/09/SVG_Strengths_in_Web_Mapping_Neutze2009.pdf">SVG Strengths for Web Mapping</a> (pdf, 8.1MB) hatte ich 2009 als ersten Vorteil das Ausdrucken angeführt. Safari und Firefox waren zum damaligen Zeitpunkt bereits in der Lage, beim Ausdrucken von Webseiten mit SVG Inhalten in eine PDF-Datei die Vektorinformation beizubehalten, was eine Weiterberbeitung für Print-Workflows erlaubte, jedoch unter Verlust der semantischen Information (beispielsweise der Wahlkreisnummer eines Polygons in einer thematischen Karte).</p>

<p>In den letzten Jahren gab es weitere große Fortschritte auf Seite der Browser: War der Durchbruch des Webs und das gegenseitige Lernen durch die „View Source“ Möglichkeit bedingt, kam diese lange Zeit an die Grenzen bei dynamischen Inhalten. Die Funktion „Quelltext anzeigen“ erlaubte lediglich die Untersuchung der statischen Inhalte einer Webseite. Dagegen erlauben die <em>Developer Tools</em> moderner Browser heute die Analyse jedes beliebigen Zustands einer Webseite; das sogenannte <em>live DOM</em> wird zugänglich.</p>

<p>Am Beispiel der Karten auf <em>wahlatlas.net</em> soll das Vorgehen hier kurz erläutert werden. Dazu verwendet man entweder den Browser Google Chrome oder Apple&#8217;s Safari, wobei man bei letzterem zunächst in den Einstellungen unter „Erweitert“ das Entwickler-Menü aktivieren muss. Dann klickt man im Bereich der Karte, jedoch nicht in einen Wahlkreis, weil man die Element-Information für die gesamte Karte haben möchte.</p>

<p><img src="/blog/thumbs/element_untersuchen.png" alt="Kontextmenü: Element Untersuchen" width="275px" height="275px" /></p>

<p>In diesem Kontext-Menü (Rechts- bzw. ctrl-Klick) gibt es den Eintrag <em>Element untersuchen</em> was einer erweiterten Anzeige des aktuellen „Quelltextes“ entspricht bzw. genauer gesagt den aktuellen Zustand des DOM zugänglich macht. Nachfolgende Abbildung zeigt vereinfacht, wie das aussieht. Der Clou liegt darin, dass man in diesem Quelltext – auch bei eingeklappten Elementen – Teile der Baumstruktur einfach markieren, kopieren und weiterverwenden kann:</p>

<p><figure><br />
<img src="/blog/thumbs/developer_tools.png" alt="Developer Tools: Live DOM" width="393px" height="201px" /><br />
<figcaption>Developer Tools: Live DOM</figcaption></figure></p>

<p>In einen Texteditor eingefügt und mit der Dateiendung .svg abgespeichert, lässt sich dies dann in Illustrator, Inkscape o.ä. verarbeiten. Ggf. kann es bei manchen Grafiken Probleme mit den Dimensionen geben. Im Wahlatlas etwa sieht das Viewbox-Attribut so aus:</p>

<pre><code>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; 
width=&quot;100%&quot; height=&quot;100%&quot; id=&quot;root&quot;
viewBox=&quot;-305335 -6849488 672667 910596&quot;&gt;
</code></pre>

<p>D.h. die SVG-Grafik soll immer das sie umgebende DIV vollständig ausfüllen, weshalb die Abmessungen jeweils als 100% angegeben sind. Es empfiehlt sich hier gleich vor dem Abspeichern die Dimensionen eines A4 Blattes einzugeben:</p>

<pre><code>width=&quot;21cm&quot; height=&quot;29cm&quot;
</code></pre>

<p>In vielen Fällen kann dieser Vorgang mit dem Bookmarklet <a href="http://nytimes.github.com/svg-crowbar/">SVG Crowbar</a> noch weiter vereinfacht werden. Bislang lediglich für Google's Chrome besteht so die Möglichkeit, die Grafik direkt als weiterverarbeitbare SVG Datei herunterzuladen.</p>

<p>Für die Karte der Wahlkreise bleibt auf diese Weise die Metainformation der Wahlkreisnummer und ihres Namens im SVG Quellcode erhalten:</p>

<pre><code>&lt;path id=&quot;w48&quot; d=&quot;M515 … -207z&quot; style=&quot;fill: #ffa500;&quot;&gt;
&lt;title&gt;Hildesheim&lt;/title&gt;&lt;/path&gt;
</code></pre>

<p>Dass eine Zeitung, deren Motto <em>All the News That's Fit to Print</em> ist, heute auf dem webbasierten Versionsverwaltungs-System GitHub zu finden ist und eben dort ein Bookmarklet zur Extraktion von SVG Graphiken aus Webanwendungen anbietet, zeigt einmal mehr, dass das Universalwerkzeug Browser heute sogar Teil der Druckvorstufe ist.</p>]]>
        
    </content>
</entry>

<entry>
    <title>SVG in eBooks</title>
    <link rel="alternate" type="text/html" href="http://vis.uell.net/blog/2012/09/svg-in-ebooks.html" />
    <id>tag:glotzehdmini.local,2012:/blog//1.41</id>

    <published>2012-09-28T15:46:51Z</published>
    <updated>2012-09-28T16:11:28Z</updated>

    <summary>During the final SVGopen conference this September in Zürich, which also marked the first iteration of The Graphical Web, I spoke about SVG in eBooks. Intended as a solution for ever higher but varying pixel densities of eReaders and tablets,...</summary>
    <author>
        <name>Data Visualisation</name>
        <uri>http://vis.uell.net/blog</uri>
    </author>
    <content type="html" xml:lang="de" xml:base="http://vis.uell.net">
        <![CDATA[<p>During the final SVGopen conference this September in Zürich, which also marked the first iteration of <a href="http://www.graphicalweb.org/2012/">The Graphical Web</a>, I spoke about SVG in eBooks. Intended as a solution for ever higher but varying pixel densities of eReaders and tablets, it turned out that the authoring side of things is lacking. Nevertheless the resolution independence of SVG can already be harnessed in eBooks today, some caveats notwithstanding. </p>

<p>The Swiss Federal Institute of Technology in Zürich, that hosted the conference, made recordings of all the talks available in various formats. Thus you can <a href="http://www.multimedia.ethz.ch/conferences/2012/svgopen/03-1_tuesday?doi=10.3930/ETHZ/AV-49d642ba-b6d1-48ac-a61e-ca4b21b5cc59&autostart=false">watch my presentation "SVG in eBooks"</a> on almost any device. </p>

<p><a href="http://www.flickr.com/photos/mac/8032985466/" title="SVG in eBooks by mac steve, on Flickr"><img src="http://farm9.staticflickr.com/8315/8032985466_4b679eeb23.jpg" width="500" height="375" alt="SVG in eBooks"></a></p>

<p>The talk is based on a published paper with the full title <a href="http://papers.graphicalweb.org/2012/papers/svg-in-ebooks-2013-packaging-the-graphical-web-for-offline-use">SVG in eBooks – Packaging the Graphical Web for Offline Use</a> and contains a lot of links to resources and example files. Also available from this site are the <a href="http://vis.uell.net/svgopen/12/SVG%20in%20eBooks%20-%20Neutze%202012.pdf">slides</a> of the presentation as they were shown in the above recording.</p>]]>
        
    </content>
</entry>

<entry>
    <title>The Work of John Gruber</title>
    <link rel="alternate" type="text/html" href="http://vis.uell.net/blog/2012/08/the-work-of-john-gruber.html" />
    <id>tag:glotzehdmini.local,2012:/blog//1.40</id>

    <published>2012-08-19T19:01:57Z</published>
    <updated>2012-08-19T19:48:43Z</updated>

    <summary>Ten years of writing the Daring Fireball blog has drawn many ways of appreciation for John Gruber. Among them a wonderful visual analysis into the topics of his articles. Discussion of this research on The Talk Show lead me to...</summary>
    <author>
        <name>Data Visualisation</name>
        <uri>http://vis.uell.net/blog</uri>
    </author>
    <content type="html" xml:lang="de" xml:base="http://vis.uell.net">
        <![CDATA[<p>Ten years of writing the Daring Fireball blog has drawn many ways of appreciation for John Gruber. Among them a wonderful <a href="http://distantshape.com/df10/">visual analysis</a> into the topics of his articles.</p>

<p>Discussion of this research on <a href="http://muleradio.net/thetalkshow/13/">The Talk Show</a> lead me to try some more on the data. It almost certainly asked to be looked at in a <a href="http://blogstats.wordpress.com/2011/11/06/calendar-view-visualisation/">Calendar View</a> using the d3.js library.</p>

<p><a href="http://www.flickr.com/photos/mac/7807710686/" title="The Seasons of Daring Fireball by mac steve, on Flickr"><img src="http://farm9.staticflickr.com/8307/7807710686_8b3a4c9759.jpg" width="500" height="340" alt="The Seasons of Daring Fireball"></a></p>

<p>I leave it to the viewers to come to their own conclusions if and what (seasonal) patterns are revealed in that graphic. As became clear pretty soon, his work has expanded far beyond the written word in recent years. So the graphic was appended with links to the talks John gave. It has been a pleasure to listen and watch those great talks about design and excellence again.</p>

<p>And with this I present <a href="/d3/df10.html">John Gruber’s Œuvre</a>, a data visualisation of the first ten years of his articles with regard to word count by day. Thanks to <a href="http://distantshape.com">Kemper Smith</a> for letting me re-use the data he gathered. </p>]]>
        
    </content>
</entry>

<entry>
    <title>Die Konferenz »The Graphical Web« (SVGopen) Zürich, 11. bis 14. September 2012</title>
    <link rel="alternate" type="text/html" href="http://vis.uell.net/blog/2012/08/the-graphical-web-2012.html" />
    <id>tag:glotzehdmini.local,2012:/blog//1.39</id>

    <published>2012-08-06T08:38:23Z</published>
    <updated>2012-08-06T12:33:16Z</updated>

    <summary>Seit 2003 habe ich in vielen Jahren die Konferenz SVGopen besucht und dabei die Entwicklung dieser für die Informationsgraphik im Web so wesentlichen Technologie verfolgt. Der Weg, den das offene Vektorgraphik-Format SVG genommen hat, war beschwerlich und es gab in...</summary>
    <author>
        <name>Data Visualisation</name>
        <uri>http://vis.uell.net/blog</uri>
    </author>
    <content type="html" xml:lang="de" xml:base="http://vis.uell.net">
        <![CDATA[<p>Seit 2003 habe ich in vielen Jahren die Konferenz <a href="http://www.svgopen.org/2003/">SVGopen</a> besucht und dabei die Entwicklung dieser für die Informationsgraphik im Web so wesentlichen Technologie verfolgt. Der Weg, den das offene Vektorgraphik-Format SVG genommen hat, war beschwerlich und es gab in den Jahren 2005 bis 2008, insbesondere nachdem Adobe mit der Firma Macromedia das Flash Format übernommen hatte, viele Zweifel an der Verbreitung des SVG Standards.</p>

<p>Und dann ging zum Schluss alles vergleichsweise schnell: Microsoft verkündete im März 2010 die Pläne für <a href="http://vis.uell.net/blog/2010/03/svg-in-internet-explorer-9.html">Internet Explorer 9</a> und dass dieser native SVG Unterstützung enthalten würde. Es war als hätten alle darauf gewartet, die anderen Browser – einschließlich Safari für iPhone und iPad – verstanden zu diesem Zeitpunkt SVG schon sehr gut. Umgekehrt waren es eben jene iOS Geräte von Apple, die niemals Flash Unterstützung erhielten und im Juni 2012 verkündete Adobe schließlich auch das <a href="http://blogs.adobe.com/flashplayer/2012/06/flash-player-and-android-update.html">Ende von Flash für Android</a>. Damit ist SVG im stationären wie im mobilen Web etabliert und gliedert sich in die anderen modernen Webstandards ein.</p>

<p>So ist dann auch die diesjährige Ausgabe der SVGopen Konferenz die letzte und gleichzeitig die erste mit dem Titel <a href="http://www.graphicalweb.org/2012/">The Graphical Web</a>, um das Themenspektrum auf neue Entwicklungen im Bereich CSS, Canvas, WebGL und mehr zu erweitern. Das Wort <i>plugin</i> kommt dabei nicht mehr vor und eine Keynote wird sogar von dem berühmten Flash Designer <a href="http://en.wikipedia.org/wiki/Joshua_Davis_%28web_designer%29">Joshua Davis</a> gehalten. Der neue Slogan der Konferenz zeigt eindeutig die allgemeinere Ausrichtung:</p>

<blockquote>The Graphical Web is a conference for discussing what is aesthetically possible on the web.
</blockquote>

<p>Das genau war es auch, was der Konferenz mit SVG als einzigem Thema fehlte. Die Beschränkung auf die technischen Möglichkeiten des Formats zielte zu sehr auf Ingenieure und eventuell noch Kartographen ab, Gestalter waren oft unterrepräsentiert. Das neue Layout der Konferenz-Webseite und die Sponsoren Adobe, Google und Microsoft weisen den Weg in das moderne Web mit seinen umfangreichen ästhetischen Ausdrucksformen und Gestaltungsmitteln.</p>

<p>Konferenzsprache ist Englisch, aber die Veranstalung findet in einem übersichtlichen Rahmen statt und ist von familiärer Atmosphäre geprägt, sodass sich auch die Nicht-Muttersprachler sehr willkommen fühlen werden. Bis zum 13. August gibt es noch eine <a href="http://graphicalweb.org/2012/#participate">ermäßigte Teilnahmegebühr</a>. In der umweltbewußten Schweiz gehört dazu auch ein ÖPNV Fahrschein für die gesamte Woche. </p>

<p>Mein Beitrag dieses Jahr behandelt <a href="http://www.svgopen.org/2012/#presentation_15">SVG in eBooks</a>. Dabei komme ich mir manchmal vor wie wenn man die <i>Zurück auf Los</i> Karte gezogen hat und in die Anfangszeit moderner Webtechnologien strafversetzt wird: Unterschiedliche (begrenzte) Implementierungen, das Henne und Ei Problem zwischen Inhalteanbietern und Implementationen von Lesesoftware u.v.a.m.</p>]]>
        
    </content>
</entry>

<entry>
    <title>Wahlatlas Schleswig-Holstein 2012</title>
    <link rel="alternate" type="text/html" href="http://vis.uell.net/blog/2012/02/wahlatlas-schleswig-holstein-2012.html" />
    <id>tag:glotzehdmini.local,2012:/blog//1.38</id>

    <published>2012-02-05T09:45:36Z</published>
    <updated>2012-02-05T17:14:14Z</updated>

    <summary>Einige Hinweise zur aktuellen kartographischen Darstellung im Wahlatlas. Zunächst in inhaltlicher Hinsicht: Es werden alle acht Parteien dargestellt, die bei der Landtagswahl 2009 mindestens 1% der gültigen Zweitstimmen erhielten. Die beim ersten Aufruf gezeigte Karte wird zufällig ausgewählt. Es können...</summary>
    <author>
        <name>Data Visualisation</name>
        <uri>http://vis.uell.net/blog</uri>
    </author>
    <content type="html" xml:lang="de" xml:base="http://vis.uell.net">
        <![CDATA[<p>Einige Hinweise zur aktuellen kartographischen Darstellung im Wahlatlas. Zunächst in inhaltlicher Hinsicht: Es werden alle acht Parteien dargestellt, die bei der Landtagswahl 2009 mindestens 1% der gültigen Zweitstimmen erhielten. Die beim ersten Aufruf gezeigte Karte wird zufällig ausgewählt. Es können aber auch Darstellungen bestimmter Parteien direkt verlinkt werden, z.B.: <a href="/sh/12/atlas.html?CDU">CDU</a>, <a href="/sh/12/atlas.html?SPD">SPD</a>, <a href="/sh/12/atlas.html?SSW">SSW</a>, <a href="/sh/12/atlas.html?gr">Grüne</a>, <a href="/sh/12/atlas.html?piraten">Piraten</a>. Eine Interpretation der bei den einzelnen Parteien zu beobachtenden regionalen Muster versucht das folgende Video.</p>

<p><iframe src="http://player.vimeo.com/video/36189440?title=0&amp;byline=0&amp;portrait=0" width="512" height="320" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></p>

<p>Unter technischen Gesichtspunkten habe ich in Bezug auf den SVG Einsatz in <a href="/blog/2012/01/new-years-resolution-2012-svg-only.html">früheren</a> <a href="/blog/2012/01/internet-explorer-aufbohren.html">Einträgen</a> schon etwas aufgeschrieben. Trotz der vielen Inseln und des detaillierten Küstenverlaufs ist die Wahlkreis&shy;geometrie lediglich 18&nbsp;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 <a href="http://www.schleswig-holstein.de/LWL/DE/Landtagswahl/PDF/karteWahlkreise.html" alt="Offizielle Karte der Wahlkreise zur Landtagswahl 2012">PDF Version</a> extrahiert und für die Bildschirmdarstellung noch etwas weiter vereinfacht habe. </p>

<p>Zusätzlich kommen <a href="http://www.alistapart.com/articles/understanding-css3-transitions/">CSS3 Transitions</a> 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 <i>experience layer</i> 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.</p>

<p>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&nbsp;+) 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&shy;farben gedruckt werden (Voreinstellung der meisten Browser).</p>]]>
        
    </content>
</entry>

<entry>
    <title>Internet Explorer aufbohren</title>
    <link rel="alternate" type="text/html" href="http://vis.uell.net/blog/2012/01/internet-explorer-aufbohren.html" />
    <id>tag:glotzehdmini.local,2012:/blog//1.37</id>

    <published>2012-01-29T15:17:56Z</published>
    <updated>2012-01-29T18:26:14Z</updated>

    <summary>I wrote a similar blog post in english about Google Chrome Frame and legacy versions of Internet Explorer titled Better Browsers over on the blogstats weblog. Glücklicherweise haben alle Webbrowser in den vergangenen Jahren große Fortschritte gemacht, was die Kompatibilität...</summary>
    <author>
        <name>Data Visualisation</name>
        <uri>http://vis.uell.net/blog</uri>
    </author>
    <content type="html" xml:lang="de" xml:base="http://vis.uell.net">
        <![CDATA[<p><i>I wrote a similar blog post in english about Google Chrome Frame and legacy versions of Internet Explorer titled <a href="http://blogstats.wordpress.com/2011/11/19/better-browsers/">Better Browsers</a> over on the blogstats weblog.</i></p>

<p>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 <a href="/blog/2012/01/new-years-resolution-2012-svg-only.html">Vorsätze</a> für 2012).</p>

<p>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 <a href="http://www.chromium.org/developers/how-tos/chrome-frame-getting-started">Chrome Frame</a> 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.</p>

<p><a href="/sh/12/atlas.html"><img src="/blog/thumbs/gcf_info.png" alt="Google Chrome Frame Hinweis" width="500px" height="286px" style="margin-bottom: 15px;"></a></p>

<p>Beim <a href="/sh/12/atlas.html">Wahlatlas zur Landtagswahl 2012 in Schleswig Holstein</a> 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 <code>&lt;object&gt;</code> 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.</p>

<p>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.</p>

<p>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 <b>keine Administrator Pivilegien</b> mehr zur Installation benötigt. Auf der Hausmesse Google I/O 2011 wurden diese und andere Neuerungen detailliert erläutert (<a href="https://www.youtube.com/watch?v=3YkEUpJQP3o">video</a>).</p>

<p>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.</p>]]>
        
    </content>
</entry>

<entry>
    <title>Visualizing Movie Credits</title>
    <link rel="alternate" type="text/html" href="http://vis.uell.net/blog/2012/01/visualizing-movie-credits.html" />
    <id>tag:glotzehdmini.local,2012:/blog//1.36</id>

    <published>2012-01-22T12:48:45Z</published>
    <updated>2012-01-22T13:46:02Z</updated>

    <summary>In a fascinating presentation at Eyeo Festival 2011, Amanda Cox, the graphics editor at the New York Times, showed among other things a visualization they made about movie credits getting ever longer. The article even coins the term “credit creep”....</summary>
    <author>
        <name>Data Visualisation</name>
        <uri>http://vis.uell.net/blog</uri>
    </author>
    <content type="html" xml:lang="de" xml:base="http://vis.uell.net">
        <![CDATA[<p><a href="http://www.nytimes.com/imagepages/2004/01/11/movies/20040111_CRED_GRAPH.html" target="_blank"><img src="/blog/thumbs/nyt_credit_creep.png" height="500px" width="129px"></a>In a fascinating presentation at Eyeo Festival 2011, Amanda Cox, the graphics editor at the <i>New York Times</i>, showed among other things a visualization they made about movie credits getting ever longer. The article even coins the term “credit creep”.</p>

<p>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 <a href="http://www.nytimes.com/2004/01/11/us/who-was-that-food-stylist-film-credits-roll-on.html?pagewanted=all&src=pm">Who Was That Food Stylist? Film Credits Roll On</a>, 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).</p>

<p>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.</p>

<p>Watch Amanda's presentation <a href="http://vimeo.com/29391942">Shaping Data for News</a> in full (46min), featuring examples from election results to baseball hitting techniques.</p>]]>
        
    </content>
</entry>

<entry>
    <title>New Year&apos;s resolution 2012: SVG only</title>
    <link rel="alternate" type="text/html" href="http://vis.uell.net/blog/2012/01/new-years-resolution-2012-svg-only.html" />
    <id>tag:glotzehdmini.local,2012:/blog//1.35</id>

    <published>2012-01-01T20:45:34Z</published>
    <updated>2012-01-01T21:32:33Z</updated>

    <summary>Starting with the General Election 2009 in Germany, the election maps on this site made use of the SVG Web library, that converted SVG markup to Flash for Internet Explorer versions 6, 7 and 8. Regional elections in 2010 and...</summary>
    <author>
        <name>Data Visualisation</name>
        <uri>http://vis.uell.net/blog</uri>
    </author>
    <content type="html" xml:lang="de" xml:base="http://vis.uell.net">
        <![CDATA[<p>Starting with the <a href="http://vis.uell.net/btw/09/atlas.html">General Election 2009</a> in Germany, the election maps on this site made use of the <a href="http://code.google.com/p/svgweb/">SVG Web</a> library, that converted SVG markup to Flash for Internet Explorer versions 6, 7 and 8. Regional elections in <a href="http://vis.uell.net/nrw/10/atlas.html">2010</a> and <a href="http://vis.uell.net/bawue/11/atlas.html">2011</a> also got the legacy treatment. But already the size of the library was heavier than some of the SVG map geometries (see filesize analysis in my <a href="http://www.svgopen.org/2011/papers/8-Even_faster_web_mapping/index.html">SVGopen 2011</a> paper).</p>

<p><a href="http://www.flickr.com/photos/mac/6614710879/"><img width="500" height="200" style="margin-bottom: 15px;" src="/blog/thumbs/sh12alpha.png"/></a></p>

<p>The final straw came when I thought about a layout for the 2012 election in <a href="http://en.wikipedia.org/wiki/Schleswig-Holstein">Schleswig-Holstein</a> (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.</p>

<p>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.</p>]]>
        
    </content>
</entry>

<entry>
    <title>SVGopen 2011</title>
    <link rel="alternate" type="text/html" href="http://vis.uell.net/blog/2011/10/svgopen-2011.html" />
    <id>tag:glotze.local,2011:/blog//1.34</id>

    <published>2011-10-03T18:22:25Z</published>
    <updated>2011-10-03T19:33:39Z</updated>

    <summary>In just two weeks time the SVGopen 2011 conference will commence in Cambridge, MA. Already there are a few hints emerging as to what position Scalable Vector Graphics currently plays when looking at the participating parties. Apart from longtime supporters...</summary>
    <author>
        <name>Data Visualisation</name>
        <uri>http://vis.uell.net/blog</uri>
    </author>
    <content type="html" xml:lang="de" xml:base="http://vis.uell.net">
        <![CDATA[<p>In just two weeks time the <a href="http://www.svgopen.org/2011/registration.php?section=conference_schedule">SVGopen 2011</a> conference will commence in Cambridge, MA. Already there are a few hints emerging as to what position Scalable Vector Graphics currently plays when looking at the participating parties. Apart from longtime supporters such as Google, Microsoft serves as conference host which continues their engagement since their announcement of IE9. Adobe is back, not only as participants but as Gold Sponsor and talking about SVG support in their tools. And finally longtime Oracle employee and <a href="http://svg-wow.org/">SVG Wow</a> artist Vincent Hardy is now affiliated with Adobe Systems, Inc.</p>

<p>Myself I will present on <a href="http://www.svgopen.org/2011/papers/8-Even_faster_web_mapping/index.html">Even faster web mapping</a>, where the combined experiences of optimizing election maps of the past three years will lead to some practical recommendations for authors. </p>]]>
        
    </content>
</entry>

<entry>
    <title>Transition strategies for SVG content providers</title>
    <link rel="alternate" type="text/html" href="http://vis.uell.net/blog/2010/12/transition-strategies-for-svg-content-providers.html" />
    <id>tag:glotze.local,2010:/blog//1.33</id>

    <published>2010-12-23T17:35:23Z</published>
    <updated>2010-12-24T18:47:40Z</updated>

    <summary>At the 2010 SVGopen conference my talk was full of praise for the native SVG support in IE9 but with an emphasis on the slow adoption of IE updates in the enterprise. Especially with IE9 not being available on WindowsXP,...</summary>
    <author>
        <name>Data Visualisation</name>
        <uri>http://vis.uell.net/blog</uri>
    </author>
    <content type="html" xml:lang="de" xml:base="http://vis.uell.net">
        <![CDATA[<p>At the 2010 SVGopen conference <a href="http://www.svgopen.org/2010/papers/15-SVG_in_Internet_Explorer/">my talk</a> was full of praise for the native SVG support in IE9 but with an emphasis on the slow adoption of IE updates in the enterprise. Especially with IE9 not being available on WindowsXP, content providers who want to leverage the power of SVG need to give a helping hand to older versions of Internet Explorer. </p>

<p>Here the <a href="http://code.google.com/p/svgweb/">SVG Web</a> 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 <a href="http://www.svgopen.org/2010/news.shtml">"Ubiquitous SVG"</a> a reality.</p>

<p><a href="http://river-valley.tv/svg-in-internet-explorer/" target="_blank"><img src="/blog/thumbs/svgopen2010talk.jpg" style="margin-bottom: 15px;" height="261" width="500"></a></p>

<p>You can watch this presentation as well as all the others from the Paris conference at <a href="http://river-valley.tv/conferences/svg-open-2010">river-valley.tv</a>. The recordings are provided under a Creative Commons BY-ND license and available in several formats for streaming and download.</p>]]>
        
    </content>
</entry>

<entry>
    <title>SVG in Internet Explorer 9</title>
    <link rel="alternate" type="text/html" href="http://vis.uell.net/blog/2010/03/svg-in-internet-explorer-9.html" />
    <id>tag:glotze.local,2010:/blog//1.32</id>

    <published>2010-03-16T19:00:09Z</published>
    <updated>2010-03-16T19:30:12Z</updated>

    <summary>When Microsoft joined the SVG Working Group (w3c) in the beginning of 2010, John Gruber pointed out that Bill Clinton was president of the United States when SVG started. So a decade later Microsoft adds SVG support to its once...</summary>
    <author>
        <name>Data Visualisation</name>
        <uri>http://vis.uell.net/blog</uri>
    </author>
    <content type="html" xml:lang="de" xml:base="http://vis.uell.net">
        <![CDATA[<p>When Microsoft joined the SVG Working Group (<a href="http://www.w3.org/2007/11/SVG_rechartering/SVG-WG-charter.html">w3c</a>) in the beginning of 2010, John Gruber pointed out that <a href="http://daringfireball.net/linked/2010/02/05/msft-svg">Bill Clinton was president of the United States when SVG started</a>. So a decade later Microsoft adds SVG support to its once dominant browser. Today’s <a href="http://blogs.msdn.com/ie/archive/2010/03/16/html5-hardware-accelerated-first-ie9-platform-preview-available-for-developers.aspx" title="IEBlog">announcement</a> at Microsoft’s web developer conference <a href="http://live.visitmix.com/News/Internet-Explorer-9-at-MIX10">MIX</a> on the features of Internet Explorer 9 (ie9) was more of a relief than a surprise (read e.g. <a href="http://www.zeldman.com/2010/03/16/ie9-preview/" title="Web Standards Guru Jeffrey Zeldman on Internet Explorer 9">Zeldman</a>'s take).</p>

<p><a href="http://ie.microsoft.com/testdrive" title="Download ie9 developer preview"><img src="/blog/thumbs/testdrive_ie9.jpg" width="500" height="196" style="margin-bottom: 20px;"></a></p>

<p>This site has been involved a tiny bit as one of the <a href="http://vis.uell.net/ie/atlas.xhtml" title="IE9-preview compatible version of an SVG map">election atlas</a> 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 <a href="http://channel9.msdn.com/posts/Charles/In-your-hands-IE9-and-SVG-Past-Present-and-Future-of-Vector-Graphics-for-the-Web/" title="literally a video about SVG in ie9">demo</a> 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.</p>

<p>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 <a href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute">viewbox attribute</a>, 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 <a href="http://en.wikipedia.org/wiki/DOM_events#Microsoft-specific_model">event model in ie</a> differs from Mozilla’s implementation and there’s probably more to surface once you start going cross browser compatibility.</p>

<p>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 <a href="http://www.microsoft.com/expression/products/Blend_Overview.aspx">Expression Blend 4</a>, that this is what might be missing the most before SVG can really enter the mainstream. </p>]]>
        
    </content>
</entry>

<entry>
    <title>Vereinfachen fürs Fernsehen </title>
    <link rel="alternate" type="text/html" href="http://vis.uell.net/blog/2009/11/vereinfachen-furs-fernsehen.html" />
    <id>tag:glotze.local,2009:/blog//1.4</id>

    <published>2009-11-18T10:11:37Z</published>
    <updated>2010-02-15T10:14:14Z</updated>

    <summary>Der 18. November hat das Zeug, Tag der Bevölkerungspyramide zu werden. Im Vereinigten Königreich wurde heute eine interessante Darstellung mit zwei Bevölkerungspyramiden (flash, en) vorgestellt, bei der man die Hüllkurve dieser Pyramiden für frei wählbare Jahre fixieren kann. Das ist...</summary>
    <author>
        <name>Data Visualisation</name>
        <uri>http://vis.uell.net/blog</uri>
    </author>
    <content type="html" xml:lang="de" xml:base="http://vis.uell.net">
        <![CDATA[<p>Der 18. November hat das Zeug, Tag der Bevölkerungspyramide zu werden. Im Vereinigten Königreich wurde heute eine interessante <a href="http://www.statistics.gov.uk/nationalprojections/flash_pyramid/projections.html">Darstellung mit zwei Bevölkerungspyramiden</a> (flash, en) vorgestellt, bei der man die Hüllkurve dieser Pyramiden für frei wählbare Jahre fixieren kann. Das ist schon eine recht anspruchsvolle Darstellung.</p>

<p><a href="http://www.flickr.com/photos/mac/4115815964/" title="Vereinfachen fürs Fernsehen by mac steve, on Flickr"><img src="http://farm3.static.flickr.com/2631/4115815964_ee842b79ee_m.jpg" width="213" height="240" alt="Vereinfachen fürs Fernsehen" /></a>Und für Deutschland gab es heute auch eine neue <a href="http://www.destatis.de/bevoelkerungspyramide/">animierte Pyramide</a> (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.</p>

<p>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.</p>]]>
        
    </content>
</entry>

<entry>
    <title>Wahlbeteiligung und Arbeitslosigkeit</title>
    <link rel="alternate" type="text/html" href="http://vis.uell.net/blog/2009/10/wahlbeteiligung-und-arbeitslosigkeit.html" />
    <id>tag:glotze.local,2009:/blog//1.12</id>

    <published>2009-10-13T16:13:35Z</published>
    <updated>2010-03-07T17:17:45Z</updated>

    <summary>Hier noch ein praktisches Beispiel für die visuelle Darstellung von Zusammenhängen. 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...</summary>
    <author>
        <name>Data Visualisation</name>
        <uri>http://vis.uell.net/blog</uri>
    </author>
    <content type="html" xml:lang="de" xml:base="http://vis.uell.net">
        <![CDATA[<p>Hier noch ein praktisches Beispiel für die visuelle Darstellung von Zusammenhängen.<br />
<a href="http://www.flickr.com/photos/mac/4007702318/" title="Wahlbeteiligung und Arbeitslosigkeit by mac steve, on Flickr"><img src="http://farm4.static.flickr.com/3205/4007702318_bca3a5ca07.jpg" width="500" height="349" alt="Wahlbeteiligung und Arbeitslosigkeit" /></a></p>

<blockquote>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.<br />...<br />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: <a href="http://www.welt.de/politik/bundestagswahl/article4808054/In-armen-Regionen-wird-besonders-wenig-gewaehlt.html">welt.de</a>)</blockquote>]]>
        
    </content>
</entry>

<entry>
    <title>Je mehr ... desto mehr/weniger ...</title>
    <link rel="alternate" type="text/html" href="http://vis.uell.net/blog/2009/09/je-mehr-desto-mehrweniger.html" />
    <id>tag:glotze.local,2009:/blog//1.13</id>

    <published>2009-09-25T16:18:31Z</published>
    <updated>2010-03-07T17:22:29Z</updated>

    <summary>Zwei Anwendungen im Netz, mit denen man die Strukturdaten zur Bundestagswahl und die Wahlergebnisse in Verbindung bringen kann, ohne den Begriff der Korrelation einführen zu müssen. Hier das Beispiel Bevölkerungszu- bzw. -abnahme und Wahlverhalten, bei dem sich Regionen mit Bevölkerungsabnahme...</summary>
    <author>
        <name>Data Visualisation</name>
        <uri>http://vis.uell.net/blog</uri>
    </author>
    <content type="html" xml:lang="de" xml:base="http://vis.uell.net">
        <![CDATA[<p>Zwei Anwendungen im Netz, mit denen man die Strukturdaten zur Bundestagswahl und die Wahlergebnisse in Verbindung bringen kann, ohne den Begriff der <i>Korrelation</i> einführen zu müssen. Hier das Beispiel Bevölkerungszu- bzw. -abnahme und Wahlverhalten, bei dem sich Regionen mit Bevölkerungsabnahme durch höhere Zweitstimmenanteile für die Partei <i>Die Linke</i> auszeichnen:</p>

<p><a href="http://www.flickr.com/photos/mac/3953754248/" title="ZDF Wahl-Lokal: Wahlergebnis 2005 nach Bevölkerungsveränderung by mac steve, on Flickr"><img src="http://farm3.static.flickr.com/2588/3953754248_c5f14f4ff2.jpg" width="500" height="260" alt="ZDF Wahl-Lokal: Wahlergebnis 2005 nach Bevölkerungsveränderung" /></a></p>

<p>Selber ausprobieren unter <a href="http://www.zdf.de/ZDFmediathek/content/844718?inPopup=true">zdf.de/ZDFmediathek/</a></p>

<p><a href="http://www.flickr.com/photos/mac/3950731909/" title="Bevölkerungsveränderung vs. Die Linke by mac steve, on Flickr"><img src="http://farm3.static.flickr.com/2645/3950731909_4d12d4c001.jpg" width="500" height="341" alt="Bevölkerungsveränderung vs. Die Linke" /></a></p>

<p>Selber ausprobieren unter <a href="http://vis.uell.net/btw/09/atlas.html">vis.uell.net/btw/09/atlas.html</a></p>

<p>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.</p>]]>
        
    </content>
</entry>

<entry>
    <title>A better pie recipe</title>
    <link rel="alternate" type="text/html" href="http://vis.uell.net/blog/2009/09/a-better-pie-recipe.html" />
    <id>tag:glotze.local,2009:/blog//1.2</id>

    <published>2009-09-09T09:04:11Z</published>
    <updated>2010-03-11T17:54:39Z</updated>

    <summary>Conventional wisdom in infographics has it that pie charts only work with up to six segments and each segment should represent a drastically different percentage. But that doesn&apos;t work with the basket of goods in price statistics where you may...</summary>
    <author>
        <name>Data Visualisation</name>
        <uri>http://vis.uell.net/blog</uri>
    </author>
    <content type="html" xml:lang="de" xml:base="http://vis.uell.net">
        <![CDATA[<p><a href="http://www.destatis.de/jetspeed/portal/cms/Sites/destatis/Internet/EN/Content/Statistics/Preise/Verbraucherpreise/WarenkorbWaegungsschema/Content75/PriceKaleidoscopeOverview,templateId=renderPrint.psml" title="Price Kaleidoscope"><img src="/blog/thumbs/voronoi.png" height="160px" width="160px" style="border: 0;"></a>Conventional wisdom in infographics has it that pie charts only work with up to six segments and each segment should represent a drastically different percentage. But that doesn't work with the basket of goods in price statistics where you may have to show the percentages of up to 700 items.</p>

<p>The <a href="http://en.wikipedia.org/wiki/Voronoi_diagram">Voronoi Diagram</a> 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 <a href="http://en.wikipedia.org/wiki/Treemapping">tree map</a>. The statistical use case is aptly named <a href="http://www.destatis.de/jetspeed/portal/cms/Sites/destatis/Internet/EN/Content/Statistics/Preise/Verbraucherpreise/WarenkorbWaegungsschema/Content75/PriceKaleidoscopeOverview,templateId=renderPrint.psml" title="Price Kaleidoscope"><i>Price Kaleidoscope</i></a>, also a better marketing term that doesn't involve cooking.</p>

<p>Here is a beautiful showcase of Scalable Vector Graphics at work. Read more about <a href="http://svgopen.com/2009/registration.php?section=abstracts_and_proceedings#paper_35">Voronoi diagram - a new visualisation tool for the price statistics</a> or visit the SVGopen conference.</p>]]>
        
    </content>
</entry>

</feed>
