Planetary.js: Interaktive Globen mit JavaScript
Kommentare

Zugegeben: Der Use Case für Planetary.js ist relativ eingegrenzt, trotzdem ist es eine JavaScript Library, die nette Spielereien erlaubt und ist deswegen allemal eine Erwähnung wert.
Planteary.js hat

Zugegeben: Der Use Case für Planetary.js ist relativ eingegrenzt, trotzdem ist es eine JavaScript Library, die nette Spielereien erlaubt und ist deswegen allemal eine Erwähnung wert.

Planteary.js hat im Grunde den einen Zweck, dass man damit einen interaktiven Globus erstellen kann. Diesen kann man so gestalten, wie es einem grad gefällt- man kann in sich um alle Achsen drehen lassen, die Farbgebung variieren und animierte Pings an x-beliebigen Stellen einfügen. Außerdem kann über Maussteuerung gedraggt und gezoomt werden.

Das alles wird u.a. möglich dank D3, TopoJSON und einer Plug-in-basierte Architektur. Auf der Projektwebsite findet ihr drei Beispiele der Anwendung, die gleichzeitig Schritt für Schritt den Aufbau eines solchen JacaScript-Globus erklären: Der Basic Globe und der dazugehörige Code veranschaulichen die Grundlage, um eine Darstellung der Erde ohne weiteren Schnickschnack zu erstellen. Mit dem nächsten Beispiel wird es dann schon etwas kniffliger: Rotation, Pings, Drag und Zoom erfordern die ersten Plug-ins, die teils selbst customized wurden.

Das dritte Beispiel schöpft schließlich aus den Vollen: Es visualisiert die seismischen Aktivitäten auf der Erde über den gesamten Jahresverlauf 2013. Während unten die Timeline läuft, dreht sich die Erdkugel um alle Achsen und aufleuchtende Pings zeigen, wo die Erde bebte. Hier wurde neben eigenen Plug-ins zusätzlich Moment.js, D3 Scales, DOM-Manipulation und das Laden von External Data  eingesetzt.

Der vollständige Code sowie die extra für Planetary.js erstellten Plug-ins könnt ihr hier herunterladen.

 

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -