Alex Gottschalk Zurück zu Projekte

Semester

Interaktionsgestaltung 2
Sommersemester 2017

Kurs

Programmiertes Entwerfen II

Dozent

Prof. Hartmut Bohnacker


Tools

Stift und Papier, HTML, CSS, JavaScript, jQuery, Snap.svg, GSAP


Interaktives Periodensystem der Elemente

Im Rahmen des Kurses "Programmiertes Entwerfen" habe ich das Periodensystem der Elemente zu einer interaktiven Datengrafik umgestaltet.

Konzept-Idee

Meine Idee war es, die Eigenschaften aller chemischen Elemente vergleichend anzuordnen. Als Grundraster habe ich das Periodensystem der Elemente verwendet. Dieses Raster hat natürlich ein System, in dem die Elemente angeordnet sind. In der Datengrafik kann ich nun andere Eigenschaften dieser Elemte auswählen und dadurch eine neue Anordnung generieren.

Ich habe mir erhofft, Zusammenhänge zwischen der Anordnung der Elemente im PSE und deren Eigenschaften kenntlich zu machen. Und unabhänig davon, Korrelationen zwischen verschiedenen Eigenschaften darstellen zu können.

Einschränkungen

Für die interaktive Datengrafik durften weder Text, komplexere Formen, noch Interface-Elemente verwendet werden.

Da es sich mitunter um sehr abstrakte Daten handelt war mir im Voraus bewusst, dass es unmöglich sein wird, diese Daten verständlich darstellen zu können. Aus der entstandenen Datengrafik lässt sich im Endeffekt nichts auslesen, da man (ohne eine textliche Beschreibung) nicht weiß, um welche Eigenschaft eines chemischen Elements es sich hierbei handelt. Dennoch lassen sich Zusammenhänge erkennen, die man leider jedoch nicht weiter ergründen kann.

Parameter zur Darstellung der chemischer Eigenschaften

Jedes chemische Element wird durch ein individuell eingefärbtes Rechteck visualisiert.

Für die Visualisierung der Eigenschaften habe ich die Höhe, Breite, X-Position und Y-Position der Rechtecke gewählt. Jedem der vier Parameter lässt sich individuell eine Eigeschaft eines chemischen Elements zuordnen – es können also bis zu vier Werte gleichzeitig miteinander verglichen werden.

Eine Auswahl an Elementen treffen

Welche chemischen Elemente miteinander verglichen werden habe ich komplett offen gelassen – man kann seine Auswahl frei treffen und jederzeit ändern.

Elemete auswählen

Auf der Vertikalen lassen sich alle Elemente mit derselben Anzahl an Elektronenschalen auswählen (Reihe), auf der Horizontalen lassen sich die Elemente mit derselben Anzahl an Außenelektronen auswählen (Spalte), Hauptgruppen lassen sich auswählen, wenn sich die Maus knapp über oder unter dieser befindet (Blöcke). Außerdem lässt sich jedes Element einzeln an- und abwählen.

Auf den Diagonalen zum PSE lassen sich alle Elemente an- bzw abwählen.

Zur Datenvisualisierung wechseln

Da keine UI-Elemente, Icons oder Text verwendet werden durften, basiert die gesamte Interaktion auf direkter Interaktion mit den Elementen durch klicken oder einfachen Mausbewegungen.

Durch eine Mausbewegung nach rechts, an den Rand des Bildschirms, kann zwischen der Anordnung im Periodensystem und der Datenvisualisierung hin- und hergewechselt werden.

Vergleichsparameter ein- und ausblenden

Mit einer Mausbewegung nach unten, an den Rand des Bildschirms, kann die Eigenschaftenlsite ein- bzw. ausgeblendet werden.

Eigeschaften einzelner Elemete anzeigen

Wenn man sich mit der Maus über einem der Elemente befindet, dann werden die Werte der chemischen Eigenschaften visualisiert.

Visualisierte Eigeschaften ändern

Neben der Auswahl der Elemente können auch die Vergleichsparameter frei gewählt werden.

Zur Auswahl stehen die folgenden chemischen Eigenschaften (von links nach rechts):

  • Anzahl der Elektronen
  • Entdeckungsjahr
  • Dichte
  • Schmelzpunkt
  • Siedepunkt
  • Fusionswärme
  • Errechnete Atomradien
  • Thermische Leitfähigkeit
  • Vorkommen in der Erdkruste

Ist die Eigenschaft eines der Elemente in der Auswhal nicht bekannt, so wird dieses in dieser Visualisierung ausgeblendet.

Um eine Eigenschaft auszuwählen, muss man in das Feld klicken, die Maus gedrückt halten, in eine beliebige Richtung bewegen und anschließend wieder los lassen. Ist eine Eigenschaft bereits aktiv und ich wähle sie erneut aus, dann wird diese abgewählt.

Die Mausbewegung nach oben visualisiert diese Eigenschaft durch das Skalieren der Rechtecke in X-Richtung. Die Bewegung nach rechts, die Skalierung auf der Y-Achse. Das Bewegen nach links ordnet die Elemente aufsteigend an der Y-Achse an. Nach unten ordnet die Elemenet auf der X-Achse an.

Die Skalen der Position und Skalierung sind variabel. Das Element mit dem höchsten Wert einer Eigenschaft wird auf einen Maximalwert skaliert, das Element mit dem kleinesten Wert auf einen Minimalwert – die anderen Elemente ordnen sich dazwischen an. Dieses Verhalten ist für alle Parameter gleich. Auf diese Weise wird gewährleistet, dass die ausgewählten Elemente immer bestmöglich miteinander verglichen werden können.

Daten im visualisieren

Wählt man bei der Darstellung der Eigenschaften nur die Skalierung in X- und Y-Richtung aus, so bleiben die Elemente weiterhin im PSE angeordnet. Nun können Zusammenhänge zwischen der Anordnung der Elemente im PSE und den chemischen Eigenschaften der Elemente dargestellt werden.

Datenvisualisierungen

Durch die willkürliche Auswahl an Elementen und das offene Mapping der Eigenschaften der chemischen Elemente, lässt sich eine unwahrscheinliche Vielzahl an Varianten erzeugen.

Die nachfolgende Bildergalerie zeigt Varianten, die bei der Datenvisualisierung entstehen können.

Visualisierung 1 Visualisierung 2 Visualisierung 3 Visualisierung 4 Visualisierung 5 Visualisierung 6 Visualisierung 7 Visualisierung 8 Visualisierung 9 Visualisierung 10 Visualisierung 11 Visualisierung 12 Visualisierung 13