Visualisierung – IT@UDE https://blogs.uni-due.de/zim ZIM - Wissen schafft IT Tue, 10 Sep 2019 06:00:54 +0000 de hourly 1 https://wordpress.org/?v=6.7 Visualisierung von Information https://blogs.uni-due.de/zim/2012/05/08/visualisierung-von-information-2/ https://blogs.uni-due.de/zim/2012/05/08/visualisierung-von-information-2/#respond Tue, 08 May 2012 07:03:20 +0000 https://blogs.uni-due.de/zim/?p=1312 Weiterlesen ]]> Um etwas Farbe in den Blog-Alltag zu bringen möchte ich auf einen kurzen Film aufmerksam machen, der keinen weiteren Kommentar benötigt. Der kurze Beitrag von Column Five Media zeigt in beeindruckender Weise, wie durch den Gebrauch visueller Elemente wie Farben, Schriften, Bilder, komplexe Informationen verständlicher dargestellt werden können.

[youtube]http://www.youtube.com/watch?v=xekEXM0Vonc[/youtube]

 

Wenn Sie Unterstützung bei der Visualisierung Ihrer Inhalte auf Webseiten oder in Moodle-Kursen wünschen, wenden Sie sich an die Servicegruppe Contententwicklung und Design des ZIM.

]]>
https://blogs.uni-due.de/zim/2012/05/08/visualisierung-von-information-2/feed/ 0
Timelines – Zeitleisten im Web (3) https://blogs.uni-due.de/zim/2012/04/28/timelines-zeitleisten-im-web-3/ Sat, 28 Apr 2012 12:00:27 +0000 https://blogs.uni-due.de/zim/?p=1293 Weiterlesen ]]> In zwei Blog-Einträgen wurden schon Zeitleisten eingeführt (https://blogs.uni-due.de/zim/2011/11/04/timelines-zeitleisten-im-web-1/) und dargestellt (https://blogs.uni-due.de/zim/2011/11/08/timelines-zeitleisten-im-web-2/).

Mit Timeline von Verite (http://timeline.verite.co) gibt es nun eine weitere Javascript-Library, die ihren Fokus auf das Einbinden von verschiedenen Medien und Medieninhalten gelegt hat. Schon implementiert sind Schnittstellen zu Twitter, YouTube, Flickr, Vimeo, Google Maps und Soundcloud. Weitere sollen folgen. Praktisch ist, dass Links einfach in jedes Feld eingegeben werden können; sie werden automatisch erkannt und in der Ausgabe richtig dargestellt. Über CSS-Einstellungen kann die Ausgabe angepasst werden.

Die Anleitung auf der Seite ist gut und es existiert auch ein Generator für Embeded Code. Vorhanden ist auch schon ein WordPress-Plugin (http://wordpress.org/extend/plugins/timeline-verite-shortcode/).

Die Eingabe-Daten werden über http://de.wikipedia.org/wiki/JSON eingelesen. JSON ist ein kompaktes Datenformat und wird zum Teil als Ersatz für XML verwendet. Es ist jedoch immer auf die Einhaltung der Syntax zu achten. Für die Fehlerbehebung kann ein Online-Tool (http://jsonlint.com/) helfen. Wer der Cloud nicht traut kann sich auch ein Tool installieren; für Mac z. B. Jason (http://olivierlabs.com/jason/). Eine weitere Eingabemöglichkeit ist die Verknüpfung mit einem Google-Dokument. Hierfür gibt es auch eine Vorlage.

Ein Nachteil hat Timeline zur Zeit: Geräte mit Touchscreens werden noch nicht richtig unterstützt. Aber dies ist erkannt und soll sich in einer der nächsten Versionen ändern.

Auch zu Timeline gibt es ein Beispiel mit einigen Daten aus UDE seit der Gründung. Bei den Mercator-Professuren wurden die Vorträge eingebunden, bei „Poet in Residence“ jeweils das zugehörige Plakat.

Hier geht es zum Beispiel:

 

Fazit: Timeline ist ein Open-Source-Projekt, bietet eine schöne Zeitleiste und einfache Möglichkeiten Multimedia-Inhalte einzubinden.

]]>
Timelines – Zeitleisten im Web (2) https://blogs.uni-due.de/zim/2011/11/08/timelines-zeitleisten-im-web-2/ Tue, 08 Nov 2011 07:00:07 +0000 https://blogs.uni-due.de/zim/?p=964 Weiterlesen ]]> Im vorigen Artikel wurden Zeitleisten eingeführt und einige Tools und Javascript-Bibliotheken mit Beispielen vorgestellt. Doch wie sieht es aus, wenn diese zum Einsatz kommen?

