Finding a Good Data Source For a World Map

This entry is part 1 of 4 in the series Recreating the Piwik Maps in SVG

Last year I contributed a Flash-based world map to the open source Piwik Web Analytics project. At that time, all of the Piwik charts where rendered in Flash, but as with release 1.5, all Flash charts were replaced with JS/canvas charts. Now, my map plugin is the only Flash component in the whole project, which is why they asked me if I could rewrite it in SVG. I will take some time in October to do this and I want to write here about my work. In contrast to many past projects where I wrote making-of like posts after finishing, I now want to write while working – literally. This kind of invites everyone interested to take part in the design process and, besides of that, provides a good amount of documentation and tutorial-like resources.

more..

Why I Hate Coding With Processing – At Least Sometimes..Why I Hate Coding With Processing – At Least Sometimes..

Well, as all of you might know, Processing is cool and easy to learn, especially for graphic designers and makers of all kinds, and finally, Processing is a fun thing to work with. Really? Actually this is not quite the experience I get whenever I start sketching a visualization. Yesterday was such a day, when I found myself running from obstacle into obstacle. Here's a short documentary of what went wrong and why.

more..

All Berlin Streets, ehm, visualized

Ok, this is probably the cheapest visualization I ever created, but since Ben Fry has done the same before, I think I'm allowed to do so, too. This map simply shows all streets and railroads of Berlin. Likewise as in the US version, one can identify relevant geographic features like parks, rivers and lakes at places without streets.

Thanks to the kind folks at OpenStreetMaps and cloudmade.com, creating this image took me five minutes, literally. Three minutes for downloading the Illustrator document and two for a little editing. Well, I not even dare to put my name on the map..


Ok, this is probably the cheapest visualization I ever created, but since Ben Fry has done the same before, I think I'm allowed to do so, too. This map simply shows all streets and railroads of Berlin. Likewise as in the US version, one can identify relevant geographic features like parks, rivers and lakes at places without streets.

Thanks to the kind folks at OpenStreetMaps and cloudmade.com, creating this image took me five minutes, literally. Three minutes for downloading the Illustrator document and two for a little editing. Well, I not even dare to put my name on the map..

Creating the same map for Germany would be a little harder due to the increased amount of data. But to really keep up with the US version by Ben Fry the ultimate goal should be to render a street-only map of entire Europe. Kind of a challenge, isn't it?

And, just in case you want to hang this map upon your wall (like me), here are 150dpi (11mb) and 300dpi (27mb) versions which you can use to print the poster at your favourite poster printing service. more..

Generating Color Blindness Test Images with Processing

My wife recently observed my two-year-old son eating green strawberries and is now curious if he has some kind of red-green color blindness. Unfortunately, he is not yet able to give us the name of numbers, so the commonly used Ishihara test images won't do. Well, I thought it´s a nice idea for this rainy Sunday afternoon to generate some of those images myself. Instead of numbers I used simple images of things I knew my son is able to name. If you like, find the source files here. The icons are taken from thenounproject.

My wife recently watched my 2 years old son eating green strawberries and was now curious if he has some kind of red-green color blindness. Unfortunately, he is not yet able to tell us the name of numbers, so the commonly used Ishihara test images won't work in this case. Well, I thought it would be a nice idea for this rainy Sunday to generate some of those images myself. Instead of numbers I used simple images of things I knew my son is able to name. If you like, find the source files here. Icons taken from thenounproject.

  more..

Looking at Mistakes in Infographics: The Profile of Italian Poverty

I just found the link to an infographic on Italian Poverty via @datavis. Before looking at the graphic I was interessted about how they pointed out the well known fact that in Italien the north is very rich compared to the south. So actually I expected a map or something, but the creator of the graphic decided to do it with some kind of spider chart. After looking at the graphic for a while, I noted that the creator made several mistakes and in order to "enlighten" the visualization world with my knowledge I decided to publish my notes right here.
more..

