< Portfolio | Alicia Hardegen
Back
cover photo interactive datagrafic

Interaktives Periodensystem

Eine interaktive Datenvisualisierung

Tools: Illustrator, Atom (Text-Editor)
Kurs: Programmiertes Entwerfen 2
Ziel:Einen Datensatz mit Javascript zu visualisieren. Die Informationen sollen ohne die Verwendung von Piktogrammen und alphanumerischer Zeichen dem Betrachter vermittelt und durch Interaktionen erfahrbar gemacht werden.

Die interaktive Datengrafik ist in mobiler Version nicht verfügbar.

periodic table

Themenwahl

In der Wissenschaft werden Datenvisualisierung als Forschungsmethode täglich benutzt. Das klassische Periodensystem enthält unglaubliche viele Informationen, die für das Auge nicht fassbar sind. Mithilfe von Visualisierungen und Interaktionen werden Zusammenhänge erfahrbar.

Datensatz

Der Datensatz stammt aus diversen Quellen und umfasst die Namen aller bekannten Atome und ausgewählte Eigenschaften, wie z.B. Elektronegativität oder das Vorkommen auf der Erde.

data set
Year of discovery graphic

Entdeckungsjahr

Das Entdeckungsjahr der einzelnen Atome bildet die Startanimation. Man sieht, wie mit der Zeit immer mehr Kreise auf dem Bildschirm erscheinen und das Periodensystem, das wir heute kennen, bilden.

Atomradius

Der Atomradius wird durch den Radius der einzelnen Elemente dargestellt. Die Anordnung geht auf das Periodensystem von Fischer und Kohler zurück. Man kann erkennen, wie der Atomradius von links nachts rechts und von unten nach oben im Periodensystem kleiner wird.

atom radius
Group of elements visualized by color

Elementgruppe

Die Einfärbung der Atome richtet sich nach der Elementgruppe, um einen höheren Erkennungswert zu erzielen und den Zusammenhang zwischen Aggregatzustand und Elementgruppe aufzuweisen.

Elektronegativität

Die Elektronegativität (das Maß für die Fähigkeit, Elektronenpaare in einer chemischen Bindung an sich zu ziehen) wird mit der Deckkraft visualisiert. Je höher das Potential, desto heller wird ein Atom.

electronegativity visualized by opacity
occurence on earth vizualized in a bar chart

Vorkommen auf der Erde

Das Vorkommen der Atome auf de Erde wird anhand eines Balkendiagramms dargestellt. Den Maßstab kann die betrachtende Person mithilfe des Mauszeigers verändern.

Aggregatzustand

Je nach Aggregatzustand (fest, flüssig, gasförmig) wird ein Atom einer der drei Gruppen zugeordnet. Die Temperatur kann mithilfe des Mauszeigers verändert werden, die Atome ordnen sich dann neu.

state of aggregation vizualised by position
elektrons vizualised by number

Elektronen

Die Elektronen werden anhand der Menge von Punkten, die das Atom umgeben, dargestellt.

System

Nachdem die Visualisierung der einzelnen Eigenschaften feststand, wurde ein System entwickelt durch das die betrachte Person animiert wird zu agieren. Zunächst wird sie visuell aufgefordert, die Startanimation zu starten. Danach landet der/die Betrachter*in auf der Hauptseite, wo je nach X-Position der Maus unterschiedliche Eigenschaften der Atome erkennbar werden. Mithilfe eines Mausklicks auf ein Atom werden die Außenelektronen sichtbar. Seitlich befinden sich Buttons, die zu den Darstellungen des Aggregatzustandes und des Vorkommens auf der Erde führen.

sketch of the system
lightbulb

Learnings

Durch die Visualisierung dieser Datengrafik habe ich mich viel mit Darstellungsweisungen von Datensätzen beschäftigt. Ich finde es faszinierend, wie man abstrakte Zahlen für das Auge auf unterschiedlichste weise lesbar machen und Interaktionsmöglichkeiten kreieren kann. In diesem Projekt konnte ich meine Programmierskills erweitern.