Aus den vielen Tools wurden subjektiv die beiden Javascript-Bibliotheken Simile und Timeglider ausgewählt und kurz getestet. Bei beiden Versionen werden die gleichen Daten verwendet: Ereignisse aus der UDE, Mercator-Professuren und Poet in Residence.

Simile: Beispiel unter http://www.uni-due.de/zim/kerkewitz/beispiele/timeline/simile/simile-UDE.html

Zeitleiste mit Simile

Timeglider: Beispiel unter http://www.uni-due.de/zim/kerkewitz/beispiele/timeline/timeglider/timeglider-UDE.html


Zeitleiste mit Timeglider

Diese und weitere Beispiele finden sich unter:
http://www.uni-due.de/zim/kerkewitz/beispiele

Fazit

Das Scrollen auf der Zeitachse ist in beiden Versionen unterschiedlich realisiert. Bei beiden können eigene Ikonen/Bilder für die Zeitpunkte verwendet werden. Zusätzlich gibt es Pop-Up-Fenster, die weitere Daten enthalten können. Die Daten der einzelnen Ereignisse können bei beiden Versionen unter Verwendung von z. B. json eingebunden werden; sie können aber auch dynamisch erzeugt werden. Simile bietet mehrere Bänder, auf denen jeweils ein Zeitstrahl mit unterschiedlicher Skalierung verwendet werden kann. Bei Timeglider können auf der Zeitleiste Bilder und eine Legende verwendet werden. Zudem gibt es hier eine Zoom-Funktion.

Insgesamt scheint Timeglider etwas flexibler, jedoch ist die Darstellung mit den Bändern von Simile auch sehr eindrucksvoll. Entscheiden Sie selbst. Welches Tool gefällt Ihnen besser?

 

]]>
Timelines – Zeitleisten im Web (1) https://blogs.uni-due.de/zim/2011/11/04/timelines-zeitleisten-im-web-1/ https://blogs.uni-due.de/zim/2011/11/04/timelines-zeitleisten-im-web-1/#comments Fri, 04 Nov 2011 13:30:36 +0000 https://blogs.uni-due.de/zim/?p=881 Weiterlesen ]]> Informationen sind verschieden und müssen deshalb auch unterschiedlich dargestellt werden. Eine schon vorgestellte Art, wie Informationen präsentiert werden können, waren die Treemaps. Diese sind besonders gut geeignet, geschachtelte, hierarchische Strukturen darzustellen. Ereignisse benötigen eine andere Art der Darstellung – Zeitleisten.