Seltsame Anomalien in den Schlachtungsstatistiken

Nachdem heute der EU-Rat mit Unterstützung der deutschen Regierung erfolgreich die Kennzeichnungspflicht von Klonfleisch verhindert hat, wollte ich ja eigentlich nur eine kleine interaktive Grafik zu den Tierschlachtungen in Deutschland basteln. Nur um mal zu sehen, wieviele Tiere wir eigentlich so schlachten und wie sich die Zahlen über die Jahre so entwickeln. Als ersten Schritt habe ich mir dazu mal die aktuellen Schlachtungsstatistiken vom statistischen Bundesamt angesehen (Tabelle 41331-0001). Die Daten reichen von 1993 bis 2010, gliedern die Schlachtungen in die verschiedenen Tierarten auf und trennen nochmal zwischen Tieren in- und ausländischer Herkunft sowie Hausschlachtungen. Nun aber zu den Anomalien..

Fangen wir mal mit den Schweinen an. Relativ normale Entwicklung bis 2009 zu etwas über 55 Mio Schweinen pro Jahr, aber dann in 2010 der Absturz. Hat das vielleicht etwas mit der Schweinegrippe-Pandemie von 2009 zu tun? Eher nicht, denn dann müssten die Schlachtungen schon 2009 zurückgehen. Außerdem gab es keinerlei Ansteckungsgefahr durch den Verzehr von Schweinefleisch. Woher kam dieser starke Rückgang aber dann?

Weiter zu den Schafen, auch hier zeigt sich ein ähnlicher Absturz, diesmal allerdings schon ein Jahr früher. So geht die Anzahl der geschlachteten Tiere von etwa 1,15 Mio. Tieren in 2008 plötzlich auf 200.000 Tiere in 2009 zurück. 2010 wurden laut dem statistischen Bundesamt sogar nur noch 28.000 Schafe geschlachtet. Aber wieso? Und was haben die Deutschen stattdessen gegessen?

Zumindenst letztere Frage lässt sich anhand der seltsamen Daten beantworten, denn 2010 gibt es einen sprunghaften Anstieg der Jungrinderschlachtungen auf saftige 58 Mio (Vorjahr: 31.000, davor konstant bei null). Also Jungrinder statt Schweine? Aber was haben die Deutschen 2009 gegessen?

Auch das ist leicht zu beantworten: Lämmer. Denn bei den Schafschlachtungen gibt es genau für das Jahr 2009 den sprunghaften Anstieg. Den Sprung von 0 Lämmern in 2008 zu über 800.000 Lämmern in 2009 kann ich mir eigentlich nur dadurch erklären, dass Lämmer vor 2009 einfach zu den Schafen dazugerechnet wurden. Was bleibt ist der seltsame Abfall in 2010 (denn den gibts ja bei Schafen und Lämmern).

Machen wir mal weiter mit den Pferden. Ich habe noch nie in meinem Leben Pferdefleisch gegessen, aber scheinbar war das im letzten Jahr der absolute Renner.  Trotz beinahe stetig sinkenden Schlachtungszahlen von 1993 bis 2009 springt die Zahl der geschlachteten Pferde 2010 auf fast 900.000 an, also den hundertfachen Wert der Vorjahre. Es wird immer seltsamer..

Kommen wir abschließend zur letzten Anomalie. Diesmal geht es um die Ziegen, deren Schlachtungszahlen in den letzten Jahren einem relativ kontinuierlichen Aufwärtstrend folgen. Die Anomalie steckt hier in der Schlachtmenge in Tonnen. Diese Schlachtmenge betrug vor 2010  etwa 18kg pro Ziege. In 2010 hat sich dieser Wert allerdings verzehnfacht, so daß man nun scheinbar im Schnitt 168 kg Schlachtgewicht aus einer Ziege bekommt. Was ist passiert? Sind die Ziegen auf einmal fetter geworden? Wohl kaum..

