Warning: include_once(/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php): failed to open stream: No such file or directory in /var/www/html/fields/dbp13/local/config.php on line 4

Warning: include_once(): Failed opening '/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php' for inclusion (include_path='.:/opt/php/lib/php') in /var/www/html/fields/dbp13/local/config.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/fields/dbp13/local/config.php:4) in /var/www/html/pmwiki-2.2.86/pmwiki.php on line 1250
Datenbankpraktikum SS 2013 - Datenvisualisierung - Layout

Datenvisualisierung der Universität Osnabrück

Thomas Sobieroy

Layout:

Das Layout des Frontends wird hauptsächlich durch eine index.html Datei erzeugt, die zur Darstellung genutzt wird und im dynamischen Umgang angepasst wird. Das Layout lässt sich beliebig auf kleinere Bildschirme anpassen (Abb.: 1), da mit Hilfe von Bootstraps und Javascript die Position der Objekt beim skalieren dynamisch angepasst wird. Alle Objekte der index.html können über die Datei css/main.css angepasst werden, um Redundanz der zu konfigurierenden Daten zu vermeiden (Abb.: 2).

Abb. 1: Auflösung 1280x1024
Abb. 2: Aufbau der main.css zur Layout Steuerung

Kopfleiste:

Die Kopfleiste besteht aus der Startseite (Home), einem Impressum (About) und einer Funktion um gespeicherte Suchanfragen zu laden. Um Anfragen zu speichern klickt man auf 'Gespeicherte Anfragen' und wählt dort den Menupunkt 'Aktuelle Suchanfrage Speichern'. Um Suchanfragen zu laden wählt man einfach im Menu 'Gespeicherte Anfragen' die zuvor gespeicherte Suchanfrage. Intern wird der Formularstatus, der im Menu Filter eingestellt wird im Browsercache gespeichert. Und bei auswählen der Suchanfrage wiederhergestellt. Dadurch ist diese Funktion unabhängig von dem aktuellen Zustand des Servers. Der Button About leitet auf die Projektseite des Datenbankenprojekts im PMWiki der Universität Osnabrücks.
Abb. 3: Kopfleiste

Datenvisualiserungsmenu:

Das Datenvisualisierungsmenu dient zur Auswahl der Repräsentation der Studentendaten. Dabei wird im Balkendiagramm mittels Highcharts ein Balkendiagramm gezeichnet. Der Button Tortendiagramm zeichnet ein Tortendiagramm, zu beachten gilt, dass intern wenn es mehr als 9 Kategorien gibt, die Werte der Y-Achse kommuliert werden. Eine Darstellung über mehr als 9 Bereiche mittels eines 2 dimensionalen Tortendiagramm ist zu unübersichtlich. In Googlemaps werden zu jedem Datensatz ein Längen- und ein Breitengrad, der in der Datenbank zu jedem Datensatz vorhanden ist abgerufen, sodass jeder Datensatz auf einer dynamischen Karte dargestellt werden kann. Gleiches gilt für die 3d Darstellung über den WebGL Globe.
Abb. 4: Datenvisualisierung

Datenfilter:

Abb. 5: Filtermenu
Im Filtermenu lassen sich eine Reihe von Einstellungen für die Visualisierung der Daten festlegen.

Die ersten beiden Menupunkte filtern zwischen Männlichen und Weiblichen Personen. Sind Männliche und Weibliche angewählt werden Frauen und Männer selektiert. Gleiches gilt wenn keins von beiden ausgewählt wird.

Student und Absolvent regelt, ob nur Studenten ausgewählt werden sollen oder nur Absolventen der Universität Osnabrück. Wenn eines von beiden ausgewählt wird stehen weitere Menus zur Verfügung. Sollte beides ausgewählt werden, dann werden Absolventen und Studenten berücksichtigt, für die keine gesonderten Menus zur Verfügung stehen. Genau wie bei Männern und Frauen gibt es auch hier die Möglichkeit nichts auszuwählen. Dieser Fall wird ebenso betrachtet, wie die Auswahl von Absolventen und Studenten.

Als dritter Menupunkt lässt sich das Alter auswählen. Hierbei gibt man das gewünschte Alter ein und bekommt so die Menge von Personen, die in diesem Altersbereich liegt. Wird für einen der Werte nichts gewählt, wird der andere als einzige Grenze festgelegt.