Zeitleisten sind hervorragend geeignet, um Ereignisse über die Zeit darzustellen. Zeitleisten gibt es in verschiedenen Formen und Arten und – sind natürlich nicht neu. Nun hat auch Facebook (http://www.facebook.com/about/timeline) Zeitleisten für sich entdeckt.

Einige einfache Beispiele für grafische Zeitleisten sind die „Timeline für Computersprachen“ (http://www.levenez.com/lang/) und die „Unix-Timeline“ (http://www.levenez.com/unix/). Ein umfangreicheres Beispiel zur Darstellung von wichtigen Ereignissen der Weltgeschichte in einem sogenannten Zeitatlas ist Peters Synchronoptische Weltgeschichte. In diesem monumentalen Werk wird neben der reinen, zeitlichen Darstellung auch die Gleichzeitigkeit von Ereignissen visualisiert (z. B.: Tafel A, Tafel B). Mittlerweile gibt es hiervon auch eine digitale Form: Der Digitale Peters, http://www.derdigitalepeters.de/.

Schön wäre es nun, Zeitleisten auch auf der eigenen Webseite einsetzen zu können. Wie können diese erzeugt und grafisch ansprechend im Web präsentiert werden? Welche Tools existieren?

Eine kurze Übersicht mit Beispielen:

Die Ergebnisse bei allen vorgestellten Wegen sind Zeitleisten ohne Flash. Dies hat den Vorteil, dass diese auch auf iOS Geräten angezeigt werden können. Wer sich die Flexibilität erhalten möchte, die Zeitleisten aus eigenen Datenbanken füllen möchte oder um die Zeitleisten eigenen Code erstellen möchte, setzt auf Module.

Wer eine weitere Auswahl sucht, wird evtl. fündig bei folgenden Listen:

Ein Beispiel mit Daten aus der UDE gibt es im nächsten Artikel.

 

]]>
https://blogs.uni-due.de/zim/2011/11/04/timelines-zeitleisten-im-web-1/feed/ 1
Treemaps für Milliarden und Studiengebühren https://blogs.uni-due.de/zim/2011/05/21/treemaps_fur_milliarden_und_studiengebuhren/ https://blogs.uni-due.de/zim/2011/05/21/treemaps_fur_milliarden_und_studiengebuhren/#comments Sat, 21 May 2011 13:00:27 +0000 https://blogs.uni-due.de/zim/?p=347 Weiterlesen ]]> Treemaps allgemein

„Daten sind das neue Öl“ oder „Informationen sind der Rohstoff der Zukunft“. So oder so ähnlich liest man immer wieder. Doch sind Daten vorhanden, gilt es diese dann auch richtig zu präsentieren. Ist die Informationsmenge sehr groß, wird die Darstellung schwierig. Der Anspruch steigt noch einmal, sollen die Daten zusätzlich in ein Verhältnis gesetzt werden.

Diese Schwierigkeit hatte in den 1990er Jahren auch Prof. Ben Shneiderman von der Universität von Maryland. Er wollte herausfinden, welche Programme und Dateien den meisten Plattenplatz auf seiner Festplatte verbrauchen. Hierfür entwickelte er als Visualisierungsform die sog. Treemaps (Treemaps bei Wikipedia, englisches Wikipedia und Universität von Maryland). Verschachtelte Rechtecke zeigen die hierarchischen Strukturen und auch das Größenverhältnis zueinander. Eine Historie der Entwicklung findet sich unter: http://www.cs.umd.edu/hcil/treemap-history/.

Das Abbild einer Festplatte sieht dann zum Beispiel so aus:

Hier lassen sich dann schnell große Dateien oder unnütze Verzeichnisse finden.

Programme

Von dieser Entwicklung profitieren auch heute Programme, die den Verbrauch im Dateisystem anschaulich darstellen. Einige Beispiele:

Milliarden

Diese Art der Darstellung lässt sich jedoch auch für andere Zwecke, bzw. Informationen nutzen. Sind nicht Bytes, sondern Dollar die Einheit, dann geht das auch. Der Journalist David McCandless vergleicht in seinem „Billion-Dollar-O-Gram“ eindrucksvoll die Ausgaben für den Irak-Krieg mit den Kosten für die Finanzkrise 2008 und Weiteren. Da wirkt das Vermögen von Bill Gates nicht mehr so eindrucksvoll (das braune Rechteck unter dem Schwarzen in der dritten Spalte).

Doch wie können nun solche Grafiken erstellt werden?

Eine Liste von freien Tools gibt es bei Wikipedia (Liste Treemapping-Software). Und es gibt natürlich auch eine API von Google. Die API ist gut erklärt und in dem angegebenen Beispiel lassen sich schnell eigene Zahlen eintragen, dies zeigt ein Beispiel mit den Daten der Studiengebühren 2010 der Universität Duisburg-Essen. Grafisch noch optimierbar, aber immerhin.

]]>
https://blogs.uni-due.de/zim/2011/05/21/treemaps_fur_milliarden_und_studiengebuhren/feed/ 2