Was ich eher glaube ist, dass das statistische Bundesamt hier einfach totalen Murx veröffentlicht hat. Zwar sind die Zahlen für 2010 als "vorläufige Zahlen" gekennzeichnet, allerdings verstehe ich nicht, wieso die Werte mal in den Keller sinken (wie bei den Schweinen und Schafen) und mal in die Höhe schnellen (wie bei Pferden und Jungrindern). Auch die seltsame Entwicklung der Schlachtmenge je Ziege kann eigentlich nur ein Fehler in den Daten sein, fast so, als ob die Zahlen mit Hundert multipliziert wurden..

Ich frage mich, ob sich die Zahlen eigentlich auch mal jemand vom statistischen Bundesamt ansieht?

Vector Animation Performance: Flash vs. SVG

To make it clear: I love SVG. It's an open standard for description of vector graphics, it renders well in most common browsers, and it provides a huge amount of features. So, what's wrong with SVG? There's one little thing: SVG is slow, very slow! Here's a little example. I took one icon of the wonderful noun project collection, extracted the SVG path and displayed it using the RaphaelJS framework. Now I added a bit of animation that periodically scales the icon, like this:

var paper = Raphael("canvas", "800", "600");
var icon = paper.path(svgPath);
icon.attr({ fill: '#000', stroke: 'none' });
 
timer = window.setInterval(animate, 1000/30);
 
function animate() {
	t += .1;
	icon.scale((Math.sin(t)+1)*.5 + 1);
}

Here are the links to the demos.

Icons Demo Performance Demo Performance
1 SVG good Flash good
2x2 SVG good Flash good
5x5 SVG good Flash good
10x10 SVG getting slower Flash good
20x20 SVG nearly slow motion Flash high CPU load, but still fine

The result: we should forget about SVG animation by now. SVG animations are a little slower than flash.

Update: Erik Dahlstrom told me about the fact that RaphaelJS re-draws the SVG paths on every scale() call. I now implemented the scaling using svg transformations.Um eins gleich vorweg zu nehmen: Ich liebe SVG. Ein offener Standard zur Beschreibung von Vektorgrafiken, darstellbar in so gut wie allen gängigen Browsern, mit einer beinahe endlosen Vielfalt an Möglichkeiten. Was will man noch mehr? Naja, eine Sache fällt mir da ein. Es wäre toll, wenn SVG auch noch einigermaßen fix gerendert würde. Hier mal ein kleines Beispiel. Ich habe ein Icon vom wundervollen Nounproject genommen, den SVG-Pfad daraus kopiert und mit Hilfe des RaphaelJS Frameworks eingebunden. Dazu kommt jetzt noch eine einfache Animation, die das Icon größer und kleiner werden lässt:

var paper = Raphael("canvas", "800", "600");
var icon = paper.path(svgPath);
icon.attr({ fill: '#000', stroke: 'none' });
 
timer = window.setInterval(animate, 1000/30);
 
function animate() {
	t += .1;
	var s = (Math.sin(t)+1)*.5 + 1;
	icon.node.setAttribute("transform", "translate(55,34) scale("+s+") translate(-55,-34)");
}

Hier sind die Links zu den Demos.

Icons Demo Performance Demo Performance
1 SVG flüssig Flash flüssig
2x2 SVG flüssig Flash flüssig
5x5 SVG flüssig Flash flüssig
10x10 SVG ruckelt etwas Flash flüssig
20x20 SVG Zeitlupe Flash CPU unter Volllast, aber läuft noch

Das simple Ergebnis: Animation von Vektorgrafiken kann man mit SVG derzeit einfach vergessen schon begrenzt für Visualisierungen verwenden. Trotzdem noch etwas langsamer als Flash.

Update: Erik Dahlstrom hat mich freundlicherweise darauf hingewiesen, dass RaphaelJS die SVG-Pfade bei jedem scale() Aufruf neu zeichnet. Habe die Skalierung jetzt über SVG-Transformationen gelöst.