UPDATE: Viele der in diesem Artikel aus dem Jahr 2012 vorgestellten Tools sind nach wie vor effektiv und haben sich weiterentwickelt, um noch nützlicher zu werden. Vielleicht interessieren Sie sich auch für unsere neuere Serie über interaktive Datenvisualisierungstools.
Komplexe Datenvisualisierungstools
Willkommen zurück zum zweiten Teil meiner Serie über interaktive Datenvisualisierungstools (dataviz). In Teil 1 haben wir drei coole Tools zur Visualisierung von Diagrammen und Graphen und vielen anderen Datentypen auf einer Webseite vorgestellt. Im zweiten Teil werfen wir einen Blick auf drei weitere Tools, die etwas komplexer sind, aber unglaubliche Möglichkeiten zur Datenvisualisierung bieten.
- jQuery Visualize (Teil 1)
- Google Charts (Teil 1)
- Highcharts (Teil 1)
- Simile Exhibit
- JavaScript InfoVis Toolkit
- D3.js
Simile Exhibit
Exhibit ist ein sehr robustes und anpassbares Angebot. Eine seiner Hauptstärken ist ein einzigartiger Ansatz zur Darstellung der Daten. Zusätzlich zu den benutzerfreundlichen Filter-, Sortier- und Suchwerkzeugen können Sie eine HTML-Vorlage (in Exhibit „Linse“ genannt) verwenden, um alles auf der Seite so zu gestalten, wie Sie es wünschen. Es ist fast wie ein Mini-CMS für Dataviz, bei dem Sie über Attributwerte direkt in der Linse auf Ihre Daten zugreifen können. Für Projekte, die ein hohes Maß an Sensibilität für das Erscheinungsbild erfordern, ist dieses extreme Maß an Flexibilität für die Erstellung von Datenvisualisierungen fantastisch.
- Unterstützte Visualisierungstypen: Liniendiagramme, Karten, Streudiagramme, mehrfach filterbare Listen, Zeitleisten, Zeitdiagramme und mehr… mit Widgets!
- Dateneingabequellen: JSON, Tabellenkalkulation
- Datenausgabe: HTML
- Styling-Optionen: CSS
- Typ: Javascript-Bibliothek
PROS
Flexibel & Leistungsstarker Ansatz für das Design
Mir gefällt der Ansatz von Exhibit, bei dem die Daten durch eine „Linse“ dargestellt werden – eine HTML-Vorlage, in die Elemente eingefügt werden. Dadurch ist das System vollständig anpassbar und mit CSS gestaltbar, was bedeutet, dass Designer es lieben und die Schaffung von Konsistenz für die Marken der Kunden ein Kinderspiel ist.
Starkes Filtern/Sortieren/Suchen
Die Möglichkeit, Ihre Daten nach einer beliebigen Anzahl von Kriterien zu filtern, ist unglaublich nützlich und verwandelt Ihre Informationen von statischen Inhalten in eine echte interaktive Funktion. Die Filterung ist direkt in Exhibit integriert und leicht zu implementieren. Serverseitiges Filtern kann sehr mühsam sein (ganz zu schweigen von den Kosten), daher zeichnet sich Exhibit dadurch aus, dass es die Filterung für den Benutzer unglaublich schnell und einfach macht. Das Gleiche gilt für die Sortierung und Suche. Exhibit macht es sehr einfach, den Nutzern Ihrer Website die Kontrolle darüber zu geben, genau die Ansicht Ihrer Daten zu erhalten, die sie wollen, und somit ein wertvolleres Verständnis dafür zu bekommen, warum sie wichtig sind.
Starke Dokumentation
Der Einstieg in komplexe Dataviz-Tools kann ein Unterfangen sein und erfordert einige Versuche und Fehler. Exhibit beschleunigt den Prozess mit einer großartigen Dokumentation auf seiner Website und einigen ausgezeichneten Tutorials für Anfänger.
Widgets!
Wollen Sie Exhibit noch weiter ausbauen? Sie können die Funktionalität mit Widgets erweitern. Es gibt Widgets für Bibliographie- und Zitatesammlungen, einen Bildbetrachter im CoverFlow-Stil, Zeitleisten und Zeitdiagramme – um nur einige zu nennen. Diese Art der Produkterweiterung macht Exhibit zu einer der robustesten und flexibelsten Optionen für die Datenvisualisierung.
CONS
Steile Lernkurve
Wie bei den anderen komplexeren Bibliotheken ist auch bei Exhibit mehr Programmierarbeit erforderlich als bei den meisten anderen Optionen, und vorherige Javascript-Erfahrung ist definitiv sehr hilfreich. Ich fand jedoch, dass die Tutorials wirklich gut gemacht sind und Spaß machen, so dass man, wenn man einmal angefangen hat, wirklich leicht ins Rollen kommt.
Javascript InfoVis Toolkit
Javascript InfoVis Toolkit ist eine nette Suite von Tools zum Erstellen von Diagrammen und Grafiken auf einer Webseite. Es bietet eine schöne Liste von unterstützten Diagrammtypen und führt einige Animationsfunktionen in den Mix ein (z.B. können sich die Balken eines Balkendiagramms auf ihre Größe ausdehnen, wenn das Diagramm geladen wird – diese Art von Dingen). Die Animationen sind nett und können Ihrer Website definitiv einen zusätzlichen Schliff geben. Es gibt auch einige coole interaktive Funktionen, wie die Anwendung eines „Filters“ auf ein Diagramm durch Anklicken. Das Diagramm zeigt dann nur die Reihe an, auf die Sie geklickt haben, bis Sie den Filter entfernen. Schauen Sie sich die Demos an, um mehr über die Möglichkeiten dieses Toolkits zu erfahren.
- Unterstützte Visualisierungstypen: Flächendiagramm, Balkendiagramm, Kreisdiagramm, Baumdiagramm, Force Directed, Radialdiagramm, Sunburst, Icicle, Space Tree, Hyper Tree
- Dateneingabe: JSON
- Ausgabe: Leinwand
- Styling: Javascript Parameter
- Typ: Javascript Bibliothek
PROS
Einzigartige Diagrammtypen
Ich mag die verschiedenen nicht standardisierten Visualisierungstypen, die im InfoVis Toolkit verfügbar sind, sehr. Dieses Tool könnte für ein gelegentliches Tortendiagramm überflüssig sein, aber es könnte wirklich glänzen, wenn man sich den Darstellungsoptionen für kompliziertere Daten nähern muss.
Animationen / Interaktionen
Die Animationen sind eine großartige Ergänzung zu diesen Diagrammen und Grafiken. Sie verleihen den Diagrammen eine schöne Flash-ähnliche Qualität, die wirklich gut ist. Und die Möglichkeit, mit diesen Diagrammen zu interagieren, indem man Dinge herumzieht und das Diagramm manipuliert (wie hier), ist sehr cool und könnte sehr nützlich sein.
CONS
Lernkurve
Mit all diesen großartigen Funktionen kommt auch die Komplexität, und obwohl die Dokumentation auf der Website gut zu sein scheint, erfordert dieses Tool einige gute Javascript-Erfahrung, um das Beste daraus zu machen.
D3.js
Wow, D3.js ist cool! Ich habe mich ein paar Stunden lang auf der D3-Website umgesehen, und die Möglichkeiten scheinen endlos zu sein. Dieses Tool erfordert definitiv ein ziemlich hohes Maß an Fachwissen über Javascript und JSON, aber es erzeugt einige wunderschöne, anspruchsvolle Diagramme. Sehen Sie sich die Beispiele an.
D3 ist nicht wirklich wie die anderen. Es ist kein fertiges Diagramm-Tool, sondern eher ein Framework zum Zeichnen datenbasierter Elemente. Die D3-Website sagt es am besten: „Anstatt ein monolithisches System mit allen Funktionen zu bieten, die man jemals brauchen könnte, löst D3 nur den Kern des Problems: effiziente Manipulation von datenbasierten Dokumenten.“
Und da Sie SVG-Grafiken erstellen können, können Sie diese Ausgabe überall verwenden, einschließlich Druckanwendungen. D3 könnte das Zentrum eines ausgeklügelten Web-/Print-Publishing-Workflows für ein grafiklastiges Projekt sein.
- Unterstützte Visualisierungsarten: Alle? Der Himmel ist die Grenze.
- Dateneingabe: JSON, GeoJSON, CSV
- Ausgabe: HTML, SVG
- Styling: CSS, Javascript
- Typ: Javascript-Bibliothek
PROS
Unbegrenzte Flexibilität
Mit D3.js können Sie so ziemlich alles zeichnen, was Sie wollen, basierend auf Daten. Dies ist ein erstaunliches Werkzeug für Leute, die neue Datenvisualisierungen und Visualisierungen auf der Grundlage wirklich großer Datensätze erstellen.
Output
Sehr cool, dass man D3 anweisen kann, sowohl HTML-Elemente als auch SVG zu erstellen. Das öffnet definitiv die Tür zum Styling mit CSS, was ideal ist.
CONS
Lernkurve
Man muss ein versierter Javascript-, JSON- und Mathe-Mensch sein, um D3 dazu zu bringen, durch Reifen zu springen. Und einige der Beispiele verwirren den Verstand, aber machen Sie weiter und gehen Sie das Tutorial durch. Es ist gar nicht so schlimm, und wenn Sie mit jQuery oder Prototype vertraut sind, wird Ihnen vieles davon bekannt vorkommen. Vieles aber auch nicht…
Abschluss
Diese sechs Produkte sind nur die Spitze des Eisbergs für Dataviz. Es gibt Dutzende weiterer großartiger Produkte da draußen. Aber sie sollten Ihnen eine gute Vorstellung davon vermitteln, was geschieht, und einen Eindruck von der Bandbreite der Möglichkeiten und der Komplexität der interaktiven Dataviz-Welt vermitteln.