Im Menupunkt Fachbereich ist eine Mehrfachauswahl von Fächern möglich. Mittels dieser Auswahl, kann man Studenten oder Absolventen auf einen Fachbereich beschränken und kann sehen, in welchem Fachbereich der Student oder Absolvent aktiv ist oder war.

Die Lehreinheit ist ein dem Fachbereich untergeordneter und den Studienfächern übergeordneter Bereich wie z.B. der BSc. Informatik der Lehreinheit Informatik untergeordnet ist. Durch die Auswahl der Lehreinheit lässt sich eine genauere Unterscheidung als durch den Fachbereich bekommen. Aus diesem Grund ist in der Lehreinheit keine Mehrfachauswahl vorhanden.

Nationalität entspricht der Nationalität der Studenten. Im Gegensatz zum Heimatland, dass den Hochschulzugangsort als Grundlage nimmt, ist die Nationalität die ethnische Herkunft der Studenten oder Absolventen, weswegen auch nicht mehr existierende Länder wie z.B. die Sowjetunion im Dropdownmenu vorhanden sind.

Wird im Filter das erste Studienfach gewählt, kann wahlweise ein zweites dazu gewählt werden. Die Auswahl der Studienfächer dient dazu Kombinationen von Studienfächern zu prüfen. Es gilt zu beachten, dass Parallelstudien und Zweifach-Bachelor doppelt gewertet werden können, wenn nur ein Studienfach ausgewählt wird. Beispiel: Möchte man die reale Anzahl von Informatik Studenten haben, muss man beide Fächer auf Informatik setzen, damit keine doppelten Daten verarbeitet werden. Interessiert man sich hingegen für alle Studenten, die Informatik studieren, reicht es das 1.Fach auszuwählen. Intern wird falls kein Studienfachgewählt ist ein leerer String übergeben.

Die Mehrfachauswahl Abschlussarten dient der Visualisierung der verschiedenen Abschlüsse, dabei können mehrere Abschlüsse gewählt werden. Dabei sind die verschiedenen Abschlüsse, die man an der Universität Osnabrück machen kann auf die 7 Möglichkeiten abstrahiert.

Die Option die X-Achse festzulegen, regelt intern in Highcharts die Möglichkeit dynamisch zu gruppieren. Damit kann ohne große Probleme eine Vielzahl von möglichen Suchkombinationen geregelt werden, die im Torten und Balkendiagram dargestellt werden können. In Kombination mit der Y-Achse, die mehrere Datensätze aufeinander stapelt, können so verschiedenste Repräsentationen kombiniert werden. Zu beachten gilt, dass im Tortendiagram leider nicht mehr als 9 Werte aufeinander gestappelt werden zu können, ohne eine Kumulation zu erzwingen.

Drilldownmenu:

Abb. 6: Drilldownmenu
Mittels des Drilldownmenu lassen sich die vorhanden Filtereinstellungen direkt im Diagramm bearbeiten. Dadurch ist es möglich einen speziellen Bereich auszuwählen, der von Interesse ist. Dieser Bereich kann dann weiter verfeinert werden durch die Optionen, die es im Drilldownmenu gibt. Wählt man eine Option aus dem Drilldownmenu aus, wird das Diagram neu gruppiert und neu gezeichnet. Technisch wird der Filter neu gesetzt und der Filterzustand gespeichert. Mittels des Filterzustands wird dann ein Postrequest zu der Railsapplikation geschickt, die ihrerseits ein Json Objekt zurückliefert. Das Json Objekt wird direkt in die Highcharts Diagram Series eingetragen und sorgt dafür, dass neue Daten im Diagram sind. Ein Listener im Highchartsdiagram sorgt dann dafür, dass das Diagramm neu gezeichnet wird, sobald die Serie verändert worden ist.

Zoomfunktion:

Falls große Werte im Diagram dargestellt werden sollen können im Balkendiagramm die Daten näher betrachtet werden, indem man die linke Maustaste gedrückt hält über den gewünschten Bereich ein Rechteck zieht und dann die linke Maustaste loslässt. Dadurch wird das Diagram an der gewünschten Stelle vergrössert. Nach dieser Aktion erscheint oben rechts im Menu ein 'Reset Zoom' Button mit dem man die Vergrößerung wieder aufheben kann. Leider funktioniert der Zoom nicht im Tortendiagramm, aber um einen ähnlichen Effekt zu erhalten sollte man mittels eines klicks der linken Maustaste auf den zu vergrößernden Bereich ein Teil des Tortendiagramms hervorheben.


Page last modified on August 23, 2013, at 07:01 PM