SVG/Anwendung und Praxis/Datenvisualisierung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Erst die Erfindung der Computers (engl. für Rechner) ermöglichte das Sammeln großer Mengen von Daten. Aus dem Auswerten und Vergleichen dieser Datenmengen entwickelte sich die Aufgabe diese Daten auch ansprechend zu präsentieren.

Informations- oder Datenvisualiserung (data visualization) beschäftigt sich mit den computer-unterstützten Methoden zur grafischen Repräsentation großer Mengen von Daten, die nicht unmittelbar mit physikalischen Zuständen oder Vorgängen verknüpft sind. In der explorativen Datenanalyse sollen die bildlichen Darstellungsmethoden helfen, neue Erkenntnisse zu gewinnen.[1] So können Werte in einem Streudiagramm bisher unbekannte Korrelationen oder Cluster aufzeigen.

Im Selfhtml-aktuell-Bereich stellte Lutz Tautenhahn mit dem JavaScript Diagram Builder 2002 eine Bibliothek zur Verfügung, mit der man einfache Diagramme erstellen konnte. Heute gibt es zahlreiche Frameworks, die mit wenigen Zeilen JavaScript attraktive und anschauliche Präsentationen ermöglichen.

Dieser Artikel soll Ihnen eine Übersicht über heute verfügbare Frameworks geben.


[Bearbeiten] D3 (Data-Driven Documents)

D3.js ist eine JavaScript-Bibliothek zur Manipulation datenbasierter Dokumente, die auf HTML, CSS und SVG aufbaut und so fortgeschrittene Animationen und Visualisierungen ermöglicht.[2] Auch renommierte Medienkonzerne wie die New York Times nutzen Visualisierungen mit D3.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Durch einen Klick auf die Sechsecke der Startseite können Sie sich eine Vielzahl von Beispielen anschauen.

Screenshot



[Bearbeiten] Einbindung per CDN

Sie können die jeweils neueste Version auch direkt per CDN einbinden, wenn Sie folgenden Code-Schnipsel in den Kopf Ihrer Webseite einfügen:

Beispiel
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>


[Bearbeiten] Raphaël

Raphael.js ist eine Open-Source JavaScript-Bibliothek, die Daten in Diagramme und Bilder umwandelt und dabei rotieren und beschneiden kann. Als Format für die Vektorgrafiken benutzt sie SVG und VML. Da das SVG-DOM durch Event-Handler erweitert werden kann, ermöglicht dies interaktive Grafiken und Animationen.[3]

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

[Bearbeiten] snap.svg

Da raphael.js aus dem Jahre 2008 sogar den IE5.5 unterstützte, war eine Weiterentwicklung nur noch schwer möglich und so entschloss sich Dimitri Baranovskiy zu einer Neuentwicklung, die besonders die Manipulation von SVG-Elementen ermöglichte. Der Nachfolger Snap.svg ermöglicht interaktive und responsive Animationen für SVG und nutzt dabei SVG-Features wie Maskierungen, Muster, Verläufe und Filter.[4]

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Auf tutsplus finden Sie ein umfangreiches Tutorial in englischer Sprache.[5]

[Bearbeiten] Quellen

  1. wikipedia: Informationsvisualisierung
  2. D3.js
  3. raphael.js
  4. Snap.svg
  5. tutsplus: How to Manipulate and Animate SVG With Snap.svg

[Bearbeiten] Weblinks


deutsch:

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML