Habe heute meine neue Portfolio-Webseite driven-by-data.net gestartet, auf der in Zukunft alle Visualisierungen von mir ausgestellt werden. Dieses Blog wird es weiter geben..

Die Begriffe Datenvisualisierung und Informationsvisualisierung werden mitunter synonym gebraucht, was mich zwar relativ wenig stört und in der Regel auch niemandem schadet. Allerdings bergen unklare Begriffsdefinitionen auch das Potential für Verwirrungen und Missverständnisse. Allen Interessierten, denen sich der Unterschied zwischen Daten- und und Informationsvisualisierung noch nicht voll erschließt, möchte ich hier mal meinen Beitrag zum besseren Verständnis anbieten.

Beginnen wir zunächst mal mit der formalen wissenschaftlichen Abgrenzung.

Informationsvisualisierung in der Informatik

In der Informatik sind die Begriffe Datenvisualisierung und Informationsvisualisierung recht klar voneinander getrennt. Kurz gesagt sind Daten eigentlich alles, was sich in Bits und Bytes speichern lässt. Datenvisualisierung sind einfach alle möglichen Formen und Techniken der Generierung von Bildern (und Bewegtbildern) aus Daten. Je nach Art der visualisierten Daten ergeben sich dann die unterschiedlichen Teilbereiche. Visualisiert man z.B. Geodaten, landet man im Arbeitsfeld der Geovisualisierung, visualisiert man hingegen medizinische Datensätze (z.B. MRT-Daten) ist man bei dem medizinischen Visualisierungen usw.. Das Feld der Informationsvisualisierung ist in diesem Kontext der Teilbereich der Datenvisualisierung, der sich mit abstrakteren, d.h. von der messbaren Umwelt losgelösten Daten beschäftigt.

Vor diesem Hintergrund ist der Unterschied zwischen Datenvis. und Infovis. relativ unspektakulär und beruht rein auf der strikten wissenschaftlichen Definition.

Daten und Informationen im Kontext der Informationstechnik

Spannender finde ich dann schon eher den folgenden Ansatz: Um Informations- und Datenvisualisierungen zu unterscheiden, schaut man sich zunächst den Unterschied der einzelnen Begriffe Information und Daten an. Im Kontext der Informationstechnik ist eine Information eine "im engeren Sinne eine geordnete Abfolge von Symbolen, deren Bedeutung der Empfänger entschlüsselt"¹. Die angesprochene geordnete Abfolge von Symbolen würde in diesem Beispiel im wesentlichen die Daten darstellen. Eine Information besteht aus also Daten, die für sich betrachtet aber keinen Informationsgehalt besitzen. Dieser entsteht erst im Zusammentreffen der Daten mit einem Mensch, der den Daten eine Bedeutung beimisst. Das zugrundeliegende Modell lässt sich in etwa wie folgt darstellen:

Übertragung auf Daten- und Informationsvisualisierungen

Daraus kann man nun folgenden Unterschied ableiten: Datenvisualisierungen sind solche Visualisierungen, die zwar einen (großen) Datensatz darstellen, aber dem Betrachter keine oder kaum relevante Informationen offenbaren. Die Visualisierung kann dabei durchaus auf hohem gestalterischem Niveau stattfinden, aber man ist nach dem Betrachten so schlau wie vorher. Dementsprechend wäre eine Informationsvisualisierung ein Sonderfall der Datenvis., bei dem es gelingt, für den Betrachter relevante Informationen sichtbar zu machen.

Natürlich ist diese Definition sehr subjektiv. Was für den einen Betrachter eine relevante Information darstellt kann ein anderer Betrachter als komplett unwichtig einstufen. Daher würde ich die Unterscheidung schon im Gestaltungsprozess ansetzen. Damit landen wir bei der wichtigen Frage der Intention, die hinter einer Visualisierung steht. Wenn z.B. im Vorfeld künstlerisch gestalterische Aspekte im Vordergrund stehen, kommt vermutlich eine Datenvisualisierung heraus. Steht hingegen etwa die Gewinnung von Einsichten in komplexe Sachverhalte im Vordergrund, landen wir eher bei den Informationsvisualisierungen.

Damit wären wir dann bei der folgenden schematischen Einordnung der Begriffe zwischen den Polen Kunst und Journalismus:

Wo sich welche Visualisierung letztlich einordnen lässt, ist in den wenigsten Fällen eindeutig. Es kommt immer darauf an.

Nachtrag:

Gerade habe ich bei FFunction eine schöne Infografik zum Thema "What is Data Visualization" gesehen. Geht ein bisschen in dieselbe Richtung, wobei Information Visualization als Begriff gar nicht auftaucht.

Alle Tweets mit Bezug zum aktuellen Castortransport, abgebildet auf eine Karte vom Wendland, inklusive Archivfunktion. Entstanden in Zusammenarbeit mit Lorenz Matzat (datenjournalist.de, OpenData Blog).

Mehr Infos auf blog.live-map.de, Vollbildversion unter labs.vis4.net/castor-map

Aufgrund der überwältigenden Resonanz zu meiner Parteispenden-Visualiserung habe ich mich direkt zur nächsten Visualisierung durchgerungen. Diesmal geht es um die Nebeneinkünfte unserer Bundestagsabgeordneten, welche seit einigen Jahren zumindestens teilweise offengelegt werden müssen. Die Daten stammen auch diesmal von bundestag.de und wurden automatisch ausgewertet.

Aufgrund der überwältigenden Resonanz zu meiner Parteispenden-Visualiserung habe ich mich direkt zur nächsten Visualisierung durchgerungen. Diesmal geht es um die Nebeneinkünfte unserer Bundestagsabgeordneten, welche seit einigen Jahren zumindestens teilweise offengelegt werden müssen. Spiegel Online hat dazu in Zusammenarbeit mit abgeordnetenwatch.de mit dem Bundestagsradar bereits einen ersten Schritt gemacht. Dort kann die Abgeordneten in einer schematischen Darstellung des Plenums nach verschiedenen Kriterien filtern, darunter auch das Vorhandensein von Nebeneinkünften in bestimmten Stufen.

Leider ist aus der Grafik lediglich ersichtlich, ob ein Abgeordneter Nebeneinkünfte erzielt hat, nicht aber wieviele Nebeneinkünfte es waren. Damit kann nicht unterschieden werden, ob jemand nur einen einmaligen Vortag gehalten oder über die gesamte Legislatur ein monatliches Nebeneinkommen erzielt hat. Was ich mir hingegen vorgestellt hatte, war eine Visualisierung, in der einem hohe Nebeneinkünfte sofort "ins Auge springen" sollen. Bei der Anordnung der Abgeordneten habe ich mich zur Abwechslung nicht am Plenum des Bundestags sondern an den Heimatwahlkreisen orientiert. Zum einen, weil dadurch der lokale Bezug zwischen Bürgern und Abgeordneten betont wird und zum anderen, weil ich irgendwie ein Faible für Kartenvisualisierungen zu scheinen habe...

Die interaktive Version befindet sich hier: labs.vis4.net/nebeneinkuenfte/

Ergänzungen:

• Wie die MdB-Nebeneinkünfte ausgewertet wurden
• Quellcode auf Bitbucket

Just created a simple visualization to enhance my Processing experiences. The initial data is collected using Wireshark Network Protocol Analyzer. Each package network route is resolved via traceroute and then mapped using the free GeoLiteCity database by MaxMind.

Session 1: 60 seconds browsing through several websites

Session 2: 60 seconds peer-to-peer file sharing

Static image of session 2

The following image shows all network routes at once:

I'm not quite sure about the real practical use of stream graph visualizations, but I admit that they look very nice. In the last week I experimented a little with stream graphs and created a tool which helps finding nice color scales for stream graphs. It allows to define three different scales for each component of the HSL color space. The displayed data set is taken from Piwik Analytics and shows the evolution of visitor countries over the last 16 weeks. Click on the image to enter the live version.

Below you find a small introduction to the different toolbar controls.

Update: I added the possibility to copy the URL of the current settings, which allows to permamently store and share a color scale.

Here are a few quick examples for different settings:

After writing down my latest ideas for better Piwik visualizations, I just couldn't wait to see them in action. Since the Open Flash Chart library doesn't support multi-level pie charts I decided to create the visualization from scratch. The initial version (0.1) took me about two hours coding.

In the following image you can compare the hierarchical pie visualization (top) with the current pie visualization (bottom).

I named the plugin UserSettingsExt as it extends the current UserSettings plugin. You can download it from the Piwik Developer Zone to test it on your own Piwik installation.

Changelog

• 0.1 - basic pie chart drawing, label placement.
• 0.2 - added standard piwik tooltips
• 0.3 - added automatic resizing

If you don't want to miss any updates, you can subscribe to the plugins rss-feed at the Piwik Developer Zone.

Feedback welcome.

href="http://vis4.net/blog/de/2010/08/piwik-browser-stats-visualization/">After writing down my latest ideas for better Piwik visualizations, I just couldn't wait to see them in action. Since the Open Flash Chart library doesn't support multi-level pie charts I decided to create the visualization from scratch. The initial version (0.1) took me about two hours coding.

In the following image you can compare the hierarchical pie visualization (top) with the current pie visualization (bottom).

I named the plugin UserSettingsExt as it extends the current UserSettings plugin. You can download it from the Piwik Developer Zone to test it on your own Piwik installation.

Changelog

• 0.1 - basic pie chart drawing, label placement.
• 0.2 - added standard piwik tooltips
• 0.3 - added automatic resizing

If you don't want to miss any updates, you can subscribe to the plugins rss-feed at the Piwik Developer Zone.

Feedback welcome.

In this post I want to present two ideas for improvements to the current Piwik visualizations.

Screen resolution stats

The first idea is about improving the screen resolution charts. Here is an example for the current available visualizations in Piwik:

The current charts (pie,bar) aren't quite applicable to get an useful overview about the visitors screen resolutions. Both charts are limited to a few big values and combine all other values in the "others" element. This can lead to wrong interpretation of the data, since there might be many different screen sizes. In the example nearly the half of the sites visitors have screen resolutions that arent' displayed in the charts.

The obvious reason is that pie and bar charts are made for simple, one-dimensional data sets but the number of visits per screen resolution is a perfect representative of two-dimensional data sets. The two dimensions are obviously the screen width and the screen height. One of the simplest yet best visualization type to display two-dimensional data sets is the scatter plot. You can see the difference in no time by looking at the following prototype. In my opinion, this is the only way to make the screen resolution stats usable.

Browser statistics

My second idea is about the browser statistic charts. Again, there is only limited use to the currently provided charts.

The chart shows data of multiple browsers in multiple versions. Each combination of browser and value is treated as a distinct value and hence is shown in a unique color. The main problem of the current visualizations is (again) that the data is treated as one-dimensional. The data is in fact a hierarchical data set: the first layer is the browser layer which contains the sub-layer browser versions. One way of making a visualization more useable is to decrease the complexity, which can be done by only showing the browser level.

The visualization now clearly shows the information that is asked by most of the Piwik users: Which browsers are used by the visitors of my website? Some users might also want to know more details about the different browser versions, so there is a link to an second view that shows all browser versions.

Feedback welcome..

function helloWorld(name:String, message:String):void {
	trace( name + ' says "' + message +'"' );
}
 
new DelayedExecution(4000, this, helloWorld, "john", "hello world");
// will result in a 'john says "hello world"' trace after 4 seconds

That's all. First parameter is the delay in milliseconds, second is the object on which you want to call the method, third is the method itself and any following parameters will be passed to the method. Here you can grep the source of the DelayedExecution class. Feel free to use it for whatever you like.

package net.vis4.utils
{
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.utils.Timer;
 
	public class DelayedExecution
	{
		private var
			_obj:Object,
			_func:Function,
			_args:Array;
		/*
		 *  new DelayedExecution(100, Math, round, 4.5);
		 *
		 *  parameters:
		 *  - delay
		 *  - object
		 *  - function
		 *  - parameters
		 */
		public function DelayedExecution(... arguments)
		{
			if (arguments.length < 3) {
				trace('DelayedExecution-Error: missing arguments');
			} else {
				if (arguments[0] is uint || arguments[0] is Number) {
					if (arguments[1] is Object) {
						if (arguments[2] is Function) {
							_obj = arguments[1];
							_func = arguments[2];
							_args = [];
							if (arguments.length > 3) {
								for (var i:uint = 3; i < arguments.length; i++) {
									_args.push(arguments[i]);
								}
							}
							var t:Timer = new Timer(arguments[0] as Number, 1);
							t.addEventListener(TimerEvent.TIMER, exec);
							t.start();
						} else trace('DelayedExecution-Error: third argument should be a function');
					} else trace('DelayedExecution-Error: seconds argument should be an object (this-context of function)');
				} else trace('DelayedExecution-Error: first argument should be a number (milliseconds delay)');
			}
		}
 
		private function exec(e:Event = null):void
		{
			_func.apply(_obj, _args);
		}
	}
}

This is an AIR application I built for an assignment in the course Interactive Systems at the university. This video demonstrates all features like touch guestures and filtering. Since I don't own a touchscreen, this is only a "fake" touch video. I'd love to try this out on a real touchscreen.

Im Rahmen meines Studiums habe ich für den Kurs Interaktive Systeme eine AIR-Anwendung für eine Videothek geschrieben. Das Video demonstriert alle Features wie z.B. die Touch-Gesten. Da ich selbst keinen Touchscreen besitze handelt es sich bei dem Video nur um ein "fake". Würde die Anwendung aber zu gerne mal auf einem echten Touchscreen